Centrim Design System — a token-first, accessible React component system.
List & management
Demonstrates how to build a data-management workspace using the Design System: find, review, filter, select and manage records efficiently.
What it demonstrates
- The workflow reads top to bottom — search → filter → review → select → act → paginate
- The table as the page: no wrapping card, nothing competing with the rows
- A quiet one-line summary (24 projects · 18 active · 3 need attention) instead of four KPI cards
- Search, labelled filters and active filter chips grouped once above the data, with Clear all
- Selection progressively revealing bulk actions, with the destructive action set apart behind an AlertDialog
- Row hierarchy: project name strongest, status and owner supporting, updated and actions quiet
- Sortable Project, Progress and Updated columns using the table's own sort behaviour
- Loading skeleton rows, empty, no-results and error handled as distinct states with distinct copy
- Responsive recomposition — filters collapse behind a Filters toggle, the least important columns drop first
How to adapt it
- Keep the table the primary focus — summary, toolbar and result count all stay secondary to it.
- Give each row a primary line and a quiet secondary line instead of extra columns.
- Show few filters by default and keep every one of them labelled — never icon-only.
- Bulk actions are progressive disclosure: the bar appears only once rows are selected.
- Hide the least important columns first as the viewport narrows; never shrink the full table.
- Only the primary row action is ever a visible button; the rest live in a menu, and Delete always confirms.
- Use it to manage a collection. Do not use it for a single record (see Details) or for an overview (see Dashboard).
Composed from
Nothing on this screen is new. Every part is an existing component, layout or pattern.