componentes / table

Table

Partes de tabela nativa estilizadas para dados comparáveis entre colunas.

Como usar

Componha `Table`, `TableCaption`, `TableHeader`, `TableBody`, `TableRow`, `TableHead` e `TableCell`; cada um mapeia ao elemento nativo e aceita suas props nativas. Nomeie a tabela com um `TableCaption` ou `aria-label`. `TableHead` usa `scope="col"` por padrão. A ordenação fica por sua conta (`aria-sort` mais um botão no cabeçalho).

preview

Pedidos recentes
Pedido	Cliente	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>Pedidos recentes</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Pedido</TableHead>
      <TableHead className="text-right">Total</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>#1042</TableCell>
      <TableCell className="text-right">$120.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Zebrada

preview

Camila Souza

Yuki Tanaka

Ada Lovelace

striped

zebrada.tsx

<Table striped>…</Table>

Props

Prop	Valores	Padrão	Descrição
striped	boolean	false	Fundo zebrado nas linhas do corpo (Table)
wrapperClassName	string	nenhum	Classes do wrapper de rolagem (className vai na tabela)
scope	col \| row \| ...	col	Escopo de um TableHead
(nativas)	table / caption / thead / tbody / tr / th / td	nenhum	Todas as props nativas do elemento, className, ref etc.