👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Table with Quick Filters
Data table with quick filter chips allowing users to toggle category filters with single clicks
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Searching through dropdown menus to filter data is slow when you know the categories. This React table puts filter chips right above the table—click to toggle filters instantly. Built with shadcn/ui Badge and ToggleGroup components, each chip represents a category with a count badge showing how many items match. Multiple filters active at once, visual active state, and instant results—perfect for status filtering, category browsing, tag-based organization, or any interface where users frequently switch between known filter combinations.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/table-filters-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/table-filters-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/table-filters-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/table-filters-01.jsonRelated blocks you will also like
Searchable Filterable Data Table
Search with text input
Table with Row Selection
Select and act on rows
Table with Sortable Columns
Click headers to sort
Task Table with Actions
Action buttons per row
Table with Column Visibility
Show/hide columns
Table with Export Options
Export filtered data