10

Data Display

Tables Component Builder Component

Table headers: 11px DM Sans 500, all-caps, #888. Body cells: 13px DM Sans 300. Row hover: rgba(35,64,59,.03). Selectable rows use checkbox. Supports sorting, pagination. The list view rendered by buildListTable() is the canonical counterpart to grid-of-cards layouts — the Page Toolbar's view-toggle flips between the two over the same dataset.

Default

Dense — for audit logs, people grids, high-density browsing

Empty state

Mount point: <div class="bsn-list-table-mount" data-bsn-list-table='{"ariaLabel":"…","columns":[…],"rows":[…],"selection":true,"rowActions":true,"dense":false,"pagination":{…}}'></div>

Variants & flags: selection (boolean — adds checkbox column), rowActions (boolean — adds kebab menu column), dense (boolean — tighter row padding for audit logs / people grids), pagination (object — {showing, pages[], current}), emptyMessage (string — replaces empty-row placeholder copy).

Rich cells: Each row's cell value is either a plain string (escaped + rendered as text) or {"html":"<...>"} for status chips, progress bars, name+email stacks, or any rich content. Use plain strings for terminal-clean data (dates, names, numbers) and the HTML escape hatch only when a chip / bar / stack is required.

List/grid parity: This component is the list-view counterpart to grid-of-cards layouts. Use the Page Toolbar's view-toggle to flip between the two over the same dataset — never render both at once. Authors render the grid via repeated buildCard() calls; the list via buildListTable() with the same row data shaped into columns/rows.

Rules: NEVER hardcode <table> / .table-wrap markup directly. Always use the mount point. Pagination uses the canonical .list-table-pager chrome — don't hand-roll page buttons.