AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting Started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
AI ToolkitMCP ServerSkills
Layout & Styling
Design SystemGrid Layout
Charting
Core Features
Advanced Features

Angular Data GridAuto-Generate Columns

Version 36.2.0

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' },
]

Row data keys containing dots (e.g. "user.name") are treated as nested paths by default. Set suppressFieldDotNotation to true to treat dotted keys as literal field names. See Accessing Row Data Values for details.

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:

Properties available on the AutoGenerateColumnDefsOptions interface.

objectValuesCopy Link
'group' | 'flatten' | 'skip'
default: 'group'
How to handle plain-object values. 'group' recurses into the object and creates a column group, 'flatten' recurses and creates flat leaf columns using dotted field paths, 'skip' ignores the field entirely.
arrayValuesCopy Link
'primitives' | 'include' | 'skip'
default: 'primitives'
How to handle array values. 'primitives' creates a leaf column only when the first element is a primitive value, 'include' creates a leaf column for all arrays, 'skip' ignores them.
nullishValuesCopy Link
'include' | 'skip'
default: 'include'
How to handle null and undefined values. 'include' creates a leaf column, 'skip' ignores them.

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.

Updating data via transactions (applyTransaction / applyTransactionAsync) does not trigger column generation.

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