Style grid header cells and column groups.
The grid exposes many CSS variables starting --ag-header-*
for customizing header appearance, and when these are not
enough you can use CSS classes, in particular ag-header
, ag-header-cell
, and <code>
ag‑header‑group‑cell<code>:
.ag-theme-alpine {
--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-alpine .ag-header {
font-family: cursive;
}
.ag-theme-alpine .ag-header-group-cell {
font-weight: normal;
font-size: 22px;
}
.ag-theme-alpine .ag-header-cell {
font-size: 18px;
}
The above code would apply to every grid with the ag-theme-alpine
. In this example, we also add a .headers1
class so
that it will only apply to this example.
Header Column Separators appear between every column, whereas Resize Handles only appear on resizeable columns (Group 1
in the example below).
ag-theme-alpine {
--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;
}
The above code would apply to every grid with the ag-theme-alpine
. In this example, we also add a .headers2
class so
that it will only apply to this example.
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.
.ag-header-cell-filtered {
background-color: #1b6d85 !important;
color: #fff !important;
}
.ag-header-cell-filtered span {
color: #fff !important;
}
The above code would apply to every grid with the ag-theme-alpine
. In this example, we also add
a <code>.header‑style‑on‑filter<code> class so that it will only apply to this example.
CSS Variable | Description |
---|---|
<p>--ag-header-foreground-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
Color of text and icons in the header. |
<p>--ag-header-background-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
Background color for all headers, including the grid header, panels, etc. |
<p>--ag-header-cell-hover-background-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
<p>Rollover color 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 color remains in place during dragging.<p> |
<p><code>‑‑ag‑header‑cell‑moving‑background‑color<code><p><p>CSS color - like ‘red’ or ‘#fff’<p> | Color applied to header cells when the column is being dragged to a new position. |
<p>--ag-header-height <p><p>CSS length - like ‘0’, ‘4px’ or ‘50%’<p> |
Height of header rows. |
<p>--ag-header-column-separator-display <p><p>CSS display value - ‘block’ to show or ‘none’ to hide<p> |
Whether to display the header column separator - a vertical line that displays between every header cell. |
<p>--ag-header-column-separator-height <p><p>CSS length - like ‘0’, ‘4px’ or ‘50%’<p> |
Height of the header column separator. Percentage values are relative to the header height. |
<p>--ag-header-column-separator-width <p><p>CSS length - like ‘0’, ‘4px’ or ‘50%’<p> |
Width of the header column separator. |
<p>--ag-header-column-separator-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
Colour of the header column separator. |
<p>--ag-header-column-resize-handle-display <p><p>CSS display value - ‘block’ to show or ‘none’ to hide<p> |
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. |
<p>--ag-header-column-resize-handle-height <p><p>CSS length - like ‘0’, ‘4px’ or ‘50%’<p> |
Height of the header resize handle. Percentage values are relative to the header height. |
<p>--ag-header-column-resize-handle-width <p><p>CCSS length - like ‘0’, ‘4px’ or ‘50%’<p> |
Width of the header resize handle. |
<p>--ag-header-column-resize-handle-color <p><p>CSS color - like ‘red’ or ‘#fff’<p> |
Colour of the header resize handle. |