About this block

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.

When to use

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

• App shell
• Filters and search

After

• Empty states
• Dialogs

What you can display

One strong use is the team projects list. Other filtered tables:

• API keys. Active and Revoked chips, each row with a scope badge and a revoke action.
• Integrations. Connected and Available tabs, same chip shape.
• Support tickets. Open, In progress, and Closed, with an assignee column.

Tip: the count line is the cheapest confirmation that the filter worked; never skip it.