TIL

[TIL] 0328 ag grid 기본 옵션들 설명

자바칩 프라푸치노 2022. 4. 1. 15:17

1. ag grid 기본 옵션들

 

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',
},
};
view raw aggrid.js hosted with ❤ by GitHub

✏︎ 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