TanStack Table Components Lab

Core mínimo (coreRowModel) con 7 columnas y 500 registros deterministas. El DOM lo construye el módulo: thead/tbody/tfoot con createElement y textContent — sin innerHTML con datos. Footer con suma de horas del modelo. Render por slice de 25 filas; el modelo siempre opera sobre las 500.

—

Headers clicables con getToggleSortingHandler(): clic cicla asc → desc → limpiar; Shift + clic apila una segunda columna (indicador ·n = posición en el orden). aria-sort en cada th, sortFn semántico para estado y prioridad, fecha ISO ordenada cronológica.

Búsqueda global (todas las columnas, entiende etiquetas ES: "bloqueada" encuentra bloqueada) + filtro por columna estado y proyecto, combinados con AND. El contador X de 500 refleja el modelo filtrado real; la suma del footer se recalcula con las filas visibles.

rowPaginationFeature + paginatedRowModel: el getRowModel devuelve la página activa y el modelo pre-paginación conserva las 500. Controles primera/anterior/siguiente/última, "Página X de Y", tamaño de página 10/25/50 y rango real "1–10 de 500". Combinada con orden multicolumna en los mismos headers.

Checkbox por fila y de cabecera con estado indeterminate (parcial). La selección vive en el modelo (no en el DOM): "todos" marca las 500 aunque el render muestre el slice. Con N>0 aparece la barra flotante: Exportar CSV genera el archivo client-side con Blob — BOM UTF-8, delimitador ; y decimales coma para Excel en español — y Limpiar resetea el estado.

Proyecto;Tarea;Responsable;Horas;Fecha;Estado;Prioridad
Intranet Corporativa;QA funcional;María González;3,5;28-08-2026;Completada;Media
Sistema de Facturación;Refactor módulo <auth> & sesión;Javier Moreno;8,0;17-08-2026;En curso;Alta

columnVisibilityFeature + columnOrderingFeature: el panel oculta/muestra columnas con checkboxes y las reordena con los botones ←/→ o arrastrando el item (drag nativo). La tabla reacciona en vivo — headers, celdas y footer siguen el orden y la visibilidad del estado, con contador "X/7 columnas".

columnPinningFeature fija Proyecto al inicio (sticky con sombra sutil que marca el borde flotante) y columnResizingFeature añade handles de arrastre en cada header. Los anchos viven en el estado (columnSizing) y el render los aplica en cada pasada; doble clic en el handle restablece el ancho original.

columnGroupingFeature + groupedRowModel + rowAggregationFeature: filas grupo colapsables "▸ Nombre (N)" con Σ horas agregadas (aggregationFn: 'sum' en la columna). El toggle alterna la agrupación entre Proyecto y Responsable; expandir/colapsar todo opera sobre rowExpandingFeature; los headers siguen ordenando (los grupos heredan el orden).

5.000 registros con windowing manual y cero dependencias extra: el core mantiene el modelo completo; el DOM pinta solo la ventana visible (± overscan) entre dos spacer rows que preservan la altura del scroll. El render se limita a un frame con requestAnimationFrame y la métrica viva muestra cuántas filas existen realmente en el DOM.