React Data Grid

Column Definitions

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

<AgGridReact columnDefs={columnDefs} />

See Column Properties 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}
/>

Column Types work on Columns only and not Column Groups.

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 cells 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} />

Column IDs

Each column generated by the grid is given a unique Column ID, which is used in parts of the Grid API.

If you are using the API and the column IDs are a little complex (e.g. if two columns have the same field, or if you are using valueGetter instead of field) then it is useful to understand how column IDs are generated.

If the user provides colId in the column definition, then this is used, otherwise the field is used. If both colId and field exist then colId gets preference. If neither colId nor field exists then a number is assigned. Finally, the ID is ensured to be unique by appending '_n' if necessary, where n is the first positive number that allows uniqueness.

In the example below, columns are set up to demonstrate the different ways IDs are generated. Open the example in a new tab and observe the output in the dev console. Note the following:

  • Col 1 and Col 2 both use colId. The grid appends '_1' to Col 2 to make the ID unique.
  • Col 3 and Col 4 both use field. The grid appends '_1' to Col 4 to make the ID unique.
  • Col 5 and Col 6 have neither colId or field so the grid generates column IDs.