Skip to main content

Guía de Facetado Global

Ejemplos​

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

API​

API de Facetado Global

Guía de Facetado Global​

El Facetado Global permite generar listas de valores para todas las columnas a partir de los datos de la tabla. Por ejemplo, una lista de valores únicos en una tabla puede generarse a partir de todas las filas en todas las columnas 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 tabla de números para usarla como rango para un componente de filtro de rango deslizante.

Modelos de Fila de Facetado Global​

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

//importa solo los modelos de fila que necesites
import {
  getCoreRowModel,
  getFacetedRowModel,
  getFacetedMinMaxValues, //depende de getFacetedRowModel
  getFacetedUniqueValues, //depende de getFacetedRowModel
} from "@tanstack/react-table";
//...
const table = useReactTable({
  // other options...
  getCoreRowModel: getCoreRowModel(),
  getFacetedRowModel: getFacetedRowModel(), //Modelo de facetado para facetado del lado del cliente (otros métodos de facetado dependen de este modelo)
  getFacetedMinMaxValues: getFacetedMinMaxValues(), //si necesitas valores min/max
  getFacetedUniqueValues: getFacetedUniqueValues(), //si necesitas una lista de valores únicos
  //...
});

Uso de los Modelos de Fila Facetados Globales​

Una vez que hayas incluido los modelos de fila apropiados en las opciones de tu tabla, podrás usar las APIs de la instancia de la tabla 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(
  table.getGlobalFacetedUniqueValues().keys(),
)
  .sort()
  .slice(0, 5000);
// tupla de valores mínimos y máximos para el filtro de rango
const [min, max] = table.getGlobalFacetedMinMaxValues() ?? [0, 1];

Facetado Global Personalizado (del lado del servidor)​

Si en lugar de usar las características de facetado integradas 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 getGlobalFacetedUniqueValues y getGlobalFacetedMinMaxValues para resolver los valores facetados desde el lado del servidor.

const facetingQuery = useQuery(
  "faceting",
  async () => {
    const response = await fetch("/api/faceting");
    return response.json();
  },
  {
    onSuccess: (data) => {
      table.getGlobalFacetedUniqueValues = () => data.uniqueValues;
      table.getGlobalFacetedMinMaxValues = () => data.minMaxValues;
    },
  },
);

En este ejemplo, usamos el hook useQuery de react-query para obtener datos de facetado del servidor. Una vez que se obtienen los datos, configuramos las opciones de tabla getGlobalFacetedUniqueValues y getGlobalFacetedMinMaxValues para que devuelvan los valores facetados de la respuesta del servidor. Esto permitirá que la tabla use los datos de facetado del lado del servidor para generar sugerencias de autocompletado y filtros de rango.