Search blocks by description or jump to a page.
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.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? 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.