LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Column Definition

Goals

  • 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.

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-alpine">
      <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-alpine">
      <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

Better TypeScript support in version 28+

Further, note we have specified the RowData interface for the TData generic type when using the ColDef interface.

This was recently introduced in version 28, and enables better type checking. 🎉