Styling the Filter Icon When it is Active in React

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 applied by the grid when a filter is active on that column.

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

FlexGrid’s formatItem event lets you inspect every 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.

import { FlexGrid } from '@mescius/wijmo.react.grid';
import { FlexGridFilter } from '@mescius/wijmo.react.grid.filter';
import * as wjcCore from '@mescius/wijmo';

function App() {
  // Example data
  const data = getData();

  // Event handler to customize header rendering
  const formatItem = (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 = '';
      }
    }
  };

  return (
    <>
      <FlexGrid itemsSource={data} formatItem={formatItem}>
        <FlexGridFilter />
      </FlexGrid>
    </>
  );
}

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

• The formatItem prop receives each cell as it’s rendered.
• If the header cell has the .wj-filter-on class (i.e., the column is filtered), we assign a custom class (filtered-col) to that column, which you can style with CSS.

With this React setup:

• The filter icon changes appearance when a filter is active.
• The header cell of the filtered column can be styled separately.
• These visual cues help users quickly identify which columns have active filters applied.

Happy coding!