LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Getting Started with AG Grid

Goals

  • Learn how to install AG Grid.
  • Learn how to define columns in AG Grid.
  • Learn how to define a column's sorting behavior.
  • Learn how to define a column's filtering behavior.
  • Learn how to define a column's dragging behavior.
  • Learn how to define a column's pinning behavior.
  • Learn how to define a column's spanning behavior.

Installing

To get started, install the ag-grid-react module.

npm install --save ag-grid-react

Styling with a Theme

Import the necessary base and theme CSS files.

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

Column Definition

Each column is defined be a ColDef object.

By default, columns are positioned in the order that matches the column definition specified.

First, we bind the columnDefs prop:

export default function Grid() {
  return (
    <div className="ag-theme-quartz-auto-dark">
      <AgGridReact columnDefs={columnDefs}></AgGridReact>
    </div>
  );
}

Next, we define the column definition:

interface RowData {
  name: string;
  color: string;
}

export default function Grid() {
  const [columnDefs, setColumnDefs] = useState<ColDef<RowData>[]>([
    { headerName: 'Name', field: 'name' },
    { headerName: 'Color', field: 'color' },
  ]);

  return (
    <div className="ag-theme-quartz-auto-dark">
      <AgGridReact columnDefs={columnDefs}></AgGridReact>
    </div>
  );
}

In the simplest form, a column definition specifies:

  • The headerName to be displayed as the column header
  • The field of the row object to get the data from. This can also accept a deep reference within the rowData object using dot-notation, e.g. user.account.firstName