Table Filter

The Table Filter component adds a live search field above supported tables.

As users type, matching rows remain visible while non-matching rows are hidden automatically.

This component is useful for large tables, directories, schedules, and resource lists where users may need to quickly locate specific content.

Best Use Cases

Staff directories
Course or program tables
Resource listings
Large data tables
Searchable reference content

What You'll Need

A supported table component or styled table
Clear column headings and searchable content

Tips*

Use meaningful table headings and labels
Keep table content concise and consistent
Use only one filter and table per page

*The Table Filter only filters visible content already displayed on the page. It does not search across the website or pull in additional results.

How to Add a Responsive Table

 

As you type, matching rows will remain visible.
Table Label 1 Table Label 2 Table Label 3
Biology Engineering Business
Math Computer Science Communications