Data display

Table

List tables are the canonical row-data surface. One base class (.sp-list-table) carries the chrome — header cells in 12/600 help-text on a tinted background, hairline row dividers, row hover via --row-hover. Variations layer on with column-level modifiers (.cb-col, .num, .sortable) or whole-table modifiers (.dense).

Overview

One table chrome scales from a 5-row settings list to a 5,000-row data grid. The base class handles the common chrome; modifiers handle variation. Use the basic list for "browse entities" pages and add selectable/sortable for data grids where users need bulk operations.

Use cases

  • Basic list. Title + meta + status + right-aligned date. The default for browse pages.
  • Selectable + sortable. Add a checkbox column and sortable headers. Pair with a bulk-action bar.
  • Dense. Use .dense for log views, audit trails, and other scanning-heavy surfaces.
  • Tree view. Hierarchical rows with caret + connector lines. Caret toggles a subtree; row click selects.
  • Numeric. Right-aligned numbers with tabular-nums, optional totals row.
  • Empty state. Centered icon + title + sub-text inside the table body when no rows.

Properties

ElementClassNotes
Base table.sp-list-tableStandard chrome — 36 px row height, 16 px cell padding, hairline row dividers.
Dense modifier.sp-list-table.denseDrops row height to 28 px and body text to 12 px.
Checkbox column.cb-colNarrow column at the left for row selection checkboxes.
Numeric column.numRight-aligned, tabular-nums. Apply to both <th> and <td>.
Sortable header.sortableHeader cell with sort affordance. Add .sorted.asc or .sorted.desc for active state.
Selected rowtr.checkedBackground shifts to --row-selected-bg.

Best practices

  • Numbers always tabular. Use .num on every numeric column. Vertically stacked digits with different widths read as typos.
  • One sort at a time. Show one column's sort indicator; clicking another moves the indicator.
  • Truncate, don't wrap. Long values get ellipsis with a tooltip. Wrapping breaks the row rhythm.
  • Bulk actions in a bar. Don't put per-row checkboxes if the page can't act on selections. Pair with the inbox bulk-action bar.
  • Empty states are mandatory. An empty table without an empty-state component looks broken.