Ag Grid 추가사용법

ColDef

cellClass, cellClassRules

• Column들 설정시에 colId, cellClass 값을 각 cell마다 설정가능함.

• string이거나 string배열이거나, string을 반환하는 function임.

• 보통 스타일링을 위해 이 값들을 주는 듯

cellClass Type
string | string[] | CellClassFunc
Class to use for the cell. Can be string, array of strings, or function that returns a string or array of strings.

• cellClassRules로 cell값들에 대한 공통 rule들을 설정가능함.

const [columnDefs, setColumnDefs] = useState([
    {
        field: 'year',
        cellClassRules: {
            // apply green to 2008
            'rag-green-outer': params => params.value === 2008,
            // apply amber 2004
            'rag-amber-outer': params => params.value === 2004,
            // apply red to 2000
            'rag-red-outer': params => params.value === 2000,
        }
    }
]);

<AgGridReact columnDefs={columnDefs} />

valueFormatter

• 이 속성으로 cell들의 format설정가능함. (formatting 도와주는 메서드, 라이브러리와 함께 사용가능함.)

valueFormatter Type
string | ValueFormatterFunc

exportDataAsExcel(e)

• ExcelExportParams를 받아 excel 형태로 내보내는 기능임.

• processCellCallback : 그리드의 모든 셀에 invoke되는 callback function이다. => foramtting하는데 사용된다.

• queryClient.invalidate vs queryClient.cancelQuries => 이미 fetching된 쿼리를 무효화시키는 게 invalidate, 호출을 하고있는 도중에 cancel하는게 cancelQuries

exportDataAsExcel = (
params?: ExcelExportParams
) => void;

setQuickFilter, resetQuickFilter

• 필터링하는 aggrid의 내장기능 => 디바운스 함께 사용가능

  const onFilterTextBoxChanged = useCallback(() => {
    gridRef.current.api.setQuickFilter(
      document.getElementById('filter-text-box').value
    );
  }, []);

• api.resetQuickFilter => 모든 rowNode의 cache를 리셋함.

ModuleRegistry

• Module Registry를 통해 모듈을 등록해야 ag grid에서 해당 모듈을 사용 할 수 있음.

• 사용자 정의모듈또한 등록가능함.