React Data GridColumn Definitions

Each column in the grid is defined using a Column Definition (ColDef). Columns are positioned in the grid according to the order the Column Definitions are specified in the Grid Options.

const [columnDefs, setColumnDefs] = useState([
    { field: 'athlete' },
    { field: 'sport' },
    { field: 'age' }
]);

<AgGridReact columnDefs={columnDefs} />

See Column Options for all available properties.

Column Defaults

Use defaultColDef to set properties across ALL Columns.

const defaultColDef = useMemo(() => { 
	return {
        width: 150,
        cellStyle: { fontWeight: 'bold' },
    };
}, []);

<AgGridReact defaultColDef={defaultColDef} />

Column Types

Use columnTypes to define a set of Column properties to be applied together. The properties in a column type are applied to a Column by setting its type property.

// Define column types
const columnTypes = useMemo(() => { 
	return {
        currency: { 
            width: 150,
            valueFormatter: CurrencyFormatter
        },
        shaded: {
            cellClass: 'shaded-class'
        }
    };
}, []);

const [columnDefs, setColumnDefs] = useState([
    { field: 'productName'},

    // uses properties from currency type
    { field: 'boughtPrice', type: 'currency'},

    // uses properties from currency AND shaded types
    { field: 'soldPrice', type: ['currency', 'shaded'] },
]);

<AgGridReact
    columnTypes={columnTypes}
    columnDefs={columnDefs}
/>

The below example shows Column Types.

Provided Column Types

The grid provides the Column Types rightAligned and numericColumn. Both of these types right align the header and cell contents by applying CSS classes ag-right-aligned-header to Column Headers and ag-right-aligned-cell to Cells.

const [columnDefs, setColumnDefs] = useState([
    { headerName: 'Column A', field: 'a' },
    { headerName: 'Column B', field: 'b', type: 'rightAligned' },
    { headerName: 'Column C', field: 'c', type: 'numericColumn' },
]);

<AgGridReact columnDefs={columnDefs} />

Updating Columns

Columns can be controlled by updating the column state, or updating the column definition.

Column State should be used when restoring a users grid, for example saving and restoring column widths.

Column Definitions should be updated to modify properties that the user cannot control, and as such are not supported by Column State. Whilst column definitions can be used to change stateful properties, this can cause additional side effects.

Using Column State

The Grid Api function applyColumnState can be used to update Column State.

// Sort Athlete column ascending
gridApi.applyColumnState({
    state: [
        {
            colId: 'athlete',
            sort: 'asc'
        }
    ]
});

In the example below, use the 'Sort Athlete' button to apply a column state.

Updating Column Definitions

To update an attribute by Updating Column Definitions, pass a new array of Column Definitions to the grid options.

// Supply new column definitions to the grid
setColumnDefs([
  { field: 'athlete', headerName: 'C1' },
  { field: 'age', headerName: 'C2' },
  { field: 'country', headerName: 'C3' },
  { field: 'sport', headerName: 'C4' },
]);

In the example below, use the 'Update Header Names' button to update the column definitions.