New to Kendo UI for Vue? Start a free 30-day trial

Style the filtered columns in the Kendo UI for Vue Native Grid.


Product Version3.6.3
ProductProgress® Kendo UI for Vue Native


This Knowledge base(KB) article demonstrates how we can customize the template of a specific locked Native Grid column by defining a custom cell template.

KB sections

Solution description

This Knowledge Base(KB) article shows how you can apply a custom CSS style to the headers of the filtered columns inside the Native Grid. To achieve the desired scenario, the Grid columns are defined as a computed property as follows:

columns: function () {
    const columns = [
            field: 'ProductID',
            filterable: false,
            title: 'Product ID',
            width: '50px',
        { field: 'ProductName', title: 'Product Name' },
        { field: 'FirstOrderedOn', filter: 'date', title: 'First Ordered On' },
        { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
        { field: 'Discontinued', filter: 'boolean', title: 'Discontinued' },
    ].map((col) => {
        return this.isFiltered(col)
            ? {
                headerClassName: 'filtered',
            : col;
    return columns;

The above definition adds the filtered CSS class to the header of the filtered columns, based on the result of the following isFiltered method:

isFiltered(col) {
    const filters = this.filter ? this.filter.filters : [];
    return filters.findIndex((f) => f.field === col.field) >= 0;

The styles that will be applied to the Grid's header are defined in the following class:

.filtered {
    background-color: red;

Runnable example

View Source
Change Theme:

In this article

Not finding the help you need?