AG GRID 기본 사용법

AG GRID란?

• 고성능 데이터 그리드 라이브러리 다양한 플랫폼 및 프레임워크를 지원함(React, Angular, Vue, JS, TS...)

설치

• ag-grid-community는 코어로직이고, ag-grid-react는 React 렌더링 엔진이다. => React에서 두가지 패키지가 필요하고, 두 버전이 무조건 일치해야함 !!

• ag-grid-enterprise 를 사용할때에도 마찬가지(엔터프라이즈 기능만 들어있음) 위에 두가지 패키지 설치 + 버전일치확인

"dependencies": {
    "ag-grid-community": "30.2.0",
    "ag-grid-react": "30.2.0",
    "ag-grid-enterprise": "30.2.0",
    ...

공식문서 기본적인 사용법

import React, { useState, useRef, useEffect, useMemo, useCallback} from 'react';
import { createRoot } from 'react-dom/client';
import { AgGridReact } from 'ag-grid-react'; // the AG Grid React Component

import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS, always needed
import 'ag-grid-community/styles/ag-theme-alpine.css'; // Optional theme CSS

const App = () => {

  const gridRef = useRef(); // Optional - for accessing Grid's API
  const [rowData, setRowData] = useState(); // Set rowData to Array of Objects, one Object per Row

  // Each Column Definition results in one Column.
  const [columnDefs, setColumnDefs] = useState([
    {field: 'make', filter: true},
    {field: 'model', filter: true},
    {field: 'price'}
  ]);

  // DefaultColDef sets props common to all Columns
  const defaultColDef = useMemo( ()=> ({
      sortable: true
    }));

  // Example of consuming Grid Event
  const cellClickedListener = useCallback( event => {
    console.log('cellClicked', event);
  }, []);

  // Example load data from server
  useEffect(() => {
    fetch('https://www.ag-grid.com/example-assets/row-data.json')
    .then(result => result.json())
    .then(rowData => setRowData(rowData))
  }, []);

  // Example using Grid's API
  const buttonListener = useCallback( e => {
    gridRef.current.api.deselectAll();
  }, []);

  return (
    <div>

      {/* Example using Grid's API */}
      <button onClick={buttonListener}>Push Me</button>

      {/* On div wrapping Grid a) specify theme CSS Class Class and b) sets Grid size */}
      <div className="ag-theme-alpine" style={{width: 500, height: 500}}>

        <AgGridReact
            ref={gridRef} // Ref for accessing Grid's API

            rowData={rowData} // Row Data for Rows

            columnDefs={columnDefs} // Column Defs for Columns
            defaultColDef={defaultColDef} // Default Column Properties

            animateRows={true} // Optional - set to 'true' to have rows animate when sorted
            rowSelection='multiple' // Options - allows click selection of rows

            onCellClicked={cellClickedListener} // Optional - registering for Grid Event
            />
      </div>
    </div>
  );
};

export default App;

Grid CSS and Themes

• 2가지의 css 파일존재함
• ag-grid.css는 사용하는 쪽에서 무조건 import 해야함. 없다면 동작안함
• ag-theme-alpine.css 은 optional임 theme css!! theme을 적용하는거군

<!--grid container를 감싸는 태그요소에 class를 주는 과정을 통해 적용함-->
<div className="ag-theme-alpine" style={{width: 500, height: 500}}>

Row Data, Column Definitions

• columnDefs라는 속성은 행들의 속성 label을 정해주는 prop임.

• defaultColDef에서 정의한 속성값들을 덮어 쓸 수 있음.

• rowData는 속성에 맞는 열들의 데이터값들을 넣어주는 속성임.

• 만약 columnDefs에 해당하는 속성이 rowData에 없으면 값이 비어있고, type이 동일하지 않는다면 invalid data로 들어가게됨.

• 여기서 headerName은 UI에 표시되는 속성이름을 나타내고, field는 해당 고유값을 나타냄.

• field는 rowData 프로퍼티 name과 mapping됨.

  const [columnDefs, setColumnDefs] = useState([
    { headerName: "만들래 ", field: "make", filter: true },
    { field: "model", filter: true },
    { field: "price" },
  ]);

defaultColDef

• defaultColDef는 그리드 모든열에 공통적으로 적용되는 기본설정을 정의 할 수 있음.(열에 대한 스타일,너비 편집, 정렬...등등여부)

const gridOptions = {
  // 다른 그리드 옵션들...
  defaultColDef: {
    // 기본적으로 모든 열에 적용되는 속성을 정의합니다.
    sortable: true, // 열 정렬 허용
    filter: true,   // 열 필터링 허용
    resizable: true, // 열 크기 조절 허용
    width: 150,      // 열의 기본 너비
  },
};

Grid Api 접근하기

const gridRef = useRef(); // Optional - for accessing Grid's API
// Example using Grid's API
const buttonListener = useCallback( e => {
    gridRef.current.api.deselectAll();
}, []);

<AgGridReact
    ref={gridRef} // Ref for accessing Grid's API
    />

https://www.ag-grid.com/react-data-grid/grid-api/

• Grid API의 모든 메소드들은 GridOptions의 api 프로퍼티를 통해 접근 가능하다.

• gridRef.current 객체는 다음과 같다.

on[eventName] 프로퍼티

• 그리드에서 발생하는 이벤트에 대한 핸들러를 설정 할 수 있음.

• ex) onCellClicked 속성은 셀이 클릭되었을 때 발생하는 이벤트를 넣어줌.

<AgGridReact
    onCellClicked={cellClickedListener} // Optional - registering for Grid Event
    ...
/>

Rendering에 관하여

• AG Grid는 리액트 렌더링엔진을 통해 렌더링됨 => 리액트 컴포넌트 처럼 작동함.

• RowData, ColumnData가 변하면 Grid의 즉각적인 렌더링이 일어남 !!

• Row Data를 설정할때는 useState or useMemo를 함께 사용할 것.(그냥 객체배열 형태로 넣지 말라는 의미임)

• sideBar, statusBar와 같은 다른 속성들을 만들때도 마찬가지임

const App = () => {
    // do NOT do this, will result in extra Grid processing
    const columnDefs = [
        {field: 'make'},
        {field: 'model'},
    ];

    return <AgGridReact columnDefs={columnDefs} />;
};

const App = () => {

    // GOOD - only one instance created
    const sideBar = useMemo( ()=> {
        toolPanels: ['filters','columns']
    }, []);

    // BAD - each render could re-create the Status Bar in the grid
    const statusBar = {
        statusPanels: [ 
            { statusPanel: 'agTotalAndFilteredRowCountComponent' }
        ]
    };

    return (
        <AgGridReact sideBar={sideBar} statusBar={statusBar} />
    );
};

ref) https://www.ag-grid.com/react-data-grid/getting-started/