Selección de filas y tablas virtualizadas

Añada una columna de selección al array ColumnDef mediante el id 'select'. La celda muestra una casilla de verificación conectada a row.getToggleSelectedHandler(). El encabezado muestra una casilla de verificación para seleccionar todo mediante table.getToggleAllRowsSelectedHandler().

También pase el estado rowSelection y onRowSelectionChange a useReactTable.

row.getIsSelected() devuelve true cuando una fila está seleccionada actualmente, lo que resulta ideal para aplicar un estilo de fondo resaltado a las filas seleccionadas.

row.getIsSomeSelected() gestiona el estado indeterminado de la casilla de verificación cuando solo se han seleccionado algunas filas de un grupo, algo útil en tablas agrupadas.

table.getSelectedRowModel().rows devuelve un array con todos los objetos de fila seleccionados actualmente. Cada fila tiene una propiedad row.original que contiene el objeto de datos original.

Así puede crear botones de acciones masivas que operen sobre el conjunto seleccionado, como "Eliminar seleccionados" o "Exportar seleccionados".

Renderice condicionalmente los botones de acción según table.getSelectedRowModel().rows.length > 0. Cuando no haya filas seleccionadas, oculte o desactive la barra de herramientas de acciones masivas para evitar interacciones confusas en un estado vacío.

Muestre el número de elementos seleccionados en la interfaz: "{count} filas seleccionadas" mantiene a los usuarios informados sobre su selección.

Renderizar 10,000 filas como nodos del DOM es extremadamente lento. El navegador debe calcular el diseño, pintar y mantener miles de elementos. Los usuarios experimentan un desplazamiento entrecortado y renderizados iniciales lentos.

La virtualización renderiza únicamente las filas visibles en el área de visualización, lo que reduce considerablemente el tamaño del DOM y mejora el rendimiento.

Instale @tanstack/react-virtual junto con @tanstack/react-table. Las dos bibliotecas son independientes, pero están diseñadas para complementarse. TanStack Table gestiona la lógica de los datos; TanStack Virtual gestiona qué elementos se renderizan en el DOM.

El punto de integración es el array de filas de table.getRowModel().rows.

Llame a useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }). La propiedad count determina cuántos elementos virtuales existen y coincide con el número actual de filas de la tabla después de aplicar todos los filtros.

estimateSize proporciona una estimación inicial de la altura de las filas; las alturas reales se miden a medida que se renderizan las filas.

Llame a virtualizer.getVirtualItems() para obtener solo las filas que deben estar actualmente en el DOM. Aplique map a este array, acceda a la fila real mediante table.getRowModel().rows[virtualRow.index] y renderice únicamente esos elementos tr.

Cada elemento virtual tiene una propiedad start para su posicionamiento absoluto dentro del contenedor de desplazamiento.

Para mantener la posición de desplazamiento correcta, añada un div espaciador superior con una altura igual a start del primer elemento virtual y un div espaciador inferior con una altura igual al tamaño total menos end del último elemento.

Estos divs invisibles ocupan el espacio que ocuparían las filas no renderizadas y mantienen proporcionalmente correcta la barra de desplazamiento.

Pase measureElement: el => el.getBoundingClientRect().height a useVirtualizer para obtener alturas dinámicas precisas. La referencia de cada fila se asigna al elemento tr para que el virtualizador mida su altura real una vez renderizado.

Esto gestiona filas con contenido de longitud variable (texto de varias líneas, filas expandidas) sin provocar saltos de diseño.

TanStack Table con ordenación, filtrado, paginación, selección de filas y TanStack Virtual se combina correctamente. El número de filas que se pasa a useVirtualizer debe proceder de table.getRowModel().rows después de que todos los modelos de filas activos hayan procesado los datos.

Con la paginación activada, primero se pagina y después se virtualizan las filas de la página actual para obtener un desplazamiento fluido dentro de una página grande.

¿Qué método devuelve los objetos de datos originales de todas las filas seleccionadas actualmente?

La selección de filas utiliza una columna de casillas de verificación con getToggleSelectedHandler, el estado rowSelection y table.getSelectedRowModel().rows para acceder a los datos seleccionados. La virtualización con useVirtualizer renderiza únicamente las filas visibles mediante getVirtualItems, divs espaciadores y measureElement opcional para las alturas dinámicas.

Todas las funciones de TanStack Table (ordenación, filtrado, paginación y selección) se combinan correctamente con el renderizado virtual.