Table Row Density Toggle — Compact / Comfortable / Spacious, Persisted Across Reloads

Power users scanning a long table often want to see as many rows as possible; casual or new users often prefer more breathing room and larger touch targets. Hardcoding one row height forces every user into the same tradeoff. This snippet implements a genuine three-way density switcher — compact, comfortable, spacious — that changes only vertical padding and font size, persists the user's choice, and is built as a properly accessible radio group rather than a set of plain buttons.

Why density changes padding and font-size, never column structure

Every density mode in the CSS touches exactly two properties: padding and font-size. Nothing about column widths, the number of visible columns, or cell content changes between modes — density is purely about *vertical rhythm*, not information density in the sense of hiding or showing data. This distinction matters: a density toggle that also reflows columns would be confusing (users switching for more visible rows shouldn't also lose or gain data), so the CSS is scoped tightly to just the properties that make rows taller or shorter.

Built as a real radio group, not three plain buttons

The three density buttons live inside a container with role="radiogroup", and each button carries role="radio" with aria-checked toggled to reflect the current selection. This isn't just a cosmetic ARIA addition — a density choice is inherently mutually exclusive (exactly one mode is active at a time), which is precisely the semantic a radio group communicates to assistive technology; a screen reader user tabbing to this control hears "radio group, row density" and can navigate the three mutually-exclusive options accordingly, rather than being told three unrelated buttons exist with no indication of their relationship or which one is currently active.

Persisting through localStorage, defensively

applyDensity() writes the chosen density to localStorage on every change, and the page reads it back on load to restore the same preference. Both the write and the read are wrapped in try/catch — localStorage can throw in contexts like private browsing with storage disabled, and a persistence failure in that edge case should degrade gracefully (density switching still works for the current session) rather than throwing an uncaught error that could break the rest of the page's script execution.

Validating the stored value before trusting it

When restoring a stored density on load, the code checks that the retrieved string is actually one of the three valid density values before applying it (['compact','comfortable','spacious'].includes(stored)). This guards against a corrupted or manually-edited localStorage value (or a future version of the code that used different density names) silently producing a table with no matching CSS rule applied — falling back to 'comfortable' as a safe default whenever the stored value isn't recognized.