Ejemplos de tablas de datos en React con TanStack Table
Ejemplos de tablas de datos en React: TanStack Table v9 con Tailwind | We.Inc
Ejemplos de TanStack Table v9 para React con comprobación de tipos: ordenación, búsqueda global, paginación, selección de filas, visibilidad de columnas, cabecera fija y datos del servidor, con estilos de Tailwind.
Ejemplos de tablas de datos en React con TanStack Table
TanStack Table es una librería headless de tablas para React: se encarga de ordenar, filtrar, paginar y seleccionar mientras tú escribes el marcado. En la versión 9 registras cada funcionalidad con tableFeatures, añades un row model por cada paso en el cliente, llamas a useTable y renderizas cabeceras y celdas con FlexRender. Los ejemplos de abajo tienen los tipos comprobados contra la 9.3.
Elige un enfoque
Filas
Enfoque
Menos de unas 50, sin interacción
Una tabla HTML simple
De cientos a unos pocos miles
TanStack Table, en el cliente
Decenas de miles o más
TanStack Table con ordenación y paginación manuales (en el servidor)
Páginas únicas muy largas
Añade virtualización de filas
Prueba la tabla terminada y copia el código que la construye. La vista previa de esta página está hecha con estado simple de React para que la página siga siendo ligera; el código de al lado es la versión con TanStack v9 que hace lo mismo en tu app.
Instala @tanstack/react-table.
Enumera las funcionalidades que necesitas en tableFeatures, con un hueco de row model para cada paso que se haga en el navegador.
Define las columnas con createColumnHelper, fuera del componente.
Invoca useTable con las funcionalidades, las columnas y los datos.
Renderiza los grupos de cabecera y las filas con tu propio marcado y FlexRender.
Da a las filas un id estable con getRowId para que la selección se mantenga al ordenar y al volver a cargar datos.
Renderiza row.getVisibleCells(), no getAllCells(), en cuanto actives la ocultación de columnas.
Define una sola vez, fuera del componente, el valor por defecto para datos vacíos; un [] nuevo en cada render invalida los row models.
Pon un botón de ordenar dentro de cada th ordenable para que se pueda usar con el teclado.
Formatea números y fechas en la función de celda para que la ordenación siga usando el valor original.
Preguntas frecuentes
¿React Table es lo mismo que TanStack Table?
Sí. react-table v7 pasó a llamarse TanStack Table a partir de la v8 y se publica como @tanstack/react-table. La versión 9 mantiene la idea headless pero te pide registrar las funcionalidades de forma explícita, lo que reduce el tamaño de los bundles.
¿TanStack Table incluye estilos?
No. Solo te da el estado y los row models. Tú escribes los elementos table, th y td y les das estilo con Tailwind, CSS o una librería de componentes como shadcn/ui.
¿La ordenación y la paginación deben hacerse en el servidor?
Sí, cuando el conjunto de datos completo es demasiado grande para enviarlo al navegador. Activa las opciones manuales, envía el estado de ordenación y de página a tu API y pasa el número total de filas para que funcionen los controles de página.
¿Cómo mantengo visible la cabecera al hacer scroll?
Da al contenedor una altura máxima y overflow auto, y haz el thead sticky con top 0 y un color de fondo para que no se vean las filas a través.
Estilos listos para usar
Si prefieres partir de un diseño terminado, nuestra galería de componentes tiene una tabla de datos con Tailwind con ordenación, búsqueda, selección de filas y paginación que puedes copiar en React o HTML. Para proyectos con shadcn/ui, consulta nuestra guía de formularios y tablas con shadcn.
Errores comunes
Declarar las columnas dentro del componente sin memorizarlas, lo que reconstruye la tabla en cada render.
Activar manualPagination pero seguir pasando todas las filas, de modo que la primera página lo muestra todo.
Invertir el orden dentro de una función de ordenación personalizada. Devuelve una comparación ascendente; la librería la invierte para el orden descendente.
Configura TanStack Table
Instalación
Un solo paquete. No trae estilos ni renderiza nada por sí mismo: tú escribes el marcado de la tabla, y por eso encaja tan bien con Tailwind.
La tabla funcional más pequeña
Las funcionalidades se enumeran al principio y se pasan una sola vez. Mantén estables las funcionalidades, las columnas y el array de datos (fuera del componente o en el estado), o la tabla reconstruirá sus filas en cada render.
Funcionalidades y row models
Qué registrar para cada comportamiento (v9)
Quieres
Funcionalidad
Hueco de row model (cliente)
Ordenar al hacer clic en una cabecera
rowSortingFeature
sortedRowModel: createSortedRowModel()
Un buscador sobre todas las columnas
columnFilteringFeature + globalFilteringFeature
filteredRowModel: createFilteredRowModel()
Filtros por columna
columnFilteringFeature
filteredRowModel: createFilteredRowModel()
Páginas de filas
rowPaginationFeature
paginatedRowModel: createPaginatedRowModel()
Selección con casillas
rowSelectionFeature
Ninguno
Mostrar y ocultar columnas
columnVisibilityFeature
Ninguno
El servidor hace el trabajo
Las mismas funcionalidades
Sin huecos; activa manualSorting, manualFiltering, manualPagination
Todo en un componente, con clases de Tailwind. La fila de cabecera se queda en su sitio porque el contenedor hace scroll y el thead es sticky. aria-sort indica a los lectores de pantalla en qué sentido está ordenada una columna.
Datos del servidor
Ordenación y paginación en el servidor
Con conjuntos de datos grandes, el servidor ordena y devuelve una página. Omite los huecos de row model, activa los flags manuales y pasa rowCount para que la tabla sepa cuántas páginas hay. El estado de ordenación y de página dirige la petición.