Basic

Columnas sin `meta.cell.variant` se comportan como texto corto por defecto. Doble clic o Enter para editar cualquier celda.

Column groups
Ingeniería
Operaciones
CRM
PLM
ERP
App de campo
Expediente
Diseño
Trámites
Montaje

Cada columna declara su jerarquía en `meta.group`: un arreglo del nivel más externo al más interno, o un solo grupo si basta con un nivel. Las columnas contiguas que comparten la cadena completa se funden en un mismo rótulo, y el `tone` del grupo más interno baja al encabezado y a las celdas. El color entra mezclado contra el fondo, así que el mismo tono sirve en claro y en oscuro. Todo lo demás sigue funcionando: ordenar, redimensionar, editar y copiar/pegar.

Cell variants

Cada columna declara su variante en `meta.cell.variant`: short-text, number, currency, select, checkbox y date. “Categoría” además es `creatable`: si escribes una que no existe, la celda ofrece crearla (y pegar una etiqueta nueva también la da de alta).

Currency cells

`variant: “currency”` con `currency: “USD” | “EUR” | “COP” | “JPY”`. Cada moneda usa su formato nativo y sus decimales (JPY y COP sin decimales). “Total de la orden” es multi-moneda: `getCurrency` la toma de cada fila, así que cambiar la columna “Moneda” reformatea el importe al instante y el código ISO acompaña al símbolo para que `$` nunca sea ambiguo. Al editar se escribe el número crudo, y al pegar se aceptan importes con símbolo, separadores de miles y negativos contables como `(1.234,56)`.

Async options (API)

La columna “Proveedor” no tiene su catálogo en memoria: `loadOptions` lo consulta al servidor mientras escribes (con retardo y estado de carga) y `onCreateOption` devuelve una promesa, así que la celda espera al alta real antes de seleccionar la opción. Escribe un proveedor que no exista para verlo. Pegar una etiqueta nueva también la da de alta y rellena la celda cuando el servidor responde.

Expandable rows

Cada fila es una subasta y `renderRowDetail` despliega su panel, animado con `motion`: los datos de la subasta y, debajo, sus lotes. Los lotes no son otro data-grid: son campos de formulario dispuestos en celdas con un encabezado compartido, para que se lean igual que la tabla de arriba. Se agrega uno con la fila del pie —o con ⌘/Ctrl+Enter desde cualquier campo, y el foco salta al lote nuevo— y se quita con la papelera de su fila; el panel crece o encoge animado y las filas de abajo no saltan, porque el virtualizador mide su alto real. Cambiar la moneda de la subasta actualiza la unidad del precio de sus lotes. La última subasta arranca sin lotes, para ver el estado vacío. Los atajos no se pisan: Shift+N (o ⌘/Ctrl+Enter) crea una fila del grid —otra subasta—, incluso desde dentro de un panel desplegado. Los lotes se agregan con la fila del pie del panel.

Read-only

`readOnly` en `useDataGrid` bloquea edición, borrado y pegado; el ordenamiento, redimensionado, reordenamiento y copiado siguen activos.

Row height

`rowHeight` se pasa a `useDataGrid` y controla el alto estimado por el virtualizador; cambia dinámicamente sin perder el foco.

Column behavior

“ID” tiene `enableSorting: false` y `enableResizing: false` (ancho fijo, sin ordenar); “Cuándo” solo desactiva el ordenamiento. El resto conserva el comportamiento por defecto.

Column pinning & hiding

En el menú (⋮) de cada encabezado puedes fijarla a la izquierda/derecha o ocultarla. Con el botón Columnasvuelves a mostrar las ocultas. “Código” arranca fijada y “Horas de uso” oculta como ejemplo. Este grid además recuerda tu configuración (orden, visibilidad, pinning y anchos) al recargar la página.

Add and remove rows

Pasa el mouse sobre una fila (o navega con las flechas) para ver su checkbox, selecciona una o varias y bórralas con Supr/Backspace o el ícono de basura de la barra que aparece arriba.

Large dataset (virtualized)

Inventario de maquinaria pesada · 240 filas virtualizadas · flechas para navegar · Enter/F2 o doble clic para editar · Shift+flechas para seleccionar rango · Ctrl/⌘+C/X/V para copiar, cortar y pegar (estilo Excel) · Supr para borrar · clic en el encabezado para ordenar · arrastra un encabezado para reordenar columnas · arrastra el borde derecho para redimensionar

Command Palette

Search for a command to run...