Table

Tabla de datos en tarjeta con cabecera, columnas y pie opcional.

Cuándo usarlo

Props. columns [{key, label, primary, align, render(row)}], rows, title, count, description, actions, footer (p. ej. Pagination), size (md filas de 72px · sm 56px).

Reglas del archivo. Mínima: nada que no sea dato. Una columna principal, la primera, en text-primary medium; el resto en text-tertiary. Las filas se separan con una línea border-secondary. La cabecera de columnas va en bg-secondary, text-xs-semibold, text-quaternary. Las acciones (buscar, exportar, seleccionar) deben verse sin buscarlas. Números a la derecha.

Detalles. Funciona sin JavaScript (Server Component en Next, sin directiva en Astro). La tabla se llama como su título (aria-labelledby). Si es más ancha que su tarjeta, se desplaza en horizontal dentro de una caja que recibe el foco, así que también se recorre con el teclado. Cada fila usa row.id como clave, o su posición si no tiene.

Ejemplos

Movimientos240

Octubre de 2026.

Concepto	Fecha	Estado	Importe
Alquiler	01 oct	Pagado	650,00 €
Electricidad	05 oct	Pagado	48,20 €
Seguro del coche	15 oct	Pendiente	210,00 €
Gimnasio	20 oct	Pendiente	35,00 €

Props

Prop	Tipo	Por defecto	Descripción
`columns`obligatoria	`TableColumn<R>[]`	—
`rows`obligatoria	`R[]`	—	Filas. Si tienen `id`, se usa como clave.
`title`	`ReactNode`	—	Título de la tarjeta; también da nombre a la tabla.
`count`	`ReactNode`	—	Total junto al título, en un `Badge` de marca.
`description`	`ReactNode`	—
`actions`	`ReactNode`	—	Acciones de la cabecera (buscar, exportar): a la vista, sin esconderlas.
`footer`	`ReactNode`	—	Pie, por ejemplo una `Pagination`.
`size`	`"sm" · "md"`	`md`	Alto de fila: `md` 72px · `sm` 56px.
`className`	`string`	—

Código

import { Table } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<Table
				title="Movimientos"
				count="240"
				columns={[
					{ key: "concepto", label: "Concepto", primary: true },
					{ key: "fecha", label: "Fecha" },
					{ key: "importe", label: "Importe", align: "right" },
				]}
				rows={[{ id: "1", concepto: "Alquiler", fecha: "01 oct", importe: "650,00 €" }]}
				footer={<Pagination total={24} />}
			/>
		</>
	);
}

---
import { Table } from "@jotis-me/react";
---

<Table
	title="Movimientos"
	count="240"
	columns={[
		{ key: "concepto", label: "Concepto", primary: true },
		{ key: "fecha", label: "Fecha" },
		{ key: "importe", label: "Importe", align: "right" },
	]}
	rows={[{ id: "1", concepto: "Alquiler", fecha: "01 oct", importe: "650,00 €" }]}
	footer={<Pagination total={24} />}
/>