DATA DISPLAY

Table

Memphis-bordered table primitives. Wrap rows in semantic <thead> / <tbody> / <tfoot> sections via the matching components — the outer container handles overflow + borders.

Import

1import {
2  Table,
3  TableHeader,
4  TableBody,
5  TableFooter,
6  TableHead,
7  TableRow,
8  TableCell,
9  TableCaption,
10} from 'damo-ui'

Live preview

Recent invoices
NumberStatusMethodAmount
INV001PaidCard€250
INV002PendingBank transfer€350
INV003FailedCard€400
Total€1,000
1<Table>
2  <TableCaption>Recent invoices</TableCaption>
3  <TableHeader>
4    <TableRow>
5      <TableHead>Number</TableHead>
6      <TableHead>Status</TableHead>
7      <TableHead>Method</TableHead>
8      <TableHead className="text-right">Amount</TableHead>
9    </TableRow>
10  </TableHeader>
11  <TableBody>
12    <TableRow>
13      <TableCell>INV001</TableCell>
14      <TableCell><Badge variant="success">Paid</Badge></TableCell>
15      <TableCell>Card</TableCell>
16      <TableCell className="text-right">€250</TableCell>
17    </TableRow>
18    …
19  </TableBody>
20  <TableFooter>
21    <TableRow>
22      <TableCell colSpan={3}>Total</TableCell>
23      <TableCell className="text-right">€1,000</TableCell>
24    </TableRow>
25  </TableFooter>
26</Table>

Parts

Table sub-components
PropTypeDefaultDescription
Tablewrapper—Outer scrolling container + Memphis border.
TableCaptioncaption—Optional caption rendered below the table.
TableHeaderthead—Sticky-by-default header section.
TableBodytbody—Main data rows.
TableFootertfoot—Bordered totals row.
TableHeadth—Column header cell — uppercase mono text.
TableRowtr—Row with hover + selection states.
TableCelltd—Body cell — pad px-4 py-3 by default.

Accessibility

  • Always include TableCaption when the table conveys data — screen readers announce the caption as the table's name.
  • Each TableHead renders a real <th>; for row-headers add scope="row".
  • For very large tables consider pairing with Pagination and a virtualised body.
← AccordionStat →