Table Filters

Filtering enables users to extract specific information or insights

Usage
Interactions

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

Usage

Position of Filters

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

When Filters Are Frequently Used

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 Frequently used filters in fixed section on right

When Filters Are Sparingly Used

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

3 or fewer filters available 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

Applying Filters

Instant Application

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. Applying filters instantly without using an explicit “Apply filters” button.

Batch Application

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:

  • The filters are used frequently
  • Users can create their own filters
Applying filters using “Apply filters” button Applying filters using “Apply filters” button

Visibility of Applied Filters

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. 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 Collapsed view of applied filter chips

Expanded view of applied filter chips Expanded view of applied filter chips

Resetting Filters

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

Adding New Filters

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

Filter Views

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

Saving Filter Views

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

Applying Filter Views

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

Pinning

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


Was this page helpful?