Table With Filters
Projects with filter chips narrowing rows live, the count updating per click.
Projects with filter chips narrowing rows live, the count updating per click.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Table With Filters is a projects list with working filter chips: All, Active, and Archived sit above the table as rounded pill buttons with aria-pressed, and clicking one narrows the six rows to the matching status while the count line updates from Showing 6 of 6 projects down to Showing 4 of 6 projects or Showing 2 of 6 projects. Each row shows the project name, the owner avatar from the shared set (Avery Stone, Priya Nair, Jordan Lee, and others), a status badge, and a relative last-updated time.
Projects are one array and the filter drives a single useState. The entire pattern is intentionally minimal so it pastes cleanly into any list without untangling library state.
Reach for this block anywhere a list has a small fixed set of statuses users flip between frequently, wired to your projects endpoint. Replace the useState with a URL search param when the filter needs to survive navigation.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the team projects list. Other filtered tables:
Tip: the count line is the cheapest confirmation that the filter worked; never skip it.