shadcn.io is not affiliated with official shadcn/ui
Data Table examples · Standard
Data Table with Filters for React
A table of users with two inputs that filter the rows by name and by email.
Five users and two Inputs above the table, one for names and one for emails. Each keystroke narrows the rows, and both filters apply together. TanStack Table's column filtering does the matching. Use it for directories and lists where people look for a row by a field they know.
Preview
Installation
FAQ
How do the inputs filter the table?
Each input belongs to a column, name or email. Its onChange calls column.setFilterValue and its value reads column.getFilterValue(). The table has columnFilteringFeature, createFilteredRowModel() and the includesString filter.
Can both inputs filter at once?
Yes. Each writes its own column's filter, and a row shows only when it matches both. Role and Status have no filter here.
How do I clear a filter?
Empty the input; an empty value removes that column's filter. The inputs are type="search", so browsers that support it show a clear button inside.
Related
- Basic Data Table with CheckboxesA table of products with a checkbox on
- Paginated Data TableA table of transactions, five per page
- Data Table with Column VisibilityA table of orders with a Columns menu
- Input with LabelA text input with a label above it
- Data Table with ActionsA table of payments with a menu of
- Simple Single Select ComboboxA single-select combobox that opens from