Table

Tabla composable de bajo nivel. Combina Table, TableHeader, TableBody, TableRow, TableHead y TableCell para construir cualquier layout: plain o card, densidad cómoda o compacta, filas zebra, hover y cabecera fija. Para sort/filter/paginación usa DataTable.

Juego	Género	Estado	MAU
Wuthering Waves	ARPG	publicado	12,4 M
Honkai: Star Rail	JRPG	publicado	9,7 M
Rinascita Online	MMORPG	beta	2,1 M

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import {  Table, TableHeader, TableBody,  TableRow, TableHead, TableCell,} from "@tsukira/ui"; <Table variant="card" hoverable>  <TableHeader>    <TableRow>      <TableHead>Nombre</TableHead>      <TableHead align="right">Importe</TableHead>    </TableRow>  </TableHeader>  <TableBody>    <TableRow>      <TableCell>Factura #001</TableCell>      <TableCell align="right">€ 1.200</TableCell>    </TableRow>  </TableBody></Table>

Ejemplos#

Variante plain y card

plain (sin borde) · card (borde + radio + sombra sutil)

Producto	Precio
Pase de temporada	€ 9,99
Pack de skins	€ 4,99

Producto	Precio
Pase de temporada	€ 9,99
Pack de skins	€ 4,99

Densidad

comfortable (default) · compact — útil cuando el espacio es limitado

Franquicia	Género	Rating
Kuro Games	ARPG	8,9
HoYoverse	JRPG	9,1
Level-5	Gacha RPG	7,8
Cygames	Táctico	8,3

Hoverable y fila seleccionada

hoverable activa el highlight en hover · selected resalta la fila activa

Nombre	Rol
Ana López	Admin
Bruno Díaz	Editor
Carla Ruiz	Viewer

Fusión: listado de usuarios

Table + Avatar + Badge de estado + Chip de rol

Usuario	Rol	Estado
ALAna López	Admin	activo
BDBruno Díaz	Editor	activo
CRCarla Ruiz	Viewer	inactivo
DMDiego Mora	Viewer	inactivo

Fusión: facturación con acciones por fila

Table + Button ghost para Ver detalle y Descargar por cada factura

Nº Factura	Cliente	Importe	Estado
F-2026-001	Kuro Games SL	€ 28.500	pagada
F-2026-002	HoYoverse Europe	€ 19.200	pendiente
F-2026-003	Level-5 Studios	€ 7.800	vencida

API#

TablePropsextends Omit<TableHTMLAttributes<HTMLTableElement>, 'title'>

Prop	Tipo	Default	Descripción
`variant`	`'plain' \| 'card'`	'plain'	Variante visual. Default 'plain'.
`density`	`'comfortable' \| 'compact'`	'comfortable'	Densidad. Default 'comfortable'.
`striped`	`boolean`	—	Filas alternadas zebra.
`hoverable`	`boolean`	—	Hover en filas.
`stickyHeader`	`boolean`	—	Sticky thead al scrollear.
`maxHeight`	`number \| string`	—	Max-height del wrapper (px o string CSS) — habilita scroll vertical.
`width`	`number \| string`	'100%'	Ancho del wrapper. Default '100%'.

TableRowPropsextends HTMLAttributes<HTMLTableRowElement>

Prop	Tipo	Default	Descripción
`selected`	`boolean`	—	Fila seleccionada (estilo).
`clickable`	`boolean`	—	Fila clicable (cursor + hover).

TableCellPropsextends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>

Prop	Tipo	Default	Descripción
`align`	`'left' \| 'center' \| 'right'`	—	Alineación del contenido.
`truncate`	`boolean`	—	No envolver texto.
`width`	`number \| string`	—	Ancho (px o '20%').

TableEmptyPropsextends HTMLAttributes<HTMLTableCellElement>

Prop	Tipo	Default	Descripción
`colSpan`*	`number`	—	Cuántas columnas span (=colSpan).
`message`	`ReactNode`	—	Mensaje.
`icon`	`ReactNode`	—	Icono.