Admin UI
The building blocks of a Django/AdminJS-style admin — pure UI, zero app
knowledge. The package renders tables, selection bars and edit drawers; the
consumer provides nav items, columns, labels and the server functions behind every
action. See the admin area for how the example composes them
into a complete /admin.
The blocks
| Component | What it is | Django parallel |
|---|---|---|
AdminShell | Left nav (collapsible to an icon rail, persisted) + mobile drawer + content pane | the admin chrome |
DataTable | TanStack Table changelist: sorting, checkbox row selection, responsive columns | changelist |
SelectionBar | "N selected" + the consumer's bulk-action buttons | the actions bar |
EditSheet | Right-hand drawer for editing 1..N objects | the change form |
TriStateField | keep / yes / no control — only explicitly set fields get written | list_editable, safely |
SectionHeader | Entity page header | — |
AdminShell takes an accountSlot (a ReactNode) for the consumer's theme, language
and sign-out controls — the package knows nothing about auth or i18n.
Try them
These are the same components the example's /admin renders, live against sample
data. The changelist — select rows, sort by clicking headers:
| Namn | E-post | Status | |
|---|---|---|---|
| Astrid Lindgren | astrid@example.com | Aktiv | |
| Bo Nilsson | bo@example.com | Aktiv | |
| Eva Ek | eva@example.com | Inaktiv | |
| Admin | admin@example.com | Aktiv |
Markera rader (eller alla via huvudet) — markeringsraden dyker upp ovanför tabellen, precis som i /admin. Klicka på kolumnhuvuden för sortering.
And the tri-state control that makes bulk editing safe — when you save several objects at once, only fields you actively set are written:
Status
Site admin
Vald åtgärd: status=keep, site-admin=keep — bara fält som inte står på ”Behåll” skrivs när formuläret sparas. Det är det som gör det säkert att redigera många objekt på en gång.
Composition shape
A section is ~150 lines of composition: a useQuery against a gated server
function, column definitions, actions in the selection bar, the edit sheet for 1..N
rows. The package never fetches anything.