Filtering data

Filtering allows the user to manipulate and view the data most important to them.

Overview

Actions

Table rows selected

When a user selects one or more table rows, selected row-level actions (such as edit and/or delete) may appear. These actions are optional. The number of selected items also appears. This is required.

Filters applied

When filters are applied, an additional row containing chips and a “Clear all” button is visible below the top row. Each filter chip is an interactive chip that indicates when a filter is applied. Filter chips only appear when a filter is applied using the “more filters” icon button. Filters can be removed individually either from the nested dropdown menu or by clicking to remove on the filter chip itself. Clicking “clear all” button removes all filters applied with the more filters filter button. This also deselects all filters from the nested dropdown menu.

The filters overflow chip shows the number of additional filters. It is meant to help reduce visual clutter when there are many filters - this chip appears if more than three filters are applied. Clicking this chip expands the filter chips list.

Responsiveness

When limited space is available (often on a small screen size) quick filters are pulled into the filter button nested dropdown menu. Quick filters in the menu show above other filters in the menu.