Table

Data tables with data-slot hooks for tests.

Composition

A header row of TableHead, body rows of TableCell. Rows draw a bottom border and tint on hover. The last body row drops its border.

Collateral	Amount	Debt	Health
pondSOL	1,240.00	62,000	Healthy
SOL	310.50	18,400	Healthy
wBTC	0.42	11,900	Pending

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Collateral</TableHead>
      <TableHead>Amount</TableHead>
      <TableHead>Debt</TableHead>
      <TableHead>Health</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow data-testid="positions-row-pondsol">
      <TableCell>pondSOL</TableCell>
      <TableCell>1,240.00</TableCell>
      <TableCell>62,000</TableCell>
      <TableCell><Badge variant="success">Healthy</Badge></TableCell>
    </TableRow>
  </TableBody>
</Table>

Caption and footer

The caption renders below the table. The footer is a muted band with medium weight for totals.

Open positions, mainnet.
Collateral	Amount	Debt	Health
pondSOL	1,240.00	62,000	Healthy
SOL	310.50	18,400	Healthy
wBTC	0.42	11,900	Pending
Total		92,300

<Table>
  <TableCaption>Open positions, mainnet.</TableCaption>
  <TableHeader>...</TableHeader>
  <TableBody>...</TableBody>
  <TableFooter>
    <TableRow>
      <TableCell>Total</TableCell>
      <TableCell />
      <TableCell>92,300</TableCell>
      <TableCell />
    </TableRow>
  </TableFooter>
</Table>

Slots

Every part carries a data-slot for playwright: table-container, table, table-header, table-body, table-footer, table-row, table-head, table-cell, table-caption. Put a data-testid on the row you assert on.

The container scrolls sideways when the table is wider than the page. Cells never wrap, so a long row scrolls instead of breaking.

Props

Each part is its native element with the part's style. Table takes the table attributes, TableRow the tr attributes, and so on.

childrenReactNode

TableCaption, TableHeader, TableBody, TableFooter. Rows are TableRow, with TableHead in the header and TableCell elsewhere.

classNamestring

Appended after the table's own classes. Every part takes one. A bridge for tailwind product code.

styleCSSProperties

Merged over the part's own style. Every part takes one.