shadcn.io is not affiliated with official shadcn/ui
No Filter Results Empty State Block for Svelte
An expense table with three filters on and no row left: each filter is a removable chip that says how many rows taking it off would bring back, a drawn funnel with nothing coming out, and one Reset all filters button.
Installation
Overview
Show a filtered table with nothing left in it, and the way out, with this no filter results empty state for Svelte with Ark UI. A header sits over one framed panel for Siftwell, an expense tracker. A toolbar band lists the three filters that are on as removable chips, Status: Overdue, Category: Travel and Region: North, each saying what taking it off would bring back (+3 rows), and holds the Shine Button, the only colored control: Reset all filters. Under it a count reads 0 of 14 and the frame keeps a fixed height: with every filter on it holds the Empty message with a drawn funnel, dots going in and nothing coming out, and take a chip off and the rows that pass the other filters fill a native table of the expense, its category, region, status and amount. The other chips' numbers update as you go. Start over puts the three filters back. The panel's bands are ruled by Guides, and the whole block uses CSS transitions only. For any filtered list that can end up empty.
FAQ
Where do the numbers on the chips come from?
From the fourteen typed expenses and the filters that stay on: a chip's number is how many rows pass the other filters, minus how many pass all of them. With all three on, no row passes; taking off Status brings back 3, Category 2 and Region 3. They are worked out by one small helper from the data, never typed twice.
What stays local, and how do I wire it up?
Everything: the rows are typed in the block and the filters only change what is shown. In your app compute the same counts on your server (or from a facet query) for each filter with itself removed, show them on the chips, and put Reset all filters on the same handler that clears your filter state.
What do Reset all filters and Start over do?
Reset all filters removes every chip and lists all fourteen rows; with none on it is quiet and says "No filters are on." Start over, the outline button in the foot, puts the three filters back so you can try another order. Neither reloads or moves the panel.
Is it usable with a keyboard and a screen reader?
Tab reaches each chip, Reset all filters, the table's frame and Start over. A chip is a button named for what it does: "Remove Status: Overdue, brings back 3 rows". After a chip goes, focus moves to the next chip, or to Reset all filters when none is left, and the status line in the foot says what came back. The funnel is hidden from assistive technology.