Spalten-Faceting-Leitfaden

Beispiele

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

filters-faceted

Spalten-Faceting ist eine Funktion, die es Ihnen ermöglicht, Listen von Werten für eine bestimmte Spalte aus den Daten dieser Spalte zu generieren. Beispielsweise kann eine Liste eindeutiger Werte in einer Spalte aus allen Zeilen dieser Spalte generiert werden, um als Suchvorschläge in einer Autocomplete-Filterkomponente verwendet zu werden. Oder ein Tupel aus Minimal- und Maximalwerten kann aus einer Spalte mit Zahlen generiert werden, um als Bereich für eine Bereichsschieberegler-Filterkomponente verwendet zu werden.

Spalten-Faceting-Zeilenmodelle

Um eine der Spalten-Faceting-Funktionen nutzen zu können, müssen Sie die entsprechenden Zeilenmodelle in Ihren Tabellenoptionen einschließen.

//only import the row models you need
import {
  getCoreRowModel,
  getFacetedRowModel,
  getFacetedMinMaxValues, //depends on getFacetedRowModel
  getFacetedUniqueValues, //depends on getFacetedRowModel
}
//...
const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getFacetedRowModel: getFacetedRowModel(), //if you need a list of values for a column (other faceted row models depend on this one)
  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
}
//...
const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getFacetedRowModel: getFacetedRowModel(), //if you need a list of values for a column (other faceted row models depend on this one)
  getFacetedMinMaxValues: getFacetedMinMaxValues(), //if you need min/max values
  getFacetedUniqueValues: getFacetedUniqueValues(), //if you need a list of unique values
  //...
})

Zuerst müssen Sie das getFacetedRowModel Zeilenmodell einschließen. Dieses Zeilenmodell generiert eine Liste von Werten für eine bestimmte Spalte. Wenn Sie eine Liste eindeutiger Werte benötigen, schließen Sie das getFacetedUniqueValues Zeilenmodell ein. Wenn Sie ein Tupel aus Minimal- und Maximalwerten benötigen, schließen Sie das getFacetedMinMaxValues Zeilenmodell ein.

Faceted Row Models verwenden

Sobald Sie die entsprechenden Zeilenmodelle in Ihren Tabellenoptionen eingeschlossen haben, können Sie die Spalteninstanz-APIs für das Faceting verwenden, um auf die von den Faceted-Zeilenmodellen generierten Listen von Werten zuzugreifen.

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

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

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

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

Benutzerdefiniertes (Server-seitiges) Faceting

Wenn Sie anstelle der integrierten clientseitigen Faceting-Funktionen Ihre eigene Faceting-Logik serverseitig implementieren und die gefacetteten Werte an die Clientseite übergeben. Sie können die Tabellenoptionen getFacetedUniqueValues und getFacetedMinMaxValues verwenden, um die gefacetteten Werte von der Serverseite aufzulösen.

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];
  },
  //...
})

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];
  },
  //...
})

Alternativ müssen Sie keine Ihrer Faceting-Logiken über die TanStack Table APIs laufen lassen. Rufen Sie einfach Ihre Listen ab und übergeben Sie sie direkt an Ihre Filterkomponenten.

Beispiele

API