Table

<lib-table> supplies the shell — the chrome, the loading and empty states, optional pagination and row selection. Every cell and every header is a template you provide, so a design here is mostly about columns and their widths rather than about the table.

Sortable, paginated, selectable — the admin client list

Sorting is opt-in per column: the header calls sort() and reads back sortField/sortOrder to pick its own glyph, so a design has to say which columns sort. Row selection needs dataKey. A wide table gets a min-width and scrolls sideways rather than crushing its columns.

Light
Client ProvinceMembers
Rural ManitobaManitoba14
Interlake RegionManitoba6
Northern OntarioOntario21
1-3 of 5
Dark
Client ProvinceMembers
Rural ManitobaManitoba14
Interlake RegionManitoba6
Northern OntarioOntario21
1-3 of 5

Plain, with a footer — the user management list

The same component with none of the extras: no pagination, no sorting, no selection. Note the two unlabelled columns at each end, for the avatar and the row action — they still need a width in a design, and an accessible name from us.

Light
NameEmailTypeStatusLast login
HEH. Eskandarih.eskandari@example.testAdminActive Aug 26, 2026
DRDana Reiddana.reid@example.testMemberActive Aug 24, 2026
JLJo Linjo.lin@example.testMemberInvited —
3 members · 1 invitation pending
Dark
NameEmailTypeStatusLast login
HEH. Eskandarih.eskandari@example.testAdminActive Aug 26, 2026
DRDana Reiddana.reid@example.testMemberActive Aug 24, 2026
JLJo Linjo.lin@example.testMemberInvited —
3 members · 1 invitation pending

Loading and empty

Both come from the component: [loading] and emptyMessageTemplate. Worth designing, because a table fed by a request shows one of them first.

Light
ClientProvinceMembers
No clients match this filter.
ClientProvinceMembers
Dark
ClientProvinceMembers
No clients match this filter.
ClientProvinceMembers