👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Table with Column Visibility
Data table with column visibility controls allowing users to show or hide specific columns via dropdown menu
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Got 15 columns in your table but users only care about 5? This React table includes a column visibility dropdown letting users show/hide columns based on their workflow. Built with shadcn/ui DropdownMenu and Checkbox components, the gear icon reveals checkboxes for each column—toggle them on/off to customize the view. Column preferences persist in state—perfect for admin panels, analytics dashboards, or reports where different users need different data views without cluttering the interface with unnecessary columns.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/table-column-visibility-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/table-column-visibility-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/table-column-visibility-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/table-column-visibility-01.jsonRelated blocks you will also like
Searchable Filterable Data Table
Search and filter table data
Table with Density Toggle
Adjust row spacing preferences
Table with Sortable Columns
Click headers to sort data
Table with Quick Filters
Filter chips for categories
Table with Export Options
Export data to CSV/Excel/PDF
Table with Sticky Header
Fixed header while scrolling