👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Table with Density Toggle
Data table with density toggle allowing users to switch between compact, comfortable, and spacious row spacing modes
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Working with dense datasets or prefer breathing room? This React table includes a density toggle letting users switch between compact (minimal padding), comfortable (balanced), and spacious (generous whitespace) modes. Built with shadcn/ui Table and ToggleGroup components, the toggle buttons in the top-right corner instantly adjust row heights and cell padding across the entire table. User preference persists in state—perfect for dashboards where power users want maximum density while casual users prefer comfortable spacing, or data grids where different tasks benefit from different layouts.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/table-density-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/table-density-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/table-density-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/table-density-01.jsonRelated blocks you will also like
Searchable Filterable Data Table
Search and filter functionality
Table with Sortable Columns
Column sorting with indicators
Table with Column Visibility
Show/hide columns dynamically
Table with Page Navigation
Page navigation controls
Table with Sticky Header
Fixed header while scrolling
Table with Quick Filters
Filter chips for categories