Overview

import AgGrid from "@components/ag-grid/AgGrid";

Description

The AgGrid component contains the AgGridReact and it used to centralize the setup and the style in one component. It has the same props as AgGridReact.

To use the enterprise version of AgGridReact , you need to run this script to create an environment file under the React project root that contains the key. (Replace Key_Value by the correct value)

if (!(Test-Path .env)) { "REACT_APP_AG_GRID_KEY=Key_Value" | Out-File -Encoding utf8 .env }

Usage Example

import AgGrid from "@components/ag-grid/AgGrid";

function MyComponent() {
  const data = [
    {
      id:1,
      name: "Bob",
    },
    {
      id:2,
      name: "Jane",
    },
    {
      id:3
      name: "Fred",
    },
  ];
 const [colDefs, setColDefs] = useState([
    {
      field: "id",
      headerName: "ID",
    },
    {
      field: "name",
      headerName: "Name",
    }
  ]);
   const defaultColDef = useMemo(() => {
    return {
      flex: 1,
      minWidth: 120,
      filter: true,
      filterParams: {
        buttons: ["reset", "apply"],
        closeOnApply: true,
      },
    };
  }, []);

    return (
        <div style={{ height: 520 }}>
                <AgGrid
                rowModelType="clientSide"
                paginationPageSize={10}
                paginationPageSizeSelector={[10, 20]}
                columnDefs={colDefs}
                defaultColDef={defaultColDef}
                pagination={true}
                rowData={data}
                />
        </div>
  );
}