Grid Row Filter

Use the Grid Row Filter to specify filtering criteria on a Grid column via a special type of Header Cell that contains Chips with the filtering conditions. The Grid Row Filter is visually identical to Ignite UI for Angular Grid Filtering Feature

Grid Row Filter Demo

Row Filter Header

In order to indicate that a Grid is filterable via a Row Filter, add a second Header row with Row Filter Header Cells for each of the columns of the Grid within the Header group.

Filter State

The Row Filter Header Cells come with a Filter State override in Sketch that lets you configure whether a filtering condition has been applied on a given column. By default, it shows Empty, but you may set it to Filtered and specify conditions via the Chip it contains. In Figma the Row Filtering is one of the Grid Header Cell types, that can be switched from the properties panel. There are two distinct types of filtering state: Row Filter Empty and Row Filter Filtered. You can easily switch between them by adjusting the Type property. In Adobe XD things are organized in a similar fashion via the Filter State layer that uses the Component States paradigm to let you easily switch between states.

Grid Row Filter

Grid Row Filter Demo

Row Filter Header

Filter State

Additional Resources