[React] ag-grid 사용법

Ag-Grid 및 관련 라이브러리 설치

npm install --save ag-grid-community ag-grid-react

 

---

Ag-Grid 컴포넌트 생성

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

function MyGridComponent() {
    const columnDefs = [
        { headerName: 'ID', field: 'id' },
        { headerName: 'Name', field: 'name' },
        // 추가 열 정의...
    ];
    
    const rowData = [
        { id: 1, name: 'John' },
        { id: 2, name: 'Alice' },
        // 데이터 추가...
    ];

    return (
        <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
            <AgGridReact
                columnDefs={columnDefs}
                rowData={rowData}
            />
        </div>
    );
}

export default MyGridComponent;

 

---

Ag-Grid의 옵션 및 이벤트 처리

 

onRowClicked 예시

function MyGridComponent() {
    const columnDefs = [
        { headerName: 'ID', field: 'id' },
        { headerName: 'Name', field: 'name' },
        // 추가 열 정의...
    ];

    const rowData = [
        { id: 1, name: 'John' },
        { id: 2, name: 'Alice' },
        // 데이터 추가...
    ];

    const handleRowClicked = (event) => {
        console.log('클릭된 행 데이터:', event.data);
    };

    return (
        <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
            <AgGridReact
                columnDefs={columnDefs}
                rowData={rowData}
                onRowClicked={handleRowClicked}
            />
        </div>
    );
}