Filtering enables users to view the subset of the available data as per their needs.

Filters can be placed either in the right side of the table or in the table header itself as quick filters.

Since the filters are frequently used, they are shown upfront in a panel. This panel appears on the right and cannot be closed.

Note: In this case, there is no filtering option in the table itself.

Frequently used filters in fixed section on right

In case of 3 or fewer filters, all the filters are available in the table header for quick access.

3 or fewer filters available

In case the need arises to use more than 3 filters, an additional button- “+ More filters” is used to reveal the panel on the right containing all the filters. However, in this case, the panel can be closed/opened on demand.

Note: First 3 filters from the panel are always shown as quick filters in the table header when the panel is closed.

More than 3 filters available

In this approach, a filter is applied immediately as soon as a value is selected. This approach consumes too many API calls, so it is best to use when filters are used sparingly.

Applying filters instantly without using an explicit “Apply filters” button.

In this approach, all the filters are applied at the end collectively, using an “Apply filters” button. The data set only refreshes at the user action, making it suitable for cases when:

Applying filters using “Apply filters” button

The applied filters are shown using chips just below the search bar in the table header. Those chips can be used to quickly enable/disable an already applied filter. There is only one chip per column with its label highlighting the value as well as the name of the column.

Applied filters being shown as chips.

Note: The group of filter chips can be collapsed/expanded to view all the filter chips.

Collapsed view of applied filter chips

Expanded view of applied filter chips

The applied filters can be removed using the “Clear filters” or “Reset values” action present in the table header and the filters panel respectively. The only difference is that the “Reset values” button will reset the filter values to their original values but the “Clear filters” button will clear all the filter values(including the default values if any).

Note: If a new filter has been added to the list, then the “Reset values” button will only reset its values whereas the “Clear filters” button will delete the added filter altogether.

Resetting values using “Clear filter” button

Resetting values using “Reset values” button

In case of too many filters, not all columns are available to filter by default. In such cases, users can directly add filter(s) available on the data.

Note: Add new filters functionality can only be handled from the filters panel.

Adding a new filter

Applied filters can be saved as filter views so that the users can use the same set of filters in future.

Applied filters can be saved as filter views using the “Save as filter view” action present at the end of the applied filters in the table header.

Saving a filter view

Users can pick and apply a previously saved filter view using the “Filter views” action present in the table header.

Note: Users can make changes to the applied filter view and save it as a new one but they cannot update the existing filter view.

Applying previously saved filter view

The filters panel allows users to pin the frequently used filters at the top for quick access.

Note: Irrespective of pinning, first 3 filters are always shown as quick filters in the table header when the filters panel is closed.

Pinning a filter

Quick filters and filters panel behaviour with pinning