Style grid header cells and column groups.
This page describes the grid's legacy theming system that was the default in v32 and before, for the benefit of applications that have not yet migrated to the Theming API. These themes are deprecated and will be removed in a future major version. You may want to visit the new theming docs or check out the migration guide.
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
Colour of text and icons in the header |
Background colour for all headers, including the grid header, panels etc |
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. |
Colour applied to header cells when the column is being dragged to a new position |
Height of header rows |
Whether to display the header column separator - a vertical line that displays between every header cell |
Height of the header column separator. Percentage values are relative to the header height. |
Width of the header column separator |
Colour of the header column separator |
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. |
Height of the header resize handle. Percentage values are relative to the header height. |
Width of the header resize handle. |
Colour of the header resize handle |