shadcn.io is not affiliated with official shadcn/ui
Chip Filters Table Block for Radix UI
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 Radix 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.