AG Grid의 Grid Option

AG Grid의 Grid Option은 AG Grid를 설정하고 동작을 제어하는 데, 사용됩니다.

저는 ag-gird-vue라는 태그 안에 Grid Option을 사용했어요.

Grid Option에는 무엇이 있고 어떤 역할을 하는지 알아봅시다!

 

---

1. Grid Option

Grid Option은 다음과 같습니다. (Grid Options 공식 홈페이지 바로가기)

옵션	설명
groupRemoveSingleChildren	그룹화된 데이터에서 자식이 하나만 있는 경우, 그룹을 축소화할 지 결정합니다.
localeText	텍스트의 언어를 설정합니다.
style	그리드의 스타일을 설정합니다.
class	그리드의 클래스를 설정합니다.
rowData	배열 형태의 데이터를 그리드에 로드합니다.
getRowNodeId	주어진 ID를 가진 행 노드를 반환합니다.
defaultColDef	그리드의 기본 열을 정의합니다.
columnDefs	열 or 열 그룹을 정의합니다.
postSort	정렬 후, 추가 정렬을 위한 콜백함수를 받습니다.
suppressDragLeaveHidesColumns	값이 true인 경우, 그리드 밖으로 열을 끌어다 놓을 때, 열이 숨겨지지 않습니다.
suppressMakeColumnVisibleAfterUnGroup	열이 그룹 해제되면(행 그룹 패널을 사용하면), 그리드에 표시됩니다. 그룹 해제 시, 다시 표시되지 않도록 합니다.
enableRangeSelection	값이 true인 경우, 범위 선택이 활성화됩니다.
rowMultiSelectWithClick	값이 true인 경우, 여러 행 선택이 가능합니다.
animateRows	값이 false인 경우, 기본적으로 활성화된 행 애니메이션을 비활성화합니다.
sideBar	사이드바 구성요소를 지정합니다.
rowBuffer	그리드가 렌더링하는 가시 영역 밖에서 렌더링되는 행의 수를 나타냅니다. 버퍼 발생은 사용자가 천천히 스크롤할 때, 그리드에 표시할 행이 준비되어 있다는 것을 의미합니다.
tooltipShowDelay	요소에 마우스를 올려놓으면, 툴팁이 표시되기까지 걸리는 지연 시간(밀리초)을 설정합니다. 이 속성은 enableBrowserTooltips의 값이 true인 경우, 작동하지 않습니다.
enableBrowserTooltips	값이 true인 경우, 그리드의 tooltip component를 사용하는 대신, 브라우저의 tooltip component를 사용합니다. framworkComponents : 컴포넌트를 지정합니다.
cellFlashDelay	열 정의에서 enableCellChangeFlash를 설정할 떄, 사용합니다. 셀이 'flashed' 상태를 유지해야 하는 기간을 밀리초 단위로 설정합니다.
cellFlashFade	열 정의에서 enableCellChangeFlash를 설정할 때, 사용합니다. cellFlashFade에서 설정한 타이머가 완료된 후, 'flashed' 상태 애니메이션이 사라지는 데 걸리는 시간을 밀리초 단위로 설정합니다.
autoGroupColumnDef	default에 만족하지 않으면, 'auto column' 그룹을 지정할 수 있습니다. 그룹화 하는 경우, 이 열의 정의는 그리드의 첫 번째 열에 포함됩니다. 그룹화하지 않는 경우, 이 열은 포함되지 않습니다.
pagination	페이지 분할 설정 여부를 지정합니다.
paginationPageSize	페이지당 로드할 행의 수를 지정합니다. paginationAutoPageSize가 지정된 경우, 이 속성은 무시됩니다.
paginationAutoPageSize	값이 true인 경우, 페이지당 로드할 행의 수가 그리드에 의해 자동으로 조정되어, 각 페이지에 그리드에서 지정한 영역을 충분히 채우는 행이 표시됩니다. 값이 false인 경우, paginationPageSize가 사용됩니다.
paginationNumberFormatter	사용자가 pagination panel의 숫자(행의 수 or 페이지 번호)레이블을 포맷할 수 있도록 합니다. 이것은 pagination panel에만 해당하며, 그리드 셀(데이터) 내부의 숫자를 포맷한 다음, 열 정의에서 valueFormatter를 사용합니다. 이 속성은 초기화 시에만 읽습니다.
isExternalFilterPresent	Grid의 외부 필터가 있는지 알아보기 위해 이 메서드를 호출합니다.
doesExternalFilterPass	외부 필터가 통과하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
getContextMenuItems	상황에 맞는 메뉴를 커스텀합니다.
defaultExcelExportParams	Excel로 내보내는 데 사용되는 기본 구성 개체입니다.
defaultCsvExportParams	CSV로 내보내는 데 사용되는 기본 구성 개체입니다.
getRowStyle	각 행에 대해 개별적으로 스타일을 설정하는 속성 rowStyle의 콜백함수 버전입니다. 함수는 CSS 값의 객체를 반환하거나 스타일이 없는 경우, undefined를 반환해야 합니다.
getRowClass	각 행에 대해 개별적으로 클래스를 설정하는 rowClass의 콜백함수 버전입니다. 함수는 문자열(클래스명), 문자열 배열(클래스명 배열) 또는 클래스가 없는 경우, undefined를 반환해야 합니다.
groupDefaultExpanded	그룹화하는 경우, 기본적으로 확장할 레벨 번호를 설정합니다. 0은 아무것도 확장하지 않고, 1은 첫 번째 레벨만 확장합니다. -1로 설정하면, 모든 것을 확장합니다.
suppressAggFuncInHeader	값이 true인 경우, 열 머리글에 aggFunc명이 포함되지 않습니다. 예를 들어, 'sum(Bank Balance)'는 'Bank Balance'로만 표시됩니다.
groupIncludeFooter	그룹화된 데이터에 대해 footer 행 포함 여부를 설정합니다.
groupIncludeTotalFooter	그룹화된 데이터의 전체 footer 포함 여부를 설정합니다.
rowDeselection	사용자가 행을 선택할 때, 이미 선택된 행을 다시 클릭하여 선택 해제할 수 있는지 여부를 설정합니다.
multiSortKey	ctrl로 설정하면, Ctrl or Command 키를 사용하여 다중 정렬이 작동합니다.
overlayNoRowsTemplate	그리드에 데이터가 없을 때, 표시할 오버레이 템플릿을 설정합니다.
excelStyles	그리드의 셀 스타일을 Excel과 유사하게 설정할 수 있습니다.
isRowSelectable	어떤 행을 선택할 수 있는지 결정하는데 사용할 콜백함수입니다. 기본적으로 행은 선택 가능하므로 false를 반환하여 행을 선택할 수 없게 만듭니다.
rowModelType	행 모델 타입을 설정합니다. 이 속성은 초기화 시에만 읽습니다.

 

---

2. 정리하며

지금까지 Grid Option에 대해 알아보았습니다.

이를 활용하여, AG Grid를 더욱 효율적으로 사용할 수 있을 것 같아요.