Spaltenfilter-APIs

Die Fähigkeit einer Spalte, nach **Spalte** gefiltert zu werden, wird durch Folgendes bestimmt:

• Die Spalte wurde mit einem gültigen accessorKey/accessorFn definiert.
• column.enableColumnFilter ist nicht auf false gesetzt
• options.enableColumnFilters ist nicht auf false gesetzt
• options.enableFilters ist nicht auf false gesetzt

Der Filterstatus wird auf der Tabelle mit der folgenden Form gespeichert

export interface ColumnFiltersTableState {
  columnFilters: ColumnFiltersState
}

export type ColumnFiltersState = ColumnFilter[]

export interface ColumnFilter {
  id: string
  value: unknown
}

export interface ColumnFiltersTableState {
  columnFilters: ColumnFiltersState
}

export type ColumnFiltersState = ColumnFilter[]

export interface ColumnFilter {
  id: string
  value: unknown
}

Die folgenden Filterfunktionen sind im Tabellenkern integriert

• includesString
  • Groß-/Kleinschreibungsunempfindliche String-Inklusion
• includesStringSensitive
  • Groß-/Kleinschreibungsabhängige String-Inklusion
• equalsString
  • Groß-/Kleinschreibungsunempfindliche String-Gleichheit
• equalsStringSensitive
  • Groß-/Kleinschreibungsabhängige String-Gleichheit
• arrIncludes
  • Element-Inklusion in einem Array
• arrIncludesAll
  • Alle Elemente in einem Array enthalten
• arrIncludesSome
  • Einige Elemente in einem Array enthalten
• equals
  • Objekt-/Referenzgleichheit Object.is/===
• weakEquals
  • Schwache Objekt-/Referenzgleichheit ==
• inNumberRange
  • Zahlenbereich-Inklusion

Jede Filterfunktion erhält

• Die zu filternde Zeile
• Die columnId zur Abfrage des Zeilenwerts
• Der Filterwert

und sollte true zurückgeben, wenn die Zeile in den gefilterten Zeilen enthalten sein soll, und false, wenn sie entfernt werden soll.

Dies ist die Typsignatur für jede Filterfunktion

export type FilterFn<TData extends AnyData> = {
  (
    row: Row<TData>,
    columnId: string,
    filterValue: any,
    addMeta: (meta: any) => void
  ): boolean
  resolveFilterValue?: TransformFilterValueFn<TData>
  autoRemove?: ColumnFilterAutoRemoveTestFn<TData>
  addMeta?: (meta?: any) => void
}

export type TransformFilterValueFn<TData extends AnyData> = (
  value: any,
  column?: Column<TData>
) => unknown

export type ColumnFilterAutoRemoveTestFn<TData extends AnyData> = (
  value: any,
  column?: Column<TData>
) => boolean

export type CustomFilterFns<TData extends AnyData> = Record<
  string,
  FilterFn<TData>
>

export type FilterFn<TData extends AnyData> = {
  (
    row: Row<TData>,
    columnId: string,
    filterValue: any,
    addMeta: (meta: any) => void
  ): boolean
  resolveFilterValue?: TransformFilterValueFn<TData>
  autoRemove?: ColumnFilterAutoRemoveTestFn<TData>
  addMeta?: (meta?: any) => void
}

export type TransformFilterValueFn<TData extends AnyData> = (
  value: any,
  column?: Column<TData>
) => unknown

export type ColumnFilterAutoRemoveTestFn<TData extends AnyData> = (
  value: any,
  column?: Column<TData>
) => boolean

export type CustomFilterFns<TData extends AnyData> = Record<
  string,
  FilterFn<TData>
>

Diese optionale "hängende" Methode auf jeder gegebenen filterFn ermöglicht es der Filterfunktion, den Filterwert zu transformieren/bereinigen/formatieren, bevor er an die Filterfunktion übergeben wird.

Diese optionale "hängende" Methode auf jeder gegebenen filterFn erhält einen Filterwert und soll true zurückgeben, wenn der Filterwert aus dem Filterstatus entfernt werden soll. Z.B. Einige boolesche Filter können den Filterwert aus dem Tabellenstatus entfernen, wenn der Filterwert auf false gesetzt ist.

Filterfunktionen können durch Übergabe des Folgenden an columnDefinition.filterFn verwendet/referenziert/definiert werden

• Eine Zeichenkette, die sich auf eine integrierte Filterfunktion bezieht
• Eine Funktion, die direkt an die Option columnDefinition.filterFn übergeben wird

Die endgültige Liste der Filterfunktionen, die für die Option columnDef.filterFn verfügbar sind, verwendet den folgenden Typ

export type FilterFnOption<TData extends AnyData> =
  | 'auto'
  | BuiltInFilterFn
  | FilterFn<TData>

export type FilterFnOption<TData extends AnyData> =
  | 'auto'
  | BuiltInFilterFn
  | FilterFn<TData>

Das Filtern von Daten kann oft zusätzliche Informationen über die Daten aufdecken, die zur Unterstützung anderer zukünftiger Operationen auf denselben Daten verwendet werden können. Ein gutes Beispiel für dieses Konzept ist ein Ranking-System wie das von match-sorter, das Daten gleichzeitig rankt, filtert und sortiert. Während Hilfsprogramme wie match-sorter für einzelne Filter+Sortieraufgaben sinnvoll sind, sind sie aufgrund der entkoppelten Filter-/Sortierarchitektur beim Erstellen einer Tabelle sehr schwierig und langsam zu verwenden.

Um ein Ranking-/Filter-/Sortiersystem mit Tabellen zum Laufen zu bringen, können filterFns optional Ergebnisse mit einem **Filter-Metadaten**-Wert markieren, der später zum Sortieren/Gruppieren/usw. der Daten nach Belieben verwendet werden kann. Dies geschieht durch Aufrufen der Funktion addMeta, die Ihrer benutzerdefinierten filterFn zur Verfügung gestellt wird.

Unten finden Sie ein Beispiel, das unser eigenes Paket match-sorter-utils (ein Utility-Fork von match-sorter) verwendet, um die Daten zu ranken, zu filtern und zu sortieren

import { sortingFns } from '@tanstack/react-table'

import { rankItem, compareItems } from '@tanstack/match-sorter-utils'

const fuzzyFilter = (row, columnId, value, addMeta) => {
  // Rank the item
  const itemRank = rankItem(row.getValue(columnId), value)

  // Store the ranking info
  addMeta(itemRank)

  // Return if the item should be filtered in/out
  return itemRank.passed
}

const fuzzySort = (rowA, rowB, columnId) => {
  let dir = 0

  // Only sort by rank if the column has ranking information
  if (rowA.columnFiltersMeta[columnId]) {
    dir = compareItems(
      rowA.columnFiltersMeta[columnId]!,
      rowB.columnFiltersMeta[columnId]!
    )
  }

  // Provide an alphanumeric fallback for when the item ranks are equal
  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
}

import { sortingFns } from '@tanstack/react-table'

import { rankItem, compareItems } from '@tanstack/match-sorter-utils'

const fuzzyFilter = (row, columnId, value, addMeta) => {
  // Rank the item
  const itemRank = rankItem(row.getValue(columnId), value)

  // Store the ranking info
  addMeta(itemRank)

  // Return if the item should be filtered in/out
  return itemRank.passed
}

const fuzzySort = (rowA, rowB, columnId) => {
  let dir = 0

  // Only sort by rank if the column has ranking information
  if (rowA.columnFiltersMeta[columnId]) {
    dir = compareItems(
      rowA.columnFiltersMeta[columnId]!,
      rowB.columnFiltersMeta[columnId]!
    )
  }

  // Provide an alphanumeric fallback for when the item ranks are equal
  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
}

filterFn?: FilterFn | keyof FilterFns | keyof BuiltInFilterFns

filterFn?: FilterFn | keyof FilterFns | keyof BuiltInFilterFns

Die für diese Spalte zu verwendende Filterfunktion.

Optionen

• Eine Zeichenkette, die sich auf eine integrierte Filterfunktion bezieht)
• Eine benutzerdefinierte Filterfunktion

enableColumnFilter?: boolean

enableColumnFilter?: boolean

Aktiviert/deaktiviert den **Spalten**filter für diese Spalte.

getCanFilter: () => boolean

getCanFilter: () => boolean

Gibt zurück, ob die Spalte nach **Spalte** gefiltert werden kann.

getFilterIndex: () => number

getFilterIndex: () => number

Gibt den Index (einschließlich -1) des Spaltenfilters im state.columnFilters-Array der Tabelle zurück.

getIsFiltered: () => boolean

getIsFiltered: () => boolean

Gibt zurück, ob die Spalte derzeit gefiltert ist.

getFilterValue: () => unknown

getFilterValue: () => unknown

Gibt den aktuellen Filterwert der Spalte zurück.

setFilterValue: (updater: Updater<any>) => void

setFilterValue: (updater: Updater<any>) => void

Eine Funktion, die den aktuellen Filterwert für die Spalte setzt. Sie können ihr einen Wert oder eine Updater-Funktion für unveränderlich sichere Operationen an vorhandenen Werten übergeben.

getAutoFilterFn: (columnId: string) => FilterFn<TData> | undefined

getAutoFilterFn: (columnId: string) => FilterFn<TData> | undefined

Gibt eine automatisch berechnete Filterfunktion für die Spalte basierend auf dem ersten bekannten Wert der Spalte zurück.

getFilterFn: (columnId: string) => FilterFn<TData> | undefined

getFilterFn: (columnId: string) => FilterFn<TData> | undefined

Gibt die Filterfunktion (entweder benutzerdefiniert oder automatisch, je nach Konfiguration) für die angegebene columnId zurück.

columnFilters: Record<string, boolean>

columnFilters: Record<string, boolean>

Die Spaltenfilter-Map für die Zeile. Dieses Objekt verfolgt, ob eine Zeile bestimmte Filter anhand ihrer columnID besteht/fehlschlägt.

columnFiltersMeta: Record<string, any>

columnFiltersMeta: Record<string, any>

Die Spaltenfilter-Metadaten-Map für die Zeile. Dieses Objekt verfolgt beliebige Filter-Metadaten für eine Zeile, wie sie optional während des Filtervorgangs bereitgestellt werden.

filterFns?: Record<string, FilterFn>

filterFns?: Record<string, FilterFn>

Diese Option ermöglicht es Ihnen, benutzerdefinierte Filterfunktionen zu definieren, auf die in der Option filterFn einer Spalte über ihren Schlüssel verwiesen werden kann. Beispiel

declare module '@tanstack/[adapter]-table' {
  interface FilterFns {
    myCustomFilter: FilterFn<unknown>
  }
}

const column = columnHelper.data('key', {
  filterFn: 'myCustomFilter',
})

const table = useReactTable({
  columns: [column],
  filterFns: {
    myCustomFilter: (rows, columnIds, filterValue) => {
      // return the filtered rows
    },
  },
})

declare module '@tanstack/[adapter]-table' {
  interface FilterFns {
    myCustomFilter: FilterFn<unknown>
  }
}

const column = columnHelper.data('key', {
  filterFn: 'myCustomFilter',
})

const table = useReactTable({
  columns: [column],
  filterFns: {
    myCustomFilter: (rows, columnIds, filterValue) => {
      // return the filtered rows
    },
  },
})

filterFromLeafRows?: boolean

filterFromLeafRows?: boolean

Standardmäßig wird von übergeordneten Zeilen nach unten gefiltert (d.h., wenn eine übergeordnete Zeile herausgefiltert wird, werden auch alle ihre untergeordneten Zeilen herausgefiltert). Wenn diese Option auf true gesetzt wird, wird von Blattzeilen nach oben gefiltert (was bedeutet, dass übergeordnete Zeilen einbezogen werden, solange eine ihrer untergeordneten oder nachfolgenden Zeilen ebenfalls einbezogen wird).

maxLeafRowFilterDepth?: number

maxLeafRowFilterDepth?: number

Standardmäßig wird für alle Zeilen gefiltert (maximale Tiefe von 100), unabhängig davon, ob es sich um übergeordnete Zeilen der obersten Ebene oder um untergeordnete Blattzeilen einer übergeordneten Zeile handelt. Wenn diese Option auf 0 gesetzt wird, wird die Filterung nur auf die übergeordneten Zeilen der obersten Ebene angewendet, wobei alle Unterzeilen ungefiltert bleiben. Ebenso wird bei einer Einstellung auf 1 die Filterung nur auf untergeordnete Blattzeilen auf einer Ebene angewendet und so weiter.

Dies ist nützlich für Situationen, in denen die gesamte untergeordnete Hierarchie einer Zeile unabhängig vom angewendeten Filter sichtbar sein soll.

enableFilters?: boolean

enableFilters?: boolean

Aktiviert/deaktiviert alle Filter für die Tabelle.

manualFiltering?: boolean

manualFiltering?: boolean

Deaktiviert die Verwendung von getFilteredRowModel zum Filtern von Daten. Dies kann nützlich sein, wenn Ihre Tabelle dynamisch sowohl clientseitige als auch serverseitige Filterung unterstützen muss.

onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>

onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>

Wenn angegeben, wird diese Funktion mit einer updaterFn aufgerufen, wenn sich state.columnFilters ändert. Dies überschreibt die Standard-Internverwaltung, sodass Sie die Statusänderung entweder vollständig oder teilweise außerhalb der Tabelle speichern müssen.

enableColumnFilters?: boolean

enableColumnFilters?: boolean

Aktiviert/deaktiviert **alle** Spaltenfilter für die Tabelle.

getFilteredRowModel?: (
  table: Table<TData>
) => () => RowModel<TData>

getFilteredRowModel?: (
  table: Table<TData>
) => () => RowModel<TData>

Wenn angegeben, wird diese Funktion **einmal** pro Tabelle aufgerufen und sollte eine **neue Funktion** zurückgeben, die das Zeilenmodell für die Tabelle berechnet und zurückgibt, wenn es gefiltert wird.

• Für serverseitige Filterung ist diese Funktion nicht erforderlich und kann ignoriert werden, da der Server das gefilterte Zeilenmodell bereits zurückgeben sollte.
• Für clientseitige Filterung ist diese Funktion erforderlich. Eine Standardimplementierung wird über den Export { getFilteredRowModel } jedes Tabellenadapters bereitgestellt.

Beispiel

import { getFilteredRowModel } from '@tanstack/[adapter]-table'


  getFilteredRowModel: getFilteredRowModel(),
})

import { getFilteredRowModel } from '@tanstack/[adapter]-table'


  getFilteredRowModel: getFilteredRowModel(),
})

setColumnFilters: (updater: Updater<ColumnFiltersState>) => void

setColumnFilters: (updater: Updater<ColumnFiltersState>) => void

Setzt oder aktualisiert den Status state.columnFilters.

resetColumnFilters: (defaultState?: boolean) => void

resetColumnFilters: (defaultState?: boolean) => void

Setzt den Status columnFilters auf initialState.columnFilters zurück, oder es kann true übergeben werden, um einen Standard-Leerzustand auf [] zurückzusetzen.

getPreFilteredRowModel: () => RowModel<TData>

getPreFilteredRowModel: () => RowModel<TData>

Gibt das Zeilenmodell für die Tabelle zurück, bevor ein **Spalten**filter angewendet wurde.

getFilteredRowModel: () => RowModel<TData>

getFilteredRowModel: () => RowModel<TData>

Gibt das Zeilenmodell für die Tabelle zurück, nachdem **Spalten**filter angewendet wurden.