Table Filtering

Overview

The table filtering pattern enables users to narrow large data sets by applying filter criteria across one or more categories. It provides three complexity tiers — simple, intermediate, and advanced — to deliver a complete filtering workflow from configuration through applied-state visibility.

This pattern solves the problem of users needing to locate specific subsets within large, multi-dimensional data tables. It scales from simple inline dropdowns for a few filters to a full side panel with accordion-based categories for complex filtering needs.

 

When to use

• Tables or data grids with large data sets where users need to locate specific subsets.
• Views with one or more filterable dimensions (e.g. interaction type, queue, agent status, sentiment, contact channel).
• Dashboards or reporting pages where refining visible data is a core workflow.
• When users need to combine filters across several categories simultaneously.
• When table search and filtering need to work together in the same toolbar.

When to not use

• Small, simple lists where sorting alone is sufficient.
• Read-only summary views where filtering would not meaningfully change the user's understanding.
• When the data set is small enough that all records are easily scannable without filtering.
• When only a single binary toggle is needed — use a simpler inline control instead.

 

User experience principles

• Clarity — Applied filters are always visible (inline tags, indicator group, or in-page tags) so the current data scope is never ambiguous.
• Progressive disclosure — Scales from inline dropdowns (basic) through modal overlay (intermediate) to accordion-based side panel (advanced), revealing complexity only when needed.
• Responsive adaptation — The filter layout transitions from inline controls to a side panel based on available space, not a fixed breakpoint.
• Efficiency — Basic and intermediate keep controls inline for quick access. Advanced uses a side panel. The indicator group allows quick filter removal without reopening the panel.
• Error prevention — Submission-required mode prevents premature data changes. "Clear all" provides a safe reset. Individual filters can be dismissed one by one.
• Consistency — Tag sizing, grouping, and overflow behaviors follow predictable rules regardless of the number of active filters.

 

Pattern anatomy

The table filtering pattern is composed of two core components — the Filter Container and the Filter Indicator Group — organised across three complexity filters.

 

Complexity filters

 

Basic filtering

 

Toggle (only one option)

• Search input — Located first inline in the toolbar.
• Toggle — Located beside the “Search” input inline in the toolbar.

 

Lower breakpoint

Search input has reduced width if necessary.

 

Dropdown

• Search — Compact "Search" button that expands to full-width text input on click.
• Filter Dropdowns (max 2) — Multi-select dropdown inputs inline in the toolbar with "All options (0 of N)" select-all.
  

Lower breakpoint

• Search has reduced width.
• Filter Dropdowns is replaced by the filter button action.
• Other actions are compressed and hidden in a context menu.

 

Use the Modal Side Panel to show filter dropdowns

Once there is insufficient space to hold all of the dropdown inputs in a single line, then we default to using the Modal Side Panel.

Note that this is not necessarily dependent on a specific breakpoint, but rather when the inputs lack sufficient space in the container to be single-lined.

Show anatomy for side panel

Intermediate filtering

 

Initial state

• Search — Compact "Search" input inline in the toolbar.
• Filter button — Default state beside “Search” input.

(show spaces)

Active state

• Search — Compact "Search" input inline in the toolbar.
• Filter button — Active state beside “Search” input.
• Filter container — 3-5 multi-select dropdown inputs, one per category, and “Clear all” action button.

 

Applied filters state

• Search — Compact "Search" input inline in the toolbar.
• Filter button — Default state beside “Search” input showing the total amount of filters applied.
• Applied filters row — Label (Applied filters:), Filter indicator groups (grouped by category) with “Clear all” action button.

 

Lower breakpoint

• Search has reduced width.
• Filter dropdowns are replaced by the filter button action.
• Other actions are compressed and hidden in a context menu.

 

Use the Modal Side Panel to show the filter dropdowns

Once there is insufficient space within the filter container to hold all of the dropdown input in a single line then we default to using the Modal Side Panel

Note that this is not necessarily dependent on a specific breakpoint, but rather when the inputs lack sufficient space in the container to be single-lined.

Show anatomy for side panel

 

Advanced filtering

 

Initial state

• Filter button — In toolbar; opens a Modal Side Panel. Shows count badge when active.

(show spaces)

Active state

• Filter button — Active state beside “Search” input.
• Side panel — Header ("Filters"), optional search input, preview/indicator area, accordion sections, action bar.
• Search (Optional) — Compact "Search" input inline in the toolbar.
• Accordion sections — Collapsible groups per filter category. Each expands to reveal checkboxes, search inputs, or radio buttons.
• Selected filter indicator group — Grouped category tags with count badges and "Selected filters (N)" summary.
• Action bar — Apply, Clear all, Cancel.

 

Applied filters state

• Applied filters row — Label (Applied filters:), Filter indicator groups (grouped by category) with “Clear all” action button.

 

Lower breakpoint

• Keep the same structure with the side panel and the applied filters row.