Data

Table

Data rows with uppercase header cells and hairline rules; under 640px each row collapses into a label/value card when cells carry a data-label.

Examples

Backup history

RepositoryStatusStartedDurationSize
mishra-shardendu/observatorycompleted2 minutes ago1m 04s412 MB
keploy/keployrunning12 minutes ago——
anthropics/claude-codefailed1 hour ago0m 18s—
vercel/next.jsskipped2 hours ago—6.4 GB
<Card variant="table">
  <TableWrap>
    <Table>
      <thead><tr><th>Repository</th><th>Status</th><th>Started</th><th className="num">Size</th></tr></thead>
      <tbody>
        <tr><td data-label="Repository" className="mono">keploy/keploy</td><td data-label="Status"><StatusBadge status="running" /></td>…</tr>
      </tbody>
    </Table>
  </TableWrap>
</Card>

Guidelines

  • The first column is the row's identity (a repository name in mono) and reads in ink; other cells read in ink-secondary. Numbers go in .num cells, right aligned.
  • A status column holds a StatusBadge; a trailing chevron column marks rows that open a detail page.
  • Put the table in a Card variant="table" so the rules run edge to edge; wrap wide tables in TableWrap.
  • No zebra stripes, no centred text, one action per row at most.

Props

PropTypeWhat it does
widebooleanKeeps a 720px minimum width inside a TableWrap.
data-labelstring on each tdThe label shown when the row collapses under 640px.