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

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.

`meta.cellTone` tiñe una celda según el estado de su fila, no la columna entera. Aquí un precio digitado espera validación en ámbar y pasa a verde cuando alguien lo confirma con el botón de la propia celda; una fila sin precio se queda con el tinte de su grupo “Cotización”. El color es una lectura del dato, no estado del grid: por eso reescribir un precio ya confirmado lo devuelve a ámbar solo. Devuelve un tono con nombre o cualquier color CSS —`var(--warning)`, `var(--success)`— y, con `{ tone, intensity }`, cuánto pesa: el pendiente va en 22 porque pide una acción, el confirmado se queda en los 14 de por defecto y retrocede hacia el fondo. Siempre es una mezcla contra el fondo (tope 30), nunca color plano, para que el dato conserve su contraste en claro y en oscuro.

Cada columna declara su variante en `meta.cell.variant`: short-text, number, currency, select, multi-select, checkbox, date y time. “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). “Etiquetas” guarda un `string[]`: marcar no cierra la lista y todo lo marcado se confirma junto al cerrarla.

`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)`.

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.

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.

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

`meta.cell.readOnly` apaga una columna entera —“Folio” lo asigna el servidor— y `meta.cell.isRowReadOnly` la apaga fila por fila: “Tipo de servicio” solo se edita en las dos últimas, que aún son borradores (resaltadas con `getRowClassName`). Ambas cierran los cuatro caminos de escritura (editar, escribir encima, Supr y pegar); enfocar, seleccionar y copiar siguen funcionando. El candado del encabezado y el `title` de la celda salen de `readOnlyHint`: pasá el puntero por una celda apagada para leer la regla.

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

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

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.

240 máquinas, 10 por página. Buscar vuelve a la primera página (cambia el conjunto); ordenar por una columna no, porque son las mismas filas en otro orden.

Cargando página… Con `manualPagination` el grid muestra las filas tal cual llegan y usa `rowCount` para saber cuántas páginas hay.

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.

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