Global Faceting Guide

Beispiele

Möchten Sie direkt zur Implementierung springen? Sehen Sie sich diese Beispiele an

filters-faceted

Globales Faceting ermöglicht es Ihnen, Listen von Werten für alle Spalten aus den Daten der Tabelle zu generieren. Zum Beispiel kann eine Liste eindeutiger Werte in einer Tabelle aus allen Zeilen aller Spalten generiert werden, um als Suchvorschläge in einer Autocomplete-Filterkomponente verwendet zu werden. Oder ein Tupel aus Minimal- und Maximalwerten kann aus einer Tabelle mit Zahlen generiert werden, um als Bereich für eine Bereichsschieberegler-Filterkomponente verwendet zu werden.

Globale Faceting-Zeilenmodelle

Um eine der Funktionen für globales Faceting nutzen zu können, müssen Sie die entsprechenden Zeilenmodelle in Ihre Tabellenoptionen aufnehmen.

//only import the row models you need
import {
  getCoreRowModel,
  getFacetedRowModel,
  getFacetedMinMaxValues, //depends on getFacetedRowModel
  getFacetedUniqueValues, //depends on getFacetedRowModel
} from '@tanstack/react-table'
//...
const table = useReactTable({
  // other options...
  getCoreRowModel: getCoreRowModel(),
  getFacetedRowModel: getFacetedRowModel(), //Faceting model for client-side faceting (other faceting methods depend on this model)
  getFacetedMinMaxValues: getFacetedMinMaxValues(), //if you need min/max values
  getFacetedUniqueValues: getFacetedUniqueValues(), //if you need a list of unique values
  //...
})

//only import the row models you need
import {
  getCoreRowModel,
  getFacetedRowModel,
  getFacetedMinMaxValues, //depends on getFacetedRowModel
  getFacetedUniqueValues, //depends on getFacetedRowModel
} from '@tanstack/react-table'
//...
const table = useReactTable({
  // other options...
  getCoreRowModel: getCoreRowModel(),
  getFacetedRowModel: getFacetedRowModel(), //Faceting model for client-side faceting (other faceting methods depend on this model)
  getFacetedMinMaxValues: getFacetedMinMaxValues(), //if you need min/max values
  getFacetedUniqueValues: getFacetedUniqueValues(), //if you need a list of unique values
  //...
})

Globale facetierte Zeilenmodelle verwenden

Sobald Sie die entsprechenden Zeilenmodelle in Ihre Tabellenoptionen aufgenommen haben, können Sie die Faceting-Tabelleninstanz-APIs verwenden, um auf die von den facetierten Zeilenmodellen generierten Wertelisten zuzugreifen.

// list of unique values for autocomplete filter
const autoCompleteSuggestions =
 Array.from(table.getGlobalFacetedUniqueValues().keys())
  .sort()
  .slice(0, 5000);

// list of unique values for autocomplete filter
const autoCompleteSuggestions =
 Array.from(table.getGlobalFacetedUniqueValues().keys())
  .sort()
  .slice(0, 5000);

// tuple of min and max values for range filter
const [min, max] = table.getGlobalFacetedMinMaxValues() ?? [0, 1];

// tuple of min and max values for range filter
const [min, max] = table.getGlobalFacetedMinMaxValues() ?? [0, 1];

Benutzerdefiniertes globales (serverseitiges) Faceting

Wenn Sie stattdessen Ihre eigene Faceting-Logik serverseitig implementieren und die facettierten Werte an die Client-Seite übergeben, anstatt die integrierten clientseitigen Faceting-Funktionen zu verwenden. Sie können die Tabellenoptionen getGlobalFacetedUniqueValues und getGlobalFacetedMinMaxValues verwenden, um die facettierten Werte vom Server aufzulösen.

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

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

In diesem Beispiel verwenden wir den useQuery Hook aus react-query, um Faceting-Daten vom Server abzurufen. Sobald die Daten abgerufen sind, setzen wir die Tabellenoptionen getGlobalFacetedUniqueValues und getGlobalFacetedMinMaxValues, um die facettierten Werte aus der Serverantwort zurückzugeben. Dies ermöglicht es der Tabelle, die serverseitigen Faceting-Daten für die Generierung von Autocomplete-Vorschlägen und Bereichsfiltern zu verwenden.

Beispiele

API