Ir al contenido
sebs7n-ui0.1.1
Contenido y datosServer Component

Table

Una tabla de datos: cabecera con banda, columnas numéricas alineadas a la derecha y densidad compacta.

Ver como .mdVer el código
import { Table, TableBody, TableCaption, TableCell, … } from "sebs7n-ui/table"

Ejemplos

Con números a la derecha

`numeric` alinea a la derecha y usa cifras tabulares: las columnas de plata se comparan de un vistazo.

Facturas emitidas en septiembre.
NºClienteEstadoImporte
0012Acme S.A.Pagada$ 128.400
0013Nube DigitalPendiente$ 96.000
0014Estudio RuizVencida$ 41.200
Total$ 265.600
import { Badge } from "sebs7n-ui/badge"
import { Button } from "sebs7n-ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "sebs7n-ui/dropdown-menu"
import { MoreHorizontalIcon } from "lucide-react"
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "sebs7n-ui/table"

function Basico() {
  return (
    <Table>
      <TableCaption>Facturas emitidas en septiembre.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Nº</TableHead>
          <TableHead>Cliente</TableHead>
          <TableHead>Estado</TableHead>
          <TableHead numeric>Importe</TableHead>
          <TableHead className="w-12" />
        </TableRow>
      </TableHeader>
      <TableBody>
        {FACTURAS.map((factura) => (
          <TableRow key={factura.id}>
            <TableCell className="text-label-13-mono">{factura.id}</TableCell>
            <TableCell>{factura.cliente}</TableCell>
            <TableCell>
              <Badge color={factura.color} size="sm">
                {factura.estado}
              </Badge>
            </TableCell>
            <TableCell numeric>{factura.importe}</TableCell>
            <TableCell>
              <DropdownMenu>
                <DropdownMenuTrigger
                  render={<Button aria-label={`Acciones de la factura ${factura.id}`} size="icon-sm" variant="ghost" />}
                >
                  <MoreHorizontalIcon />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem>Ver</DropdownMenuItem>
                  <DropdownMenuItem>Descargar PDF</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell numeric>$ 265.600</TableCell>
          <TableCell />
        </TableRow>
      </TableFooter>
    </Table>
  )
}

Densidad compacta

Para más de ~20 filas visibles.

NºClienteImporte
0012Acme S.A.$ 128.400
0013Nube Digital$ 96.000
0014Estudio Ruiz$ 41.200
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "sebs7n-ui/table"

function Compacta() {
  return (
    <Table density="compact">
      <TableHeader>
        <TableRow>
          <TableHead>Nº</TableHead>
          <TableHead>Cliente</TableHead>
          <TableHead numeric>Importe</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {FACTURAS.map((factura) => (
          <TableRow key={factura.id}>
            <TableCell className="text-label-13-mono">{factura.id}</TableCell>
            <TableCell>{factura.cliente}</TableCell>
            <TableCell numeric>{factura.importe}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Table

Hereda las props de <table>.

PropTipoPor defectoDescripción
density"default" | "compact""default"compact baja el alto de fila. Para listas largas.
classNamestring—

TableBody

Hereda las props de <tbody>.

PropTipoPor defectoDescripción
classNamestring—

TableCaption

Hereda las props de <caption>.

PropTipoPor defectoDescripción
classNamestring—

TableCell

Hereda las props de <td>.

PropTipoPor defectoDescripción
numericbooleanfalseAlinea a la derecha con cifras tabulares. Tiene que coincidir con el TableHead.
classNamestring—

TableFooter

Hereda las props de <tfoot>.

PropTipoPor defectoDescripción
classNamestring—

TableHead

Hereda las props de <th>.

PropTipoPor defectoDescripción
numericbooleanfalseAlinea a la derecha con cifras tabulares.
classNamestring—

TableHeader

Hereda las props de <thead>.

PropTipoPor defectoDescripción
classNamestring—

TableRow

Hereda las props de <tr>.

PropTipoPor defectoDescripción
classNamestring—

Teclado

Tab
Recorre los controles de las celdas, no las celdas.
—
No es una grilla: si necesitás navegar celda por celda con flechas, hace falta una data grid de verdad.

Accesibilidad

  • Emite <table> nativa: el lector anuncia filas y columnas sin ayuda.
  • TableCaption es el nombre de la tabla. Si el título ya está arriba en un PageHeader, asocialo con aria-labelledby.
  • TableHead con numeric alinea a la derecha y usa cifras tabulares: las columnas de plata se comparan de un vistazo.
  • Una tabla sin <thead> no es una tabla: es una lista.

Reglas de uso

  • Números a la derecha con `numeric`, texto a la izquierda. Nunca centrado.
  • density="compact" para más de ~20 filas visibles.
  • En mobile una tabla de más de 3 columnas no entra: o hacés scroll horizontal con la primera columna fija, o cambiás a tarjetas.
  • Las acciones de fila van en la última columna, en un DropdownMenu, no como tres botones sueltos.
  • El thead y el tfoot usan bg-background-200: es la banda, no la superficie.

Relacionados

CardBadgeEmptyStateSkeleton