shadcn.io is not affiliated with official shadcn/ui
Density Table Block for Vue
A page list with a three-way density toggle (Compact, Comfortable, Spacious) that sets row height and text size together, in a fixed-height region so the block never changes height, with a line that says what the mode does.
Installation
Overview
Let people choose how tight a table reads, with this density table for Vue with Ark UI. A compact header holds a Toggle Group of three modes, each an icon and a word (the words go on a phone), and under it a polite line that says what the mode does ("Comfortable: 44 px rows, 14 px text."). Choosing a mode sets the row height and the text size together on a hairline-ruled native table of nine pages from a site builder (title, path, status and last edited), inside a framed region of fixed height with a sticky head. The rows and their order are the same in every mode, so the block never changes height: denser modes show more of the nine, looser ones scroll them. It's built from Toggle Group, Badge and Guides, with a CSS entrance only. For page lists, audit tables and any grid that people read for very different lengths of time.
FAQ
How do I add my own modes or rows?
Each mode is a small constant in MODES: its id, label, icon, the cell class that sets the row height (h-8, h-11, h-14), the table's text size class and the two numbers the polite line reads out. Add a mode by writing its entry; the toggle, the line and the table follow. PAGES holds the rows and their order. The classes are written out whole in the data, so Tailwind sees them.
Why doesn't the block change height?
The table sits in a region of fixed height with its own scroll, so a mode only changes how much of the same nine rows shows at once. The head sticks at the top of the region on a solid background. The line under the toggle has a reserved line, so it never pushes anything either.
How is the toggle labelled and operated?
It's a single choice that can't be left empty, named "Row density", and each item is named by its word, which stays in the accessible name on a phone where it is visually hidden. Tab reaches the group, the arrow keys move between the modes and Enter or Space chooses one. The chosen mode is drawn in foreground colours, not the primary colour.
How does it look on a phone?
The toggle shows its icons only, with the words kept for assistive technology, and the line sits under it. The table drops the Path column (and, on the narrowest screens, the Edited column too) so nothing scrolls sideways, and every mode still works.
What does each mode change?
Compact sets 32 pixel rows with 12 pixel text, Comfortable 44 pixel rows with 14 pixel text and Spacious 56 pixel rows with 16 pixel text. Cell padding, the hairlines and the head stay the same, so the three modes read as one table at three densities rather than three designs.