LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Default Column Definition

Default Column Definition

To avoid unnecessary repetition, we can set a default column definition.

  • Every column inherits the default column definition
  • Each column definition can override default values

Let's look at an example:

export default function Grid() {
  const defaultColDef: ColDef<RowData> = {
    sortable: true,
  };

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

Let's quickly review:

  • First, we define a new defaultColDef const that is a ColDef object.
  • Next, we bind to the defaultColDef prop on the <AgGridReact> component.

Exercise

  1. Open the exercise on Stackblitz.
  2. Define a new defaultColDef const in the component function. The defaultColDef will be an object of type ColDef<RowData>.
  3. Set the sortable property to true.
  4. Bind the defaultColDef const to the defaultColDef prop on the <AgGridReact> component.
  5. Override the sortable property to false for one of the columns.

Solution

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    { headerName: 'Name', field: 'name' },
    { headerName: 'Color', field: 'color', sortable: false },
  ]);
  const [rowData] = useState<RowData[]>(data.products);
  const defaultColDef: ColDef<RowData> = {
    sortable: true,
  };

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