React Data GridAuto-Generate Columns

Column definitions can be generated automatically from rowData, without defining them upfront. This is useful when working with dynamic or unknown data shapes.

Set autoGenerateColumnDefs to true and the grid scans rowData for the first non-null row, then creates a column for each of its keys:

const gridOptions = {
    autoGenerateColumnDefs: true,
    rowData: myData,
};

Column Generation Copy Link

The grid scans rowData for the first non-null row and creates columns based on value types:

• Primitive values (strings, numbers, booleans, bigints, Date instances) — a leaf column.
• Plain objects — a column group by default, with nested keys recursed into. The headerName is derived from the key name.
• Arrays — a leaf column if the first element is a primitive value; skipped if the array is empty or contains objects. Arrays render as a comma-separated string.
• null/undefined values — a leaf column by default.
• Functions — skipped.

For example, given this row data:

rowData: [
    { user: { name: 'Alice', age: 30 }, score: 100 },
]

The generated column definitions are:

columnDefs: [
    {
        headerName: 'User',
        children: [
            { field: 'user.name', headerName: 'Name' },
            { field: 'user.age', headerName: 'Age' },
        ],
    },
    { field: 'score' },
]

Column groups are only produced when the value for a key in the first scanned row is a non-empty plain object, with the default objectValues: 'group'. Arrays, primitives, dates, class instances and empty objects all yield leaf columns or are skipped. Ensure rowData has the nested structure you expect before relying on generated group headers.

Configuration Copy Link

Pass an AutoGenerateColumnDefsOptions object instead of true to control how each value type is handled. The example below lets you toggle each option to see how it affects the generated columns:

Setting objectValues to 'flatten' produces top-level columns with dotted field paths instead of nested groups:

// Row data: { name: 'Alice', address: { city: 'London' } }
// With objectValues: 'flatten':
columnDefs: [
    { field: 'name' },
    { field: 'address.city', headerName: 'City' },
]

Updating Row Data Copy Link

Columns are regenerated each time rowData is set. Only the keys from the first non-null row are used, so columns update when the data shape changes.

By default, column order matches the key order of that first row. Set maintainColumnOrder to true to preserve existing column positions when the data shape changes:

const gridOptions = {
    autoGenerateColumnDefs: true,
    maintainColumnOrder: true,
};

See Maintain Column Order for details.

Setting rowData to [] clears both the rows and the column definitions.

Customising Generated Columns Copy Link

Default Column Definitions apply to auto-generated columns the same way as manually defined ones. This is the simplest way to set common properties like filtering or resizing.

For per-column customisation, use the processAutoGeneratedColumnDefs callback to modify, reorder, or replace columns before they are applied. The callback receives params.columnDefs (which may include ColGroupDef entries when row data contains nested objects) and params.rowData, and returns the final (ColDef | ColGroupDef)[].

Use forEachColDef to mutate leaf column properties without having to handle group recursion yourself:

import { forEachColDef } from 'ag-grid-community';

const gridOptions = {
    autoGenerateColumnDefs: true,
    rowData: myData,
    processAutoGeneratedColumnDefs: ({ columnDefs }) => {
        forEachColDef(columnDefs, (colDef) => {
            colDef.hide = colDef.field === 'internalId';
        });
        // Add a custom column
        columnDefs.push({ headerName: 'Actions', cellRenderer: ActionsRenderer });
        return columnDefs;
    },
};

The example below uses Column Types to apply a currencyColumn type to any column whose field contains "profit":

File Drop Overlay Copy Link

When autoGenerateColumnDefs is enabled and no rowData is present, a file drop overlay is shown automatically when processFileInput is provided. Files can be dragged onto the overlay or selected via a browse button. See Overlays for more on grid overlays.

Provide a processFileInput callback. The params object contains the selected files array along with success and fail callbacks. Call success(rowData) to load the parsed data into the grid, or fail(message) to display an error in the overlay using the fileInputProcessingFailed locale.

params.files contains every file the user dropped or selected. The example below processes the first file only; iterate over params.files to handle multiple files.

const gridOptions = {
    autoGenerateColumnDefs: true,
    processFileInput: (params) => {
        const file = params.files[0];
        const reader = new FileReader();
        reader.onload = (e) => {
            try {
                const rowData = parseCsv(e.target.result);
                params.success(rowData);
            } catch {
                params.fail('Failed to parse file');
            }
        };
        reader.readAsText(file);
    },
};

The example below auto-generates columns from various data sources. Files can be dragged onto the overlay, selected via the browse button, or loaded from the sample data dropdown. The toolbar Upload File button re-shows the overlay by setting activeOverlay to 'agFileInputOverlay'.