About this block

Empty State Table is a projects list filtered down to zero results without looking broken. Three active filter chips stay visible above the table (Status: Archived, Owner: Maya Chen, and Created: Last 7 days), each with a dismiss X, and a Clear all button sits beside them. The header row (Project, Owner, Status, Updated) renders intact, while the body holds a single full width cell spanning all four columns with a centered Empty component: a SearchX icon, the line No projects match these filters, a one sentence hint, and two recovery buttons, Clear filters and View all projects.

The active filters are one const array and the columns are another, so the empty cell always spans the real column count through colSpan. The footnote states the rule the block demonstrates: keep the header row visible so the table does not read as failed, and always offer a one click path back to results.

When to use

Reach for this block as the empty branch of any filterable table, rendered when the current filter set returns no rows. Pair it with your live count so the subtitle can report 0 of 48 projects match the current filters and name exactly why the list is blank.

A natural flow around it on an Application Pro page:

Before

• Filters and search
• App shell

After

• Empty states
• Dialogs

What you can display

One strong use is the over-filtered projects list. Other in-table empty states:

• No search matches. Query echoed back with a Clear search action above the intact header row.
• Fresh account. A first-run list with an import or Create your first record call to action in the body.
• Access scoped out. A permission note explaining why the visible set is empty for this role.

Tip: name the specific filters causing the miss, not a generic No data; a user who can see which chip to drop recovers in one click.