Table

Renders tabular data with header, body, row, head, and cell sub-components. Supports captions and is fully accessible.

Recent invoices from your account.
InvoiceStatusMethodAmount
INV-001PaidCredit Card$250.00
INV-002PendingPayPal$150.00
INV-003UnpaidBank Transfer$350.00

Simple

A minimal table with only a header and body, useful for short lists.

NameEmailRole
John Doejohn@example.comAdmin
Jane Smithjane@example.comUser

Anatomy

  • Table — Wrapper with overflow scroll on small screens.
  • TableHeader — The <thead> element.
  • TableBody — The <tbody> element.
  • TableFooter — The <tfoot> element.
  • TableRow — A <tr> with hover state.
  • TableHead — A <th> cell in the header.
  • TableCell — A <td> data cell.
  • TableCaption — An accessible table caption.

Installation