Ag-grid 라이브러리란?

Ag-grid 라이브러리는

웹 애플리케이션에서 사용하는 고성능 데이터 그리드 라이브러리

입니다. 수십만건의 데이터도 부드럽게 처리할 수 있다는 것이 Ag-grid의 가장 큰 특징이라고 할 수 있습니다.

기본 개념 정리

• rowData : 그리드에 표시할 데이터 배열
• columnDefs : 각 컬럼의 설정 (헤더명, 필드명, 너비 등)
• defaultColDef : 모든 컬럼에 공통 적용할 기본 설정

가장 간단한 형태의 aggrid는 다음과 같습니다.

TSX
1import { AgGridReact } from 'ag-grid-react';
2import 'ag-grid-community/styles/ag-grid.css';
3import 'ag-grid-community/styles/ag-theme-alpine.css';
4
5const MyGrid = () => {
6  const rowData = [
7    { name: '홍길동', age: 30, city: '서울' },
8    { name: '김철수', age: 25, city: '부산' },
9  ];
10
11  const columnDefs = [
12    { field: 'name', headerName: '이름' },
13    { field: 'age', headerName: '나이' },
14    { field: 'city', headerName: '도시' },
15  ];
16
17  return (
18    <div className="ag-theme-alpine" style={{ height: 400 }}>
19      <AgGridReact rowData={rowData} columnDefs={columnDefs} />
20    </div>
21  );
22};

주요 기능들

정렬 & 필터

defaultColDef에 한 번만 설정하면 모든 컬럼에 적용되는 정렬 & 필터 조건입니다.

TSX
1const defaultColDef = {
2  sortable: true,   // 컬럼 헤더 클릭으로 정렬
3  filter: true,     // 기본 텍스트 필터 활성화
4  resizable: true,  // 컬럼 너비 조절
5};
6
7<AgGridReact
8  rowData={rowData}
9  columnDefs={columnDefs}
10  defaultColDef={defaultColDef}
11/>

행 선택

TSX
1<AgGridReact
2  rowSelection="multiple"  // 'single' 또는 'multiple'
3  onSelectionChanged={(e) => {
4    const selectedRows = e.api.getSelectedRows();
5    console.log(selectedRows);
6  }}
7/>

커스텀 셀 렌더러

셀 안에 커스텀 UI를 넣을때 사용합니다.

TSX
1const StatusRenderer = ({ value }) => {
2  const color = value === '완료' ? 'green' : 'orange';
3  return <span style={{ color }}>{value}</span>;
4};
5
6const columnDefs = [
7  { field: 'status', cellRenderer: StatusRenderer },
8];