Data Table

1import { DataTable, TableToolbar, type Column } from '@/ui/Table'23const columns: Column<Deploy>[] = [4  {5    id: 'service',6    header: 'Service',7    sortBy: (r) => r.service,       // omit to make the column unsortable8    sticky: true,                   // pins during horizontal scroll9    cell: (r) => <span className="font-mono">{r.service}</span>,10  },11  {12    id: 'requests',13    header: 'Requests',14    align: 'right',15    numeric: true,                  // right-aligned + tabular figures16    sortBy: (r) => r.requests,17    cell: (r) => nf.format(r.requests),18  },19  {20    id: 'author',21    header: 'Deployed by',22    hideBelow: 'lg',                // shed the least decision-relevant first23    cell: (r) => <Author name={r.author} />,24  },25]2627<DataTable28  columns={columns}29  rows={rows}30  rowKey={(r) => r.id}31  sort={sort}32  onSortChange={setSort}33  selectable34  selected={selected}35  onSelectedChange={setSelected}36  density={density}37  stickyHeader38  caption="Recent deployments"39  emptyState={<EmptyState … />}40/>4142// Responsive: a card list below md, the table above it43<div className="md:hidden"><TableCardList … /></div>44<div className="hidden md:block"><DataTable … /></div>

<div class="ds-table-wrap">
  <table class="ds-table">
    <caption class="sr-only">Recent deployments</caption>

    <thead>
      <tr>
        <th scope="col" class="ds-table__select">
          <input type="checkbox" aria-label="Select all rows" />
        </th>
        <th scope="col">Service</th>
        <th scope="col" aria-sort="descending">
          <button type="button">Requests <span aria-hidden="true">↓</span></button>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><input type="checkbox" aria-label="Select api-gateway" /></td>
        <th scope="row">api-gateway</th>
        <td class="ds-table__num">1,240,331</td>
      </tr>
    </tbody>
  </table>
</div>

<p class="sr-only" role="status" aria-live="polite">3 rows selected</p>

.ds-table { inline-size: 100%; border-collapse: collapse; font-size: 13px; }

/* Horizontal rules only. Vertical rules turn this into a spreadsheet. */
.ds-table tbody tr { border-block-end: 1px solid var(--ds-border-subtle); }
.ds-table tbody tr:last-child { border-block-end: 0; }

.ds-table th {
  block-size: 36px;                    /* shorter than a data row */
  padding-inline: 14px;
  text-align: start;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-fg-muted);
  background: var(--ds-surface-inset);
  white-space: nowrap;
}

.ds-table td { block-size: 44px; padding-inline: 14px; }

/* The single highest-value rule in any table */
.ds-table__num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.ds-table tbody tr:hover { background: var(--ds-layer-hover); }
.ds-table tbody tr[data-selected] { background: var(--ds-layer-selected); }

/* Sticky header. scroll-padding stops it covering a focused row. */
.ds-table-wrap { overflow: auto; scroll-padding-block-start: 36px; }
.ds-table thead { position: sticky; inset-block-start: 0; z-index: 1; }

/* Sticky first column during horizontal scroll */
.ds-table__sticky {
  position: sticky;
  inset-inline-start: 0;
  background: var(--ds-surface);
}

/* The sort affordance appears on hover and stays once sorted */
.ds-table th .sort-icon { opacity: 0; transition: opacity 120ms; }
.ds-table th:hover .sort-icon,
.ds-table th[aria-sort] .sort-icon { opacity: 1; }