React Data GridColumn Headers

Each Column has a Column Header providing a Header Name and typically functions such as Column Resize, Row Sorting and Row Filtering.

Header Name Copy Link

When no header name is provided, the grid will derive the header name from the provided field. The grid expects the field value to use camelCase and will convert it to Title Case (e.g. firstName becomes First Name). Alternatively, you can provide your own header name using the headerName property of the ColDef.

const [columnDefs, setColumnDefs] = useState([
    // header name will be 'Athlete'
    { field: 'athlete' },
    // header name will be 'First Name'
    { field: 'firstName' },
    // header name will be 'foo'
    { headerName: 'foo', field: 'bar' }
]);

<AgGridReact columnDefs={columnDefs} />

Header Value Getters Copy Link

Use headerValueGetter instead of colDef.headerName to provide column header names dynamically.

The parameters for headerValueGetter differ from a Cell Value Getter as follows:

• Only one of column or columnGroup will be present, depending on whether it's a column or a column group.
• Parameter location allows you to have different column names depending on where the column is appearing, eg you might want to have a different name when the column is in the column drop zone or the columns tool panel.

See the Column Tool Panel Example for an example of headerValueGetter used in different locations, where you can change the header name depending on where the name appears.

Editable Header Name (e) Copy Link

Set headerNameEditable: true on a ColDef (or a ColGroupDef) to let users rename that column or column group header from the UI. This is an AG Grid Enterprise feature.

Editable columns can be renamed via:

• The Edit Column Name item in the Column Menu.
• Right-clicking the column in the Columns Tool Panel and choosing Edit Column Name.

Editable column groups can be renamed via the Edit Column Name item in the group header right-click menu or the Columns Tool Panel context menu.

The Edit Column Name item is never offered for calculated columns, even when headerNameEditable is set; rename a calculated column from its Edit Calculated Column dialog instead.

Committing an empty value sets an empty header name; the header reverts to its Column Definition default only when the edit is cleared programmatically, such as resetColumnState(). Edited column names are persisted as part of Column State and Grid State; edited group names are persisted as part of Grid State. Both survive save and restore.

Edit Modes Copy Link

Configure the editor with the columnHeaderEdit grid option.

Its applyMode controls when edits are applied:

• 'live' (default): each change is applied to the header immediately as the user types. Pressing Escape or closing the editor keeps the change.
• 'deferred': the editor shows Apply and Cancel buttons and the header is only updated when the edit is committed with Apply or Enter. Cancel, Escape, or closing the editor discards the edit.

While a header is being edited it is highlighted. Set columnHeaderEdit: { suppressColumnHighlighting: true } to turn the highlight off.

The example below has editable columns and column groups. Toggle Deferred edit mode to switch between live and deferred editing. Rename a header, then use Save State and Restore State to confirm edited names are persisted as part of Grid State, or Reset State to revert to the Column Definition defaults.

Tooltips Copy Link

Tooltips can be added to the Column Header by using either the headerTooltipValueGetter, or headerTooltip property of the ColDef.

The example below demonstrates using both headerTooltipValueGetter and headerTooltip properties to set tooltips in the grid columns.

Styling & Height Copy Link

Column Headers can be styled using CSS classes and inline styles via headerClass and headerStyle properties. Header heights can also be configured and set to adjust automatically based on content.

See Styling & Height for full documentation on:

• Header Style and Header Class
• Header Height
• Auto Header Height
• Text Orientation

Custom Header Components Copy Link

The grid provides a default Header Component with sorting, filtering and menu functionality. You can customise this using templates, inner header components, or create fully custom header components.

See Custom Header Components for full documentation on:

• Custom Template
• Inner Header Component
• Custom Component