Data Display
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
<div class="bsn-list-table-mount" data-bsn-list-table='{"ariaLabel":"…","columns":[…],"rows":[…],"selection":true,"rowActions":true,"dense":false,"pagination":{…}}'></div>
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).
{"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.
buildCard() calls; the list via buildListTable() with the same row data shaped into columns/rows.
<table> / .table-wrap markup directly. Always use the mount point. Pagination uses the canonical .list-table-pager chrome — don't hand-roll page buttons.