Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Data Table with Column Visibility
A React data table with column visibility toggle using TanStack Table VisibilityState and shadcn/ui DropdownMenuCheckboxItem controls
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Wide tables overwhelm small screens—column visibility lets users customize what they see. This React data table uses TanStack Table's VisibilityState with DropdownMenu containing DropdownMenuCheckboxItem for each toggleable column. Built with shadcn/ui components featuring ChevronDownIcon trigger and capitalize styling. The visibility pattern improves focus—perfect for responsive designs, dense datasets, customizable reports, or anywhere users need to hide irrelevant columns adapting table layout to their specific workflow and screen constraints.
| Order ID | Customer | Product | Quantity | Total | Date |
|---|---|---|---|---|---|
ORD-001 | John Doe | Laptop | 1 | $999.00 | 2024-01-15 |
ORD-002 | Jane Smith | Headphones | 2 | $398.00 | 2024-01-16 |
ORD-003 | Bob Johnson | Keyboard | 1 | $79.00 | 2024-01-17 |
ORD-004 | Alice Williams | Mouse | 3 | $147.00 | 2024-01-18 |
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Data Table
Checkboxes and sorting
Table with Filters
Column filtering inputs
Resizable Columns
Drag to resize widths
Dropdown Menu
Standard dropdown component
Paginated Table
Page navigation controls
Table with Actions
Row action dropdown
Questions you might have
React Data Table with Filters
A React data table with column filter inputs using TanStack Table getFilteredRowModel and shadcn/ui Input for real-time filtering
React Paginated Data Table
A React data table with pagination controls using TanStack Table getPaginationRowModel and shadcn/ui Button for Previous/Next navigation