Density Toggle Table
A deployments table with a segmented comfortable and compact toggle in the header that swaps every row's vertical padding live, above a density note.
A deployments table with a segmented comfortable and compact toggle in the header that swaps every row's vertical padding live, above a density note.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Density Toggle Table is the deployments list for the Acme workspace, eight services with their version, environment badge, deploying member, run duration, and a health status. A segmented control in the header switches row density between Comfortable and Compact, and the count line reads how many deployments landed in the last 24 hours. One row carries a Rolled back status in the destructive outline to show how failures read.
Density is a single useState value that swaps the vertical padding class on every body cell, so the same eight rows render as a roomy review list or a dense ops console with no second table. The footnote notes the preference is saved per member and that Compact fits roughly a third more rows per screen.
Reach for this block whenever the same table serves both a scan and a study mode: an ops console read at a glance and a detailed review read line by line. Wire the density value to a saved user preference so the choice carries across sessions and every table in the workspace.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the deployment history console. Other density-aware tables:
Tip: swap only vertical padding between densities, not font size or column set, so a member's spatial memory of the table survives the toggle.