shadcn.io is not affiliated with official shadcn/ui
Data Table examples · Standard
Data Table with Column Visibility for React
A table of orders with a Columns menu that shows and hides each column.
Four orders in six columns and a Columns menu above the table with a checked item per column. Uncheck one and the column leaves the header and every row. TanStack Table's column visibility keeps the state; the menu is our Dropdown Menu. Use it for wide tables where people choose what they need to see.
Preview
Installation
FAQ
Where is column visibility stored?
In the table, from columnVisibilityFeature; every column starts visible. Pass initialState: { columnVisibility: { date: false } } to start with a column hidden.
How does the Columns menu toggle a column?
It lists table.getAllColumns() filtered by getCanHide(), checked from column.getIsVisible(). Each DropdownMenuCheckboxItem calls column.toggleVisibility from onCheckedChange.
What text does each item show?
The column's id with capitalize: Id, Customer, Product, Quantity, Total and Date. Give a column meta with a label, or map ids to names, to show something else.
What does the trigger look like?
An outline Button reading Columns with a chevron after the text. The menu opens below it, aligned to its end.
Related
- Basic Data Table with CheckboxesA table of products with a checkbox on
- Data Table with FiltersA table of users with two inputs that
- Resizable Columns Data TableA table of employees whose columns resize
- Simple Dropdown with Icons Dropdown MenuA short menu behind a dots button with an
- Paginated Data TableA table of transactions, five per page
- Data Table with ActionsA table of payments with a menu of