Skip to main content

Guía de Facetado de Columnas

Ejemplos​

¿Quieres saltar a la implementación? Echa un vistazo a estos ejemplos:

API​

API de Facetado de Columnas

Guía de Facetado de Columnas​

El Facetado de Columnas es una característica que te permite generar listas de valores para una columna determinada a partir de los datos de esa columna. Por ejemplo, se puede generar una lista de valores únicos en una columna a partir de todas las filas de esa columna para usarla como sugerencias de búsqueda en un componente de filtro de autocompletado. O bien, se puede generar una tupla de valores mínimos y máximos a partir de una columna de números para usarla como rango para un componente de filtro deslizante de rango.

Modelos de Fila de Facetado de Columnas​

Para poder usar cualquiera de las características de facetado de columnas, debes incluir los modelos de fila apropiados en las opciones de tu tabla.

//solo importa los modelos de fila que necesites
import {
  getCoreRowModel,
  getFacetedRowModel,
  getFacetedMinMaxValues, //depende de getFacetedRowModel
  getFacetedUniqueValues, //depende de getFacetedRowModel
}
//...
const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getFacetedRowModel: getFacetedRowModel(), //si necesitas una lista de valores para una columna (otros modelos de fila facetados dependen de este)
  getFacetedMinMaxValues: getFacetedMinMaxValues(), //si necesitas valores min/max
  getFacetedUniqueValues: getFacetedUniqueValues(), //si necesitas una lista de valores únicos
  //...
})

Primero, debes incluir el modelo de fila getFacetedRowModel. Este modelo de fila generará una lista de valores para una columna dada. Si necesitas una lista de valores únicos, incluye el modelo de fila getFacetedUniqueValues. Si necesitas una tupla de valores mínimos y máximos, incluye el modelo de fila getFacetedMinMaxValues.

Usar Modelos de Fila Facetados​

Una vez que hayas incluido los modelos de fila apropiados en las opciones de tu tabla, podrás usar las API de instancias de columna de facetado para acceder a las listas de valores generadas por los modelos de fila facetados.

// lista de valores únicos para el filtro de autocompletado
const autoCompleteSuggestions = Array.from(
  column.getFacetedUniqueValues().keys(),
)
  .sort()
  .slice(0, 5000);
// tupla de valores mínimos y máximos para el filtro de rango
const [min, max] = column.getFacetedMinMaxValues() ?? [0, 1];

Facetado Personalizado (del Lado del Servidor)​

Si en lugar de usar las características de facetado incorporadas del lado del cliente, puedes implementar tu propia lógica de facetado en el lado del servidor y pasar los valores facetados al lado del cliente. Puedes usar las opciones de tabla getFacetedUniqueValues y getFacetedMinMaxValues para resolver los valores facetados desde el lado del servidor.

const facetingQuery = useQuery();
//...

const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getFacetedRowModel: getFacetedRowModel(),
  getFacetedUniqueValues: (table, columnId) => {
    const uniqueValueMap = new Map<string, number>();
    //...
    return uniqueValueMap;
  },
  getFacetedMinMaxValues: (table, columnId) => {
    //...
    return [min, max];
  },
  //...
});

Alternativamente, no tienes que pasar ninguna de tu lógica de facetado a través de las API de TanStack Table. Simplemente obtén tus listas y pásalas directamente a tus componentes de filtro.