TIL
[TIL] 0328 ag grid 기본 옵션들 설명
자바칩 프라푸치노
2022. 4. 1. 15:17
1. ag grid 기본 옵션들
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { AG_GRID_LOCALE_KO } from './locale'; | |
import ActionCellRenderer from 'components/Common/ActionCellRenderer'; | |
export const defaultColDef = { | |
columnGroupShow: 'closed' | |
resizable: true, | |
editable: false, | |
sortable: true, | |
enableRowGroup: true, | |
enablePivot: true, | |
enableValue: true, | |
floatingFilter: true, | |
filter: 'agTextColumnFilter', | |
filterParams: { newRowsAction: 'keep' }, | |
}; | |
export const defaultGridOptions = { | |
localeText: AG_GRID_LOCALE_KO, // 언어 설정 | |
defaultColDef: defaultColDef, // 컬럼 기본값 설정 | |
rowSelection: 'multiple', // single, multiple | |
floatingFiltersHeight: 40, // 필터 영역 높이 | |
editType: 'fullRow', | |
frameworkComponents: { | |
actionRenderer: ActionCellRenderer, | |
}, | |
onRowEditingStarted: params => { | |
params.api.refreshCells({ | |
rowNodes: [params.node], | |
force: true, | |
}); | |
}, | |
onRowEditingStopped: params => { | |
params.api.refreshCells({ | |
rowNodes: [params.node], | |
force: true, | |
}); | |
}, | |
suppressClickEdit: true, | |
groupSelectsChildren: true, // 자식 선택 시 부모 선택 | |
groupSelectsFiltered: true, // 선택한 그룹의 하위 열을 선택하는 것을 허용하는 옵션 | |
groupDefaultExpanded: -1, // -1 = all expanded, 0 = none expanded, 1 = first group only expanded.. | |
rowGroupPanelShow: 'always', // 그룹핑하고자 하는 컬럼을 드래그 할 수 있는 영역을 표시하는 옵션 | |
pivotRowTotals: 'before', // 옵션: before, after | |
pivotPanelShow: 'always', // 옵션: never, always | |
undoRedoCellEditing: true, // 셀 수정 취소/복구 기능 | |
undoRedoCellEditingLimit: 10, // 셀 수정 취소/복구 가능 횟수 | |
pagination: true, // 페이지네이션 | |
paginationPageSize: 50, // 페이지네이션 단위 | |
rowBuffer: 10, // 기본 20 | |
groupDisplayType: 'multipleColumns', // option: groupRows, multipleColumns, custom, singleColumn | |
// groupRemoveSingleChildren: true, // 자식이 하나뿐인 그룹을 제거하는 옵션 | |
// groupRemoveLowestSingleChildren: true, // 단독 컬럼 제거(rowGroup 제거) | |
sideBar: { | |
toolPanels: ['columns', 'filters'], | |
defaultToolPanel: 'columns', | |
}, | |
}; |
✏︎ columnGroupShow: 'closed'
- open이면 화살표가 생기면서 옆으로 늘어날 때 오픈되고 closed면 closed되었을때 노출됨
✏︎ resizable: true,
- 컬럼 사이즈를 조정할 수 있는지 없는지
✏︎ editable: false,
- 셀을 수정할 수 있는지
✏︎ sortable: true,
- 컬럼 자체에서 소팅가능한지
✏︎ enableRowGroup: true,
- 로우 그룹을 지정할 수 있는지
✏︎ enablePivot: true,
- 피봇 기능 가능한지
✏︎ enableValue: true,
- 컬럼에 function을 지정해서 값을 보여줄 수 있는지
✏︎ floatingFilter: true,
- 컬럼 헤더 바로밑에 필터가 있는지
✏︎ filter: 'agTextColumnFilter',
- 플로팅 필터의 종류
✏︎ filterParams: { newRowsAction: 'keep' }
React Data Grid: Provided Filters
This section describes the functionality common to all filters that are provided by the grid. Download v27 of the best React Data Grid in the world now.
www.ag-grid.com
728x90