shadcn.io is not affiliated with official shadcn/ui
Chip Filters Table Block for React
A bug table beside a rail of chip filters for priority and status: chips in a group are or, the groups are and, every chip counts what it would show, and an empty state clears them all.
Installation
Overview
Narrow a table by pressing chips, with this filter rail and table for React with Base UI. One framed panel with a plus mark on each corner is split by a solid divider: at the start a rail with two groups of Toggle Group chips, Priority (Urgent, High, Normal) and Status (Open, Testing, Fixed), each chip with a count; at the end a native table of twelve bugs with a drawn priority weight, an outline Badge for status and a due date. Chips in one group are "or" and the two groups are "and", so every chip's count is how many bugs it would show given the other group's choice, and a chip that would empty the table says 0. Clear all puts everything back, a foot line says in words what is shown ("Showing 3 of 12 bugs: priority Urgent or High, status Open"), and when nothing matches an Empty state under the table's head offers Clear all and returns focus to the first chip. The table sits in a fixed-height region, so filtering never moves the panel. On a phone the rail becomes two rows of chips that scroll sideways. It's built from Toggle Group, Badge, Empty, Button and Guides, with a CSS entrance only. For issue trackers, inventories and any table with two or three facets.
FAQ
How do I fill it with my own bugs and facets?
Edit BUGS, where each bug has a priority and a status from the two unions at the top, and PRIORITIES and STATUSES, which list the chips in order with their labels. The chips, their counts, the foot line and the empty state's sentence are all worked out from the bugs and the chosen values, so nothing is typed twice. To add a facet, add a third group in the same shape: a list of choices, a count helper that applies the other groups, and one more entry in showing.
How do the or and and rules work, and what do the counts mean?
Pressing no chips in a group means no limit from that group. Pressing several lets through any bug that has one of them, so High and Urgent show both. A bug has to pass every group, so Urgent with Open shows only urgent bugs that are open. Each chip's count is what pressing it would show with the other group's current choice: with Fixed pressed, the Urgent chip says 0, because no urgent bug is fixed. A count of 0 stays pressable on purpose: it takes you to the empty state, which tells you why nothing matches.
What stays local, and how do I filter on a server?
Everything is in the page: the filter is a few lines over typed rows and nothing is fetched or saved. For a server, keep the chips and Picked as the state, send it to your API in pickPriority and pickStatus, render the rows it returns and take the counts from its facet response. Keep the foot line: it only needs the number returned and the chosen groups.
Are the chips accessible?
Each group is named (Priority, Status) and each chip is a real toggle button that says whether it is pressed, so a screen reader announces "High, 4, pressed". The count sits inside the chip, so it is read with the name. Arrow keys move between the chips of a group. The foot line is a polite status region present from the start, so every change is announced once with its result. Clear all keeps its place when nothing is pressed and only says it has nothing to clear.
What happens when no bug matches?
The table keeps its head and the empty state takes the space under it, naming the groups that clash ("No bug has priority Urgent and status Fixed"). Its Clear all filters button resets both groups and moves focus to the first chip so you can start again from the keyboard. The foot line reads "Showing 0 of 12 bugs" at the same time.
How does it look on a phone?
The rail goes above the table and each group becomes a single row of chips that scrolls sideways, with the next chip showing as the hint; the groups keep their names for a screen reader. The table keeps Bug, Priority and Status and moves the bug's number, due date and reporter under its title, so nothing scrolls sideways. From the large breakpoint the number, reporter and due date have columns of their own.
Related
- Pro
Searchable Catalogue Table
Sort and searchA library catalogue table with a search field and an availability menu: typing keeps the titles whose name or author holds the words and marks them, the foot says how many match, and an empty state under the head clears the search.
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.
- Pro
Empty States Table
Sort and searchA contact book table with two empty states you reach by doing something: searching for text that is not there, and removing every contact after a confirm, then adding the samples back, all at one fixed height.
- 1212Pro
Sort Builder Segments Table
Sort and searchA customer segments table ordered by a two-rule sort builder: pick a column and a direction for the first rule and for the tie-break, see the order as a 1 and a 2 on the heads, and Reset to start again.
- Pro
Effective Priority Table
Rich cellsA ticket queue where a switch raises any ticket due within two days by one level, shown as drawn bars, a word and a raised-from note, and the Priority head sorts by that effective rank.
- Pro
Filter Chips Blog
Card gridsA coffee journal's archive with a ruled band of category chips and their counts over eight post cells: choosing a chip removes the other posts, a polite line says how many show, and the wall keeps its height.