Components

Table

Structural primitive for tabular data. Provides Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableFooter, TableCaption. Yuno spacing: header uppercase caption 10px, body cells text-sm px-4 py-3 with row hover.

Updated Jul 10, 2026 by Leonardo Posada

Variants

RuleOutcomeImpactImpacted
High-risk BINBlock8.2%601
IP mismatchReview3.4%254
Velocity > 5Review1.8%132
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Rule</TableHead>
      <TableHead>Outcome</TableHead>
      <TableHead>Impact</TableHead>
      <TableHead className="text-right">Impacted</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map((r) => (
      <TableRow key={r.rule}>
        <TableCell>{r.rule}</TableCell>
        <TableCell>{r.outcome}</TableCell>
        <TableCell>{r.impact}</TableCell>
        <TableCell className="text-right">{r.impacted}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

When to use

  • Any dashboard list where sorting and column alignment matter.
  • Reports, ledgers, and structured records.

When not to use

  • For key-value pairs — use a definition list.
  • For a flat vertical list of items — use a Card list.

Usage

Do
  • Keep row height consistent — the DS default is px-4 py-3.
  • Column alignment: numbers right, everything else left.
Don't
  • Don't stripe rows — hover states cover the same purpose.
  • Don't embed inputs directly in cells without a compact treatment.