JavaScript 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 Camel Case and will insert spaces between word breaks to build a readable header name. Alternatively, you can provide your own header name using the headerName property of the ColDef.

columnDefs: [
    // header name will be 'Athlete'
    { field: 'athlete' },
    // header name will be 'First Name'
    { field: 'firstName' },
    // header name will be 'foo'
    { headerName: 'foo', field: 'bar' }
],

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

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.

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

Next Up Copy Link

Continue to the next section: Styling & Height.