componentes / table

Table

Partes de tabla nativa con estilo para datos comparables entre columnas.

Cómo usar

Compón `Table`, `TableCaption`, `TableHeader`, `TableBody`, `TableRow`, `TableHead` y `TableCell`; cada uno corresponde a su elemento nativo y acepta sus props nativas. Nombra la tabla con un `TableCaption` o `aria-label`. `TableHead` usa `scope="col"` por defecto. La ordenación corre por tu cuenta (`aria-sort` más un botón en el encabezado).

preview

Pedidos recientes
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 recientes</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>

Cebra

preview

Camila Souza

Yuki Tanaka

Ada Lovelace

striped

cebra.tsx

<Table striped>…</Table>

Props

Prop	Valores	Predeterminado	Descripción
striped	boolean	false	Fondo cebra en las filas del cuerpo (Table)
wrapperClassName	string	ninguno	Clases del wrapper de scroll (className va en la tabla)
scope	col \| row \| ...	col	Alcance de un TableHead
(nativas)	table / caption / thead / tbody / tr / th / td	ninguno	Todas las props nativas del elemento, className, ref, etc.