Shadcn.io is not affiliated with official shadcn/ui
Data Table with Column Visibility
A React data table with column visibility toggle using TanStack Table VisibilityState and shadcn/ui DropdownMenuCheckboxItem controls
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.
Data Table with Column Visibility preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Data Table with Filters
A React data table with column filter inputs using TanStack Table getFilteredRowModel and shadcn/ui Input for real-time filtering
Paginated Data Table
A React data table with pagination controls using TanStack Table getPaginationRowModel and shadcn/ui Button for Previous/Next navigation