'/%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}
DatosAlea Pro
DataGrid
Una grilla de datos completa: búsqueda, filtros por columna, orden, visibilidad de columnas, columnas fijas, densidad, selección con acciones masivas, edición en línea, filas expandibles, datos en árbol, fila de resumen, carga, paginación o virtualización, y exportación a CSV.
import { DataGrid } from '@alea/pro';
Ejemplos
Todo activado
Busca, ordena, oculta columnas, cambia la densidad, selecciona filas para acciones masivas, edita nombres en línea, pagina y exporta.
Plugin | Kind | Users | Status | |
|---|---|---|---|---|
| Color | 40 | Beta | ||
| Accessibility | 437 | Live | ||
| Type | 834 | Live | ||
| Handoff | 1,231 | Live | ||
| Icons | 1,628 | Live | ||
| Tokens | 2,025 | Beta | ||
| Color | 2,422 | Live | ||
| Accessibility | 2,819 | Live |
28 filas
Solo lectura
Sin selección, sin edición, todas las filas: una lista que se puede ordenar y buscar.
Token | Dark | Light |
|---|---|---|
| accent/default | #cd57ff | #940dc2 |
| text/default | #f7f7f7 | #111011 |
| surface/default | #1d1c1b | #ffffff |
| status/success | #3ddc84 | #006535 |
Filas expandibles y datos en árbol
renderDetail abre una fila de detalle bajo cada fila; childRows muestra los hijos con sangría.
Detalles | Order | Customer | Total | Status |
|---|---|---|---|---|
| A-1042 | Northwind | $1240 | Paid | |
| A-1043 | Globex | $320 | Pending | |
| A-1044 | Initech | $2980 | Paid |
Name | Size |
|---|---|
| src | 820 KB |
| docs | 210 KB |
Filtros, columnas fijas y un resumen
Filtra por equipo o nombre, mantén Name fija al desplazarte de lado, totales abajo.
Name | Team | Tasks | Hours | Score | City | |
|---|---|---|---|---|---|---|
| Ana Rivas | Design | 4 | 20 | 60 | Caracas | |
| Bruno Díaz | Code | 11 | 33 | 77 | Madrid | |
| Carla Mendes | Docs | 7 | 21 | 94 | Lisbon | |
| Dario Silva | Design | 14 | 34 | 71 | Bogotá | |
| Eva Lin | Code | 10 | 22 | 88 | Caracas | |
| Resumen | 8 | 74 | 224 | 79.5 |
8 filas
5.000 filas, virtualizadas
Solo se dibujan las filas en pantalla; el scroll sigue fluido. La búsqueda y el orden siguen cubriendo todas las filas.
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-accent-subtle…--alea-border-strong…--alea-surface…--alea-surface-deep…--alea-surface-hover…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-6…
Radius
--alea-radius-full…
Type
--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-ease-emphasized…--alea-motion-ease-out…
Props
DataGrid props
Una grilla de datos completa: búsqueda, filtros por columna, orden, visibilidad y fijado de columnas, densidad, selección con acciones masivas, edición en línea, filas expandibles, datos en árbol, fila de resumen, paginación o virtualización, y exportación a CSV.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-labelobligatoria | string | - | Nombre de la grilla para lectores de pantalla. |
columnsobligatoria | GridColumn<T>[] | - | Las columnas: key, label, y opcionalmente format, render, sortable, editable, hidden, align, width, filter, pinned, summary. |
rowsobligatoria | T[] | - | Las filas; cada una necesita un id único. |
bulkActions | ((selected: T[]) => ReactNode) | - | Botones de la barra que actúan sobre las filas seleccionadas. |
childRows | ((row: T) => T[]) | - | Datos en árbol: los hijos de una fila, mostrados con sangría cuando se abre. |
className | string | - | Clases extra para el elemento raíz. |
emptyTitle | ReactNode | - | Se muestra cuando no hay filas (o ninguna coincide). |
exportName | string | null | 'data.csv' | Nombre de archivo para Exportar. Por defecto "data.csv". Déjalo en null para ocultar Exportar. |
isLoading | boolean | - | Muestra filas de esqueleto mientras cargan los datos. |
onCellEdit | ((row: T, key: keyof T, value: string) => boolean | void) | - | Se llama cuando se edita una celda: devuelve false para rechazar el valor. |
pageSize | number | 10 | Filas por página. Por defecto 10; 0 muestra todas. |
renderDetail | ((row: T) => ReactNode) | - | Filas expandibles: lo que se muestra bajo una fila cuando se abre (maestro-detalle). |
selectionMode | "single" | "multiple" | "none" | 'multiple' | Selección de filas none, single o multiple. Por defecto multiple. |
stackBelow | "sm" | "md" | - | Por debajo de este breakpoint las filas pasan a ser tarjetas. |
virtualized | number | - | Muestra solo las filas en pantalla (sin paginación): para miles de filas. La altura de fila en px. |
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.
- Variantes
selectionModesinglemultiplenonestackBelowsmmd- Estados
- Hover (CSS)Disabled
- 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-pin.alea-grid-toggle.alea-grid-tree.alea-grid-toggle-space.alea-datagrid.alea-datagrid-bar.alea-datagrid-search.alea-datagrid-tools.alea-datagrid-bulk.alea-datagrid-filters.alea-th-narrow.alea-datagrid-loading
Accesibilidad
- Basada en Table: una grilla con flechas entre celdas y aria-sort.
- Las celdas editables son botones llamados "valor, editar columna de fila"; Enter guarda, Escape cancela, y un valor rechazado se marca como inválido.
- La barra de herramientas es un toolbar con nombre.
Teclado
| Tecla | Acción |
|---|---|
| Flechas | Se mueven entre celdas |
| Enter (en una celda editable) | Edita; Enter otra vez guarda |
| Escape | Cancela la edición |
| Espacio | Elige la fila |
Qué hacer y qué evitar
Hacer
- Marca una columna con isRowHeader.
- Devuelve false desde onCellEdit para rechazar un valor.
Evitar
- No la uses para pocas filas: Table es más liviana.
En Figma
Plantilla de grilla de datos con barra de herramientas, encabezado, filas en tres estados y paginación.