Guía de Modelos de Fila

Si echas un vistazo al ejemplo más básico de TanStack Table, verás un fragmento de código como este:

import { getCoreRowModel, useReactTable } from "@tanstack/react-table";

function Component() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(), //modelo de fila
  });
}

¿Qué es esta función getCoreRowModel? ¿Y por qué tienes que importarla de TanStack Table solo para pasarla de nuevo a sí misma?

Bueno, la respuesta es que TanStack Table es una librería modular. No todo el código para cada característica se incluye en las funciones/hooks de createTable por defecto. Solo necesitas importar e incluir el código que necesitarás para generar correctamente las filas basándose en las características que quieras usar.

¿Qué son los Modelos de Fila?

Los modelos de fila (Row Models) se ejecutan internamente en TanStack Table para transformar tus datos originales de maneras útiles que son necesarias para características de las grillas de datos como filtrar, ordenar, agrupar, expandir y paginar. Las filas que se generan y renderizan en pantalla no serán necesariamente una correspondencia 1:1 de los datos originales que pasaste a la tabla. Pueden estar ordenadas, filtradas, paginadas, etc.

Importar Modelos de Fila

Solo debes importar los modelos de fila que necesites. Aquí están todos los modelos de fila disponibles:

//solo importa los modelos de fila que necesites
import {
  getCoreRowModel,
  getExpandedRowModel,
  getFacetedMinMaxValues,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFilteredRowModel,
  getGroupedRowModel,
  getPaginationRowModel,
  getSortedRowModel,
}
//...
const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  getFacetedMinMaxValues: getFacetedMinMaxValues(),
  getFacetedRowModel: getFacetedRowModel(),
  getFacetedUniqueValues: getFacetedUniqueValues(),
  getFilteredRowModel: getFilteredRowModel(),
  getGroupedRowModel: getGroupedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
})

Personalizar/Bifurcar Modelos de Fila

No tienes que usar los modelos de fila exactos que proporciona TanStack Table. Si necesitas alguna personalización avanzada para ciertos modelos de fila, siéntete libre de copiar el código fuente del modelo de fila que quieras personalizar y modificarlo según tus necesidades.

Usando Modelos de Fila

Una vez que tu instancia de tabla ha sido creada, puedes acceder a todos los modelos de fila que puedas necesitar directamente desde la instancia de la tabla. Incluso hay más modelos de fila derivados disponibles además de los que podrías haber importado.

Para casos de uso de renderizado normales, probablemente solo necesitarás usar el método table.getRowModel(), ya que este modelo de fila utilizará todos/cualquiera de los otros modelos de fila dependiendo de las características que hayas habilitado o deshabilitado. Todos los demás modelos de fila están disponibles para que puedas "profundizar" en algunas de las transformaciones de datos subyacentes que están ocurriendo en la tabla.

Modelos de Fila Disponibles en la Instancia de la Tabla

getRowModel - Este es el modelo de fila principal que deberías usar para renderizar el marcado de las filas de tu tabla. Usará todos los demás modelos de fila para generar el modelo de fila final que usarás para renderizar las filas de tu tabla.
getCoreRowModel - devuelve un modelo de fila básico que es solo un mapeo 1:1 de los datos originales pasados a la tabla.
getFilteredRowModel - devuelve un modelo de fila que considera el filtrado por columna y el filtrado global.
getPreFilteredRowModel - devuelve un modelo de fila antes de que se apliquen el filtrado por columna y el filtrado global.
getGroupedRowModel - devuelve un modelo de fila que aplica agrupación y agregación a los datos y crea subfilas.
getPreGroupedRowModel - devuelve un modelo de fila antes de que se apliquen la agrupación y la agregación.
getSortedRowModel - devuelve un modelo de fila al que se le ha aplicado la ordenación.
getPreSortedRowModel - devuelve un modelo de fila antes de que se aplique la ordenación (las filas están en su orden original).
getExpandedRowModel - devuelve un modelo de fila que considera las subfilas expandidas/ocultas.
getPreExpandedRowModel - devuelve un modelo de fila que solo incluye filas de nivel raíz sin subfilas expandidas. Aún incluye la ordenación.
getPaginationRowModel - devuelve un modelo de fila que solo incluye las filas que deben mostrarse en la página actual basándose en el estado de paginación.
getPrePaginationRowModel - devuelve un modelo de fila sin paginación aplicada (incluye todas las filas).
getSelectedRowModel - devuelve un modelo de fila de todas las filas seleccionadas (pero solo basándose en los datos que se pasaron a la tabla). Se ejecuta después de getCoreRowModel.
getPreSelectedRowModel - devuelve un modelo de fila antes de que se aplique la selección de filas (Simplemente devuelve getCoreRowModel).
getGroupedSelectedRowModel - devuelve un modelo de fila de las filas seleccionadas después de la agrupación. Se ejecuta después de getSortedRowModel, que se ejecuta después de getGroupedRowModel, que se ejecuta después de getFilteredRowModel.
getFilteredSelectedRowModel - devuelve un modelo de fila de las filas seleccionadas después del filtrado por columna y el filtrado global. Se ejecuta después de getFilteredRowModel.

El Orden de Ejecución de los Modelos de Fila

Saber cómo TanStack Table procesa las filas internamente puede ayudarte a comprender mejor lo que sucede "bajo el capó" y a depurar cualquier problema que puedas encontrar.

Internamente, este es el orden en que cada uno de los modelos de fila se aplica a los datos, si sus respectivas características están habilitadas:

getCoreRowModel -> getFilteredRowModel -> getGroupedRowModel -> getSortedRowModel -> getExpandedRowModel -> getPaginationRowModel -> getRowModel

Si en algún caso la característica respectiva está deshabilitada o desactivada con una opción de tabla "manual*" , se utilizará el getPre*RowModel en su lugar en ese paso del proceso.

Como puedes ver arriba, primero los datos son filtrados, luego agrupados, luego ordenados, luego expandidos, y finalmente paginados como paso final.

Estructura de Datos del Modelo de Fila

Cada modelo de fila te proporcionará las filas en 3 formatos útiles diferentes:

rows - Un array de filas.
flatRows - Un array de filas, pero todas las subfilas están aplanadas en el nivel superior.
rowsById - Un objeto de filas, donde cada fila está identificada por su id. Esto es útil para buscar rápidamente filas por su id con un mejor rendimiento.

console.log(table.getRowModel().rows); // array de filas
console.log(table.getRowModel().flatRows); // array de filas, pero todas las subfilas están aplanadas en el nivel superior
console.log(table.getRowModel().rowsById["row-id"]); // objeto de filas, donde cada fila está identificada por su `id`