Table Filters

Filters vary depending on the complexity of the data set. Table filters could be a single search field or could contain up to five separate filtering options.

When there are more than four filters, all filters, except for Search, should render in a collapsible filter drawer.

On page load, filter drawers should be collapsed, single-select filters should have a default option selected, and multi-select filters should have a default state of "0 out of {total} selected". In most cases, Date Range filters should default to the longest date range option.

When there are two or more multi-select filters, a "Clear Filters" button should render on click of any filter option. On click of "Clear Filters", filters should reset to their default options and the "Clear Filters" button should disappear.

Filters should persist when a user remains in the context of a Business Unit, Parent, Program, or Tenant. On change of the Business Unit, Parent, Program, or Tenant, filters should reset to their default options.

Individual table filters should function as "and" operators, and options inside of multi-select filters should function as "or" operators.

Note that the width of the filters will depend on the amount and size of the items on the right side of the table.

Variations

Standard

This is our simplest table filter. The user can search the table using a keyword. Whenever possible, the user should be able to search the entire table, not just a single column.

Standard template code

Table

Standard with text

Use this variation if the data set shown is not complete or the user needs more information on when this data was collected. One common use case for this variation is showing when the data was last updated.

Standard with text template code

Showing data as of current date

Table

Standard with button

Use this variation if the user can take an action that is related to the data shown in the table. The button can be primary, secondary, default, or large, depending on the importance of the action.

Standard with button template code

Table

Standard with toggle

Use this variation if the user can have two or three preset filters of the same data set.

Standard with toggle template code

Table

Standard with four filters and a toggle

This variation shows our limit of four filters that can appear above the table before collapsing.

Fully loaded standard template code

Select date range
Last 90 Days
Select types
Select statuses
Table

Collapsible filters and actions ribbon

If there are more than four filters, they will collapse into a separate filter section. This allows the user to focus on the data set, rather than on filters. The bulk actions ribbon is shown to illustrate how filters will show and hide above the table.

Collapsible filters and actions ribbon template code

Select date range
Last 90 Days
Select types
Select statuses
Select tags

# items selected

Table

Product-specific Table Filters

Below are products that have a specific set of filters either due to the data set, how the data is viewed, or what the user needs to filter on.

Events — Programs

For the Programs data set, the user can toggle between views, either table or list. Sorting appears in the filters section when the user is on the list view. This is because the user can't sort through a column header on the list view.

Events Programs template code

Select action destinations
Select business units
Select companies
Select event source providers
Table

Marketing — Promotions

The Promotions table has five filters, but no right side content or actions.

Marketing Promotions template code

Select types
Select statuses
Select channels
Select audiences
Table

Messaging — Data

The Data table has a one-off filter for 'Auto-Refresh Segments.' The filtered data appears in a modal, instead of the table below. This design is under review, do not use this pattern for anything else.

Messaging Data template code

Select date range
Last 90 Days
Select types

# items selected

Table