Styling the Grid Column Headers When Filtering is Applied

Environment

Description

How can I style the headers of a Grid column when filtering is applied?

Solution

When the grid is filtered, the k-active class is applied to the filter menu. Use CSS nesting to style the header of the filtered column:

Copy Code.k-header:has(.k-active) {
    background-color: #FFF0F5;
    
    .k-column-title {
        color: #191970;
    }
}

The following example demonstrates the suggested approach.

See Also

Styling the Angular Data Grid Columns