Styling the Filter Icon When it is Active in Vue

Background:

The Wijmo FlexGrid visually indicates which columns are filtered by applying special CSS classes to the filter icon and the column header cell. You can customize these styles using CSS, and you can also use the grid’s formatItem event to add a CSS class to the column when its filter is active.

Steps to Complete:

1. Style the active filter icon using the .wj-filter-on class.
2. Detect when a column’s filter is active and apply styling to the header cell.

Getting Started:

Style the active filter icon using the .wj-filter-on class

When a filter is applied to a column, FlexGrid adds a special class (.wj-filter-on) to the filter icon element. You can target that class in CSS to change the icon’s color, size, or other visual attributes.

/* Make the active filter icon orange */
.wj-flexgrid .wj-cell.wj-filter-on .wj-elem-filter {
  color: orange !important;
}

/* Optionally scale the icon larger when active */
.wj-flexgrid .wj-cell.wj-filter-on .wj-glyph-filter {
  transform: scale(1.25);
}

• .wj-filter-on is automatically applied by FlexGrid when a column filter is active.

Detect when a column’s filter is active and apply styling to the header cell

FlexGrid’s formatItem event lets you inspect each cell as it is rendered. By checking for .wj-filter-on on the header cell, you can dynamically assign a CSS class to the column, allowing you to highlight the entire header when its filter is active.

<template>
  <wj-flex-grid
    :itemsSource="data"
    :formatItem="onFormatItem"
  >
    <wj-flex-grid-filter />
  </wj-flex-grid>
</template>

<script>
import { WjFlexGrid } from '@mescius/wijmo.vue2.grid';
import { WjFlexGridFilter } from '@mescius/wijmo.vue2.grid.filter';

export default {
  components: { WjFlexGrid, WjFlexGridFilter },
  data() {
    return {
      data: getData()
    };
  },
  methods: {
    onFormatItem(s, e) {
      if (e.panel === s.columnHeaders) {
        // If the header cell has the `wj-filter-on` class,
        // mark the corresponding column as filtered
        if (e.cell.classList.contains('wj-filter-on')) {
          s.columns[e.col].cssClass = 'filtered-col';
        } else {
          s.columns[e.col].cssClass = '';
        }
      }
    }
  }
};

function getData() {
  return [
    { id: 1, country: 'USA', sales: 100 },
    { id: 2, country: 'Canada', sales: 200 },
    { id: 3, country: 'Germany', sales: 150 }
  ];
}
</script>

• The formatItem handler runs whenever a cell is rendered.
• If the header cell contains .wj-filter-on, we assign a custom class (filtered-col) to that column. This allows additional styling beyond the filter icon itself.

With this Vue setup:

• The filter icon changes appearance when a filter is active.
• The header cell of the filtered column can be styled independently (e.g., bold or colored).
• Users can easily identify which columns currently have filters applied.

Happy coding!