Grid Advanced Filter

Use the Grid Advanced Filter to specify advanced filtering criteria spanning over multiple Grid columns via a dedicated dialog shown over the Grid. The Grid Advanced Filter is visually identical to Ignite UI for Angular Grid Advanced Filtering Feature

Grid Advanced Filter Demo

Advanced Filter Feature

The Grid has three Advanced Filtering symbols under Features, one for each Display Density, that represent the overlay shown over the Grid. In Figma you can switch between the different display densities via the dedicated property in the properties panel. In Adobe XD you can switch between display densities through the Component States.

Filter Expression State

The Advanced Filter feature comes with an Empty Filter Expression by default that can be changed to Applied Filter if necessary. In Sketch, this is achieved with Symbol Overrides, while in Adobe XD we are using the Component States paradigm to let you easily switch between states. Once this is set up, you may customize it further by specifying desired filtering criteria. In Figma, to change the default empty state you need to find the Filter Expression State component in the layers panel and switch the property of the component from Empty Filter to Applied Filter.

The Grid Advanced Filter is achieved by adding a Toolbar with an Advanced Filter action that enables the feature for the whole grid.

Grid Advanced Filter