'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Datos
Table
Filas y columnas con orden, selección de filas, encabezado fijo, columnas que cambian de ancho, variantes con franjas y con bordes, tarjetas en móvil, virtualización y un estado vacío.
import { Table, TableHeader, Column, TableBody, Row, Cell } from '@alea/ui';
Ejemplos
Orden y selección
Haz clic en un encabezado para ordenar; las casillas seleccionan filas.
Plugin | Kind | Users | Status | |
|---|---|---|---|---|
| Contrast Checker | Accessibility | 3,410 | Live | |
| Palette Generator | Color | 1,240 | Live | |
| Type Scale | Type | 860 | Live | |
| Spec Sheet | Handoff | 120 | Beta | |
| Icon Audit | Icons | 95 | Beta |
0 selected
Encabezado fijo, compacta, redimensionable
Una altura fija hace scroll en el cuerpo; arrastra los bordes de las columnas.
Token | Sample |
|---|---|
--alea-bg | |
--alea-surface | |
--alea-surface-deep | |
--alea-surface-raised | |
--alea-border | |
--alea-border-strong | |
--alea-text | |
--alea-text-muted | |
--alea-text-faint | |
--alea-accent | |
--alea-accent-strong | |
--alea-focus |
Vacía
renderEmptyState para cuando no hay filas.
File | Format |
|---|---|
No exports yetExport tokens from the Figma plugin and they show up here. | |
Rayada, con bordes y tarjetas en teléfonos
variant cambia el aspecto; stackBelow convierte las filas en tarjetas en pantallas pequeñas (cada celda muestra su etiqueta).
Name | Role | City |
|---|---|---|
| Ana Rivas | Designer | Caracas |
| Bruno Díaz | Engineer | Madrid |
| Carla Mendes | Writer | Lisbon |
Name | Role | City |
|---|---|---|
| Ana Rivas | Designer | Caracas |
| Bruno Díaz | Engineer | Madrid |
| Carla Mendes | Writer | Lisbon |
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border…--alea-focus…--alea-surface…--alea-surface-deep…--alea-surface-raised…--alea-text-muted…
Space
--alea-space-2…--alea-space-4…
Radius
--alea-radius-md…
Type
--alea-font-size-md…--alea-font-size-sm…
Props
Table props
Datos en filas y columnas: orden, selección de filas, encabezado fijo, cambio de tamaño, navegación de grilla con el teclado.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
density | "compact" | "comfortable" | 'comfortable' | Filas compact (40 px) o comfortable (52 px, por defecto). |
maxHeight | string | number | - | Altura máxima del área con scroll, por ejemplo 400. |
resizable | boolean | - | Permite arrastrar los bordes de las columnas para cambiar su tamaño. |
stackBelow | "sm" | "md" | - | Por debajo de este breakpoint cada fila pasa a ser una tarjeta, cada celda con la etiqueta de su columna (dale un label a Cell). |
stickyHeader | boolean | - | El encabezado sigue visible mientras el cuerpo tiene scroll (necesita una altura en el contenedor). |
variant | "default" | "striped" | "bordered" | 'default' | default, striped (filas con tonos alternados) o bordered (también líneas entre columnas). |
virtualized | { rowHeight: number; headingHeight?: number; } | - | Muestra solo las filas en pantalla, para miles de filas: altura de fila fija en px (necesita maxHeight). |
Column props
Un encabezado de columna; allowsSorting muestra la flecha de orden y lo hace presionable.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
align | "start" | "end" | "center" | 'start' | Alinea los números a la derecha. |
children | ReactNode | - | Los hijos del componente. Puede ser una función para cambiar los hijos según el estado del componente. |
Row props
Una fila; con selección empieza con una casilla.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
children | ReactNode | - | Los elementos que forman la tabla. Incluye TableHeader, TableBody, Columns y Rows. (heredada) |
className | ClassNameOrFunction<TableRenderProps> | - | El [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) CSS del elemento. Puede ser una función para calcular la clase según el estado del componente. (heredada) |
href | string | - | Una URL a la que enlazar. Ver [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). (heredada) |
id | Key | - | El id único de la columna. (heredada) |
isDisabled | boolean | - | Si la fila está deshabilitada. (heredada) |
onPress | ((e: PressEvent) => void) | - | Se llama cuando se suelta la presión sobre el objetivo. (heredada) |
style | StyleOrFunction<DisclosureGroupRenderProps> | - | El [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) en línea del elemento. Puede ser una función para calcular el estilo según el estado del componente. (heredada) |
target | HTMLAttributeAnchorTarget | - | La ventana de destino del enlace. Ver [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). (heredada) |
textValue | string | - | Una representación en texto del contenido de la columna, usada en los anuncios de accesibilidad. (heredada) |
value | object | - | El objeto que representa esta fila. Con colecciones dinámicas se define automáticamente. (heredada) |
Cell props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
align | "start" | "end" | "center" | - | Alineación del texto: start (por defecto), center, o end para números. |
label | string | - | El nombre de la columna, mostrado antes del valor cuando la tabla se apila en tarjetas (stackBelow). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Table
- Variantes
densitycompactcomfortablestackBelowsmmdvariantdefaultstripedbordered- Estados
- Keyboard focusSelectedHover
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-table.alea-table-wrap- Atributos data
data-stickydata-density=compactdata-variant=stripeddata-variant=bordereddata-virtualizeddata-stackdata-labeldata-stack=mddata-align=enddata-align=center
Column
- Variantes
alignstartendcenter- Estados
- HoverKeyboard focus
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-th.alea-th-inner.alea-th-label.alea-sort.alea-col-resizer- Atributos data
data-stickydata-allows-sortingdata-align=enddata-align=centerdata-direction=ascendingdata-direction=descendingdata-resizingdata-variant=bordereddata-virtualized
Row
- Estados
- HoverSelectedKeyboard focusDisabled
- Motion
- tint
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-tr.alea-td.alea-td-narrow- Atributos data
data-hrefdata-actiondata-density=compactdata-align=enddata-align=centerdata-emptydata-variant=stripeddata-variant=bordereddata-stackdata-labeldata-stack=mddata-virtualized
Cell
- Variantes
alignstartendcenter- Estados
- Keyboard focus
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-td- Atributos data
data-density=compactdata-align=enddata-align=centerdata-emptydata-variant=bordereddata-stackdata-labeldata-stack=mddata-virtualized
Accesibilidad
- Una grilla: las flechas se mueven entre celdas, y el orden se anuncia con aria-sort.
- Marca una columna con isRowHeader para que las filas tengan nombre.
Teclado
| Tecla | Acción |
|---|---|
| Flechas | Se mueven entre celdas |
| Enter (encabezado) | Ordena |
| Espacio | Elige la fila |
| ⌘A / Ctrl+A | Elige todo |
Qué hacer y qué evitar
Hacer
- Alinea los números a la derecha (align="end").
- Usa renderEmptyState.
Evitar
- No uses una tabla para maquetar.