Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table Block Column Visibility
Data table component with column visibility dropdown for dynamically showing or hiding columns in React apps
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Customize table columns on your Next.js admin panel with this visibility toggle component. Features gear icon dropdown with checkboxes for each column, dynamic show/hide functionality, hidden column count badge, and persistent column state. Built with shadcn/ui Table, DropdownMenu, and Checkbox components using Tailwind CSS. The customizable design lets users focus on relevant data—perfect for dense dashboards, analytics reports with many fields, employee directories, or any React app where different users need different column views.
6 employees
| ID | Name | Department | Role | |
|---|---|---|---|---|
| EMP001 | Alice Johnson | [email protected] | Engineering | Senior Developer |
| EMP002 | Bob Smith | [email protected] | Product | Product Manager |
| EMP003 | Carol White | [email protected] | Design | UX Designer |
| EMP004 | David Brown | [email protected] | Engineering | DevOps Engineer |
| EMP005 | Eve Davis | [email protected] | Marketing | Marketing Lead |
| EMP006 | Frank Miller | [email protected] | Analytics | Data Analyst |
Installation
Related 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