Density Table Block for React

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.

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.

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.

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.

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.

The mode is one useState; nothing is saved. To keep it, store the id with the user's settings and pass it as the initial state, or set it from your app's preference. Wire pick to wherever you keep that preference and the rest follows.