Search

Vue Data GridTheming: Customising Headers

Style grid header cells and column groups.

TODO: content due in AG-13129

This page is a copy of the v32 theme docs, and needs updating for the Theming API.

The grid exposes many CSS variables starting --ag-header-* for customising header appearance, and when these are not enough you can use CSS classes, in particular ag-header, ag-header-cell, and ag-header-group-cell:

.ag-theme-quartz {
    --ag-header-height: 30px;
    --ag-header-foreground-color: white;
    --ag-header-background-color: black;
    --ag-header-cell-hover-background-color: rgb(80, 40, 140);
    --ag-header-cell-moving-background-color: rgb(80, 40, 140);
}
.ag-theme-quartz .ag-header {
    font-family: cursive;
}
.ag-theme-quartz .ag-header-group-cell {
    font-weight: normal;
    font-size: 22px;
}
.ag-theme-quartz .ag-header-cell {
    font-size: 18px;
}

Header Column Separators and Resize Handles

Header Column Separators appear between every column, whereas Resize Handles only appear on resizeable columns (Group 1 in the example below).

.ag-theme-quartz {
    --ag-header-column-separator-display: block;
    --ag-header-column-separator-height: 100%;
    --ag-header-column-separator-width: 2px;
    --ag-header-column-separator-color: purple;

    --ag-header-column-resize-handle-display: block;
    --ag-header-column-resize-handle-height: 25%;
    --ag-header-column-resize-handle-width: 5px;
    --ag-header-column-resize-handle-color: orange;
}

Style Header on Filter

Each time a Column Filter is applied to a column, the CSS class ag-header-cell-filtered is added to the header. This can be used for adding style to headers that are filtered.

The example below adds some styling to ag-header-cell-filtered, so when you filter a column you will notice the column header change.

Styling the First and Last Columns

It's possible to style the all first and last column header (Grouped, Non-Grouped and Floating Filters) using CSS by targeting the .ag-column-first and .ag-column-last selectors as follows:

.ag-header-group-cell.ag-column-first {
    background-color: #2244CC66;
    color: white;
}
.ag-header-cell.ag-column-first {
    background-color: #2244CC44;
    color: white;
}
.ag-floating-filter.ag-column-first {
    background-color: #2244CC22;
}

.ag-header-group-cell.ag-column-last {
    background-color: #33CC3366;
}
.ag-header-cell.ag-column-last {
    background-color: #33CC3344;
}
.ag-floating-filter.ag-column-last {
    background-color: #33CC3322;
}

Full List of Header Variables

--ag-header-foreground-color
CSS color (e.g. `red` or `#fff`)
Colour of text and icons in the header
--ag-header-background-color
CSS color (e.g. `red` or `#fff`)
Background colour for all headers, including the grid header, panels etc
--ag-header-cell-hover-background-color
CSS color (e.g. `red` or `#fff`)
Rollover colour for header cells. If you set this variable and have enabled column reordering by dragging, you may want to set --ag-header-cell-moving-background-color to ensure that the rollover colour remains in place during dragging.
--ag-header-cell-moving-background-color
CSS color (e.g. `red` or `#fff`)
Colour applied to header cells when the column is being dragged to a new position
--ag-header-height
CSS length (e.g. `0`, `4px` or `50%`)
Height of header rows
--ag-header-column-separator-display
CSS display value - `block` to show or `none` to hide
Whether to display the header column separator - a vertical line that displays between every header cell
--ag-header-column-separator-height
CSS length (e.g. `0`, `4px` or `50%`)
Height of the header column separator. Percentage values are relative to the header height.
--ag-header-column-separator-width
CSS length (e.g. `0`, `4px` or `50%`)
Width of the header column separator
--ag-header-column-separator-color
CSS color (e.g. `red` or `#fff`)
Colour of the header column separator
--ag-header-column-resize-handle-display
CSS display value - `block` to show or `none` to hide
Whether to show the header column resize handle - a vertical line that displays only between resizeable header columns, indicating where to drag in order to resize the column.
--ag-header-column-resize-handle-height
CSS length (e.g. `0`, `4px` or `50%`)
Height of the header resize handle. Percentage values are relative to the header height.
--ag-header-column-resize-handle-width
CSS length (e.g. `0`, `4px` or `50%`)
Width of the header resize handle.
--ag-header-column-resize-handle-color
CSS color (e.g. `red` or `#fff`)
Colour of the header resize handle