Search

React Data GridTheming: Customising Headers

Style grid header cells and column groups.

The grid exposes many theme parameters starting header* for customising header appearance:

const myTheme = themeQuartz.withParams({
    headerHeight: '30px',
    headerTextColor: 'white',
    headerBackgroundColor: 'black',
    headerCellHoverBackgroundColor: 'rgba(80, 40, 140, 0.66)',
    headerCellMovingBackgroundColor: 'rgb(80, 40, 140)',
});

For a full list of relevant parameters, search "header" in the "All Parameters" section of the Theme Builder or use typescript autocompletion in your IDE.

When the theme parameters 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 {
    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 Borders and Resize Handles

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

const myTheme = themeQuartz.withParams({
    headerColumnBorder: { color: 'purple' },
    headerColumnBorderHeight: '80%',

    headerColumnResizeHandleColor: 'orange',
    headerColumnResizeHandleHeight: '25%',
    headerColumnResizeHandleWidth: '5px',
});

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; /* bluest */
}
.ag-header-cell.ag-column-first {
    background-color: #2244CC44; /* bluer */
}
.ag-floating-filter.ag-column-first {
    background-color: #2244CC22; /* blue */
}

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