Empty State Table
Projects table filtered to zero rows keeping active filter chips and the header visible above a centered empty state with recovery actions.
Projects table filtered to zero rows keeping active filter chips and the header visible above a centered empty state with recovery actions.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the over-filtered projects list. Other in-table empty states:
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.