Ordenación, filtrado y paginación

Para añadir la ordenación, importe getSortedRowModel y añádalo a la configuración de useReactTable. También necesita un estado de ordenación (un array de objetos {id, desc}) y un controlador onSortingChange conectado al estado de React.

El modelo de filas ordenado envuelve el modelo de filas principal y reordena las filas según el estado de ordenación actual.

Cada encabezado de columna expone column.getToggleSortingHandler(), que debe asignar al onClick de su elemento th. Al hacer clic, se alterna entre los estados ascendente, descendente y sin ordenar.

column.getIsSorted() devuelve 'asc', 'desc' o false, lo que permite mostrar la flecha indicadora de ordenación adecuada.

TanStack Table admite ordenar por varias columnas simultáneamente. Los usuarios mantienen pulsada la tecla Shift mientras hacen clic en el encabezado de una segunda columna para añadirla al array de ordenación sin quitar la primera.

El array sortingState contiene todas las columnas con ordenación activa en orden de prioridad, y el modelo de filas ordenado las aplica secuencialmente.

Active el filtrado global importando getFilteredRowModel y añadiendo el estado globalFilter, además de un controlador onGlobalFilterChange. Conecte un elemento input al estado para filtrar todas las columnas a la vez.

De forma predeterminada, el filtro global utiliza una estrategia de coincidencia difusa o de inclusión, configurable mediante filterFns.

Las columnas individuales pueden ofrecer sus propios filtros mediante column.getFilterValue() y column.setFilterValue(). Añada un campo de filtrado debajo de cada encabezado de columna y conéctelo a estos métodos.

Los filtros de columna y los filtros globales se acumulan: las filas deben superar todos los filtros activos para aparecer en el modelo de filas filtrado.

Importe getPaginationRowModel y añádalo a la configuración de useReactTable junto con un objeto de estado de paginación (pageIndex y pageSize) y un controlador onPaginationChange.

El modelo de filas paginado divide las filas filtradas (y ordenadas) para mostrar únicamente el segmento correspondiente a la página actual.

La instancia de la tabla expone table.nextPage(), table.previousPage(), table.firstPage() y table.lastPage() para la navegación. Use table.getCanNextPage() y table.getCanPreviousPage() para desactivar los botones en los límites.

table.setPageIndex(n) salta directamente a una página específica; table.setPageSize(n) cambia cuántas filas aparecen por página.

table.getPageCount() devuelve el número total de páginas a partir del número de filas filtradas dividido por pageSize. table.getState().pagination.pageIndex proporciona el índice actual de la página, basado en cero.

Use estos valores para crear un contador de páginas como "Página 3 de 12" en la interfaz de paginación.

Los modelos de filas se componen: getCoreRowModel proporciona la base, getFilteredRowModel la envuelve aplicando los filtros, getSortedRowModel envuelve los datos filtrados aplicando la ordenación y getPaginationRowModel divide el resultado para mostrar la página actual.

El orden es importante: primero se filtra, después se ordena y la paginación se aplica al final.

TanStack Table aplica memoización internamente a los cálculos de los modelos de filas. Ordenar y filtrar conjuntos de datos grandes es eficiente porque solo se vuelven a calcular los modelos de filas que han cambiado.

Para conjuntos de datos extremadamente grandes (100,000+ filas), combine la paginación con la virtualización (react-virtual) para evitar renderizar todas las filas de la página a la vez.

Conecte getSortedRowModel al estado de ordenación, getFilteredRowModel a globalFilter y a los estados de filtros de columna, y getPaginationRowModel al estado de paginación. Cada función se activa de forma optativa y se combina correctamente con las demás.

Los encabezados de columna controlan la ordenación mediante getToggleSortingHandler; los campos de entrada controlan el filtrado mediante setFilterValue y onGlobalFilterChange; los botones controlan la paginación mediante nextPage, previousPage y setPageIndex.

¿Qué objeto contiene el índice de la página actual y el tamaño de página en el estado de paginación de TanStack Table?

La ordenación requiere getSortedRowModel, el estado de ordenación y controladores de clic en los encabezados de columna. El filtrado utiliza getFilteredRowModel con el estado de los filtros globales y por columna. La paginación utiliza getPaginationRowModel con el estado pageIndex y pageSize.

Los tres modelos de filas se combinan automáticamente: primero se filtra, después se ordena y al final se pagina.