Empty Table State
Members table with the real header row visible and an empty body explaining which filters hid all 14 rows.
Members table with the real header row visible and an empty body explaining which filters hid all 14 rows.
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
Empty Table State keeps the real table header row rendered while the body shows the no-data panel. The header names Member, Role, and Last active so the shape stays learnable even at zero results. The body explains why: all 14 members are hidden by the 2 filters above, no one on Acme is an Admin who has been away 30 days. Clear filters is the primary button, Invite member is the honest alternative.
Applied filters are one array of badge chips, each dismissible. Keeping the header is the whole point: a blank page teaches nothing, a headed empty state teaches the table before the user earns rows.
Reach for this block wherever a table can return zero rows due to active filters, wired to your filter state so Clear filters resets the query and the row count restores. Pair the Invite member button with your invite dialog when the table is a members list.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the members list filtered to zero rows. Other empty table states:
Tip: state the total count alongside the zero shown, 14 members, 0 shown, so the user knows the filter is hiding rows, not that there are no rows.