ag-Grid-React 라이브러리의 option

 

 

ag-grid-react는 React에서 강력한 데이터 그리드를 사용할 수 있게 해주는 라이브러리입니다. AgGridReact 컴포넌트를 사용하여 테이블을 만들고 다양한 기능을 쉽게 적용할 수 있습니다.

✅ 기본 사용 예시

import React, { useState } 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";

const MyGrid = () => {
  const [rowData] = useState([
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 },
  ]);

  const [columnDefs] = useState([
    { field: "make" },
    { field: "model" },
    { field: "price" },
  ]);

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

 

 

---

🧩 다양한 기능 적용 예시

<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  defaultColDef={{
    sortable: true,
    filter: true,
    resizable: true,
  }}
  pagination={true}
  paginationPageSize={10}
  rowSelection="multiple"
  animateRows={true}
  onRowClicked={(e) => console.log(e.data)}
/>