Compliance Alliance Charter Design System · v0.1
Data display

Data grids & density

Compliance runs on dense tables — registers, obligation lists, exam evidence. Beyond the presentational table, this is the working grid: sort, filter, select, paginate, switch density, and edit in place. Built for a column of hundreds, scanned at a glance.

The working grid

One grid, every interaction. Sort a column, filter by text, select rows for a bulk action, and toggle Comfortable / Compact density. Headers stay pinned while the body scrolls.

0 selected
Obligation Owner Posture Risk Due

Density, side by side

Same data, two densities. Compact fits ~40% more rows on screen for power users reconciling long registers; Comfortable is the calm default.

Density is a single attribute — data-density="compact" — so it can be a per-table choice or a global user preference. Row padding eases between the two.

Editable grid & bulk entry

For data entry at scale — logging CTRs, importing a register — cells are inputs. Tab moves across, Enter adds a row. Focused cells show the accent ring.

DateMember nameAmountType
3 entries · unsaved