components / table

Table

Styled native table parts for comparable data across columns.

How to use

Compose `Table`, `TableCaption`, `TableHeader`, `TableBody`, `TableRow`, `TableHead` and `TableCell`; each maps to its native element and takes its native props. Name the table with a `TableCaption` or `aria-label`. `TableHead` defaults to `scope="col"`. Sorting is up to you (`aria-sort` plus a button in the header).

preview

Recent orders
Order	Customer	Total
#1042	Camila Souza	$120.00
#1043	Yuki Tanaka	$165.00
#1044	Ada Lovelace	$210.00

Table.tsx

import { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell } from "vaiperui";
 
<Table striped>
  <TableCaption>Recent orders</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Order</TableHead>
      <TableHead className="text-right">Total</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>#1042</TableCell>
      <TableCell className="text-right">$120.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Striped

preview

Camila Souza

Yuki Tanaka

Ada Lovelace

striped

striped.tsx

<Table striped>…</Table>

Props

Prop	Values	Default	Description
striped	boolean	false	Zebra background on body rows (Table)
wrapperClassName	string	none	Classes of the scroll wrapper (className goes on the table)
scope	col \| row \| ...	col	Scope of a TableHead
(native)	table / caption / thead / tbody / tr / th / td	none	Every native prop of the element, className, ref, etc.