Table

El componente, montado

Cómo se usa

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from '@solu30/ui-kit/data-display'

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Salón</TableHead>
      <TableHead>Fecha</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Los Álamos</TableCell>
      <TableCell>Sábado 22</TableCell>
    </TableRow>
  </TableBody>
</Table>

Anatomía

Las partes que componen Table se importan del mismo subpath. Sueltas no significan nada: se montan siempre dentro de su padre.

Table
├── TableBody
├── TableCaption
├── TableCell
├── TableFooter
├── TableHead
├── TableHeader
└── TableRow

Props

El catálogo no extrajo props para este símbolo, y eso admite dos lecturas: que el tipo no declare ninguna propia —heredarlas de un elemento HTML es lo normal en las piezas de composición— o que su interfaz se llame distinto y el extractor no la siga. Los filtros de columna son el segundo caso: declaran cuatro props requeridas en SelectFilterProps.

Ejemplo del paquete

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Cliente</TableHead>
      <TableHead className="text-right">Total</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {filas.map((f) => (
      <TableRow key={f.id} onRowClick={() => abrir(f.id)}>
        <TableCell>{f.cliente}</TableCell>
        <TableCell className="text-right tabular-nums">{formatCurrency(f.total)}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.