Components · Data table

Data table

The grid the volunteer roster runs on — a typed DataGrid assembled from @phauna/ds/grid primitives. A sticky <thead> caps rule-divided rows, and each column owns its own cell renderer: an avatar + name identity, a Team dot, a monospace State tag, a DS status Badge, a relative "last active" date, and a trailing per-row actions menu.

DataGrid · roster of active volunteers

Volunteer	Team	State	Status	Last active
MR Marisol Reyes Transport lead	Transport	CA	Active	2h ago
DW Darnell Washington Foster applicant	Foster network	GA	Onboarding	5h ago
PV Priya Venkatesan Intake volunteer	Intake & triage	TX	Active	Yesterday
TO Tomás Okafor Vet tech	Medical	NY	Paused	3d ago
HB Hannah Bergström Canvass captain	Community outreach	WA	Active	1h ago
WC Wei Chen Driver	Transport	IL	Active	6h ago
AR Aaliyah Robinson Foster applicant	Foster network	OH	Onboarding	Jun 28
DF Diego Fuentes Vet tech	Medical	AZ	Active	4h ago

Row 1 is pinned :hover (row tint + its name link in accent) and its actions button is pinned :hover; hover the others live. Surfaces layer bg < surface < surface-2; rows divide on --rule hairlines with no vertical borders — the DataGrid look.

Column<T>

{ key, header, sortable?, align?, render?(row) }. render owns the cell JSX — the identity cell, the Team lookup, the State tag and the Status Badge are all custom renderers over the same typed row.

identity cell

A monogram avatar (gradient fallback, no photo) beside a linked name and a faint role sub. The name is the row's primary link; the rest of the row stays a plain cell.

status Badge

DS Badge tones — good (Active), warn (Onboarding), neutral (Paused) — a dot + label pill, never a raw string.

row action

A trailing ghost icon button (MoreVertical) that opens the per-row menu — edit, copy magic link, change status. Kept out of the name link so it stays independently clickable.

Source · RescuersTable.tsx (TanStack columns: avatar name link, state, status dot, relative updatedAt, row menu) · @phauna/ds/grid DataGrid + Column<T> render · design-system/data-table.