Globale Filter-APIs

Die Fähigkeit einer Spalte, global gefiltert zu werden, wird durch Folgendes bestimmt

• Die Spalte wurde mit einem gültigen accessorKey/accessorFn definiert.
• Falls angegeben, gibt options.getColumnCanGlobalFilter für die gegebene Spalte true zurück. Wenn sie nicht angegeben ist, wird angenommen, dass die Spalte global filterbar ist, wenn der Wert in der ersten Zeile vom Typ string oder number ist.
• column.enableColumnFilter ist nicht auf false gesetzt
• options.enableColumnFilters ist nicht auf false gesetzt
• options.enableFilters ist nicht auf false gesetzt

Der Filterzustand wird in der Tabelle mit folgender Struktur gespeichert

export interface GlobalFilterTableState {
  globalFilter: any
}

export interface GlobalFilterTableState {
  globalFilter: any
}

Sie können dieselben Filterfunktionen verwenden, die für die Spaltenfilterung verfügbar sind, auch für die globale Filterung. Siehe die Spaltenfilterung, um mehr über Filterfunktionen zu erfahren.

Filterfunktionen können verwendet/referenziert/definiert werden, indem Folgendes an options.globalFilterFn übergeben wird

• Ein String, der eine integrierte Filterfunktion referenziert
• Eine Funktion, die direkt an die Option options.globalFilterFn übergeben wird

Die endgültige Liste der verfügbaren Filterfunktionen für die Option tableOptions.globalFilterFn 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 für andere zukünftige Operationen auf denselben Daten verwendet werden können. Ein gutes Beispiel für dieses Konzept ist ein Rangsystem wie das von match-sorter, das Daten gleichzeitig rangiert, filtert und sortiert. Während Dienstprogramme wie match-sorter für eindimensionale Filter+Sortieraufgaben sehr sinnvoll sind, machen sie die entkoppelte Filter-/Sortierarchitektur des Erstellens einer Tabelle sehr schwierig und langsam zu verwenden.

Damit ein Rang-/Filter-/Sortiersystem mit Tabellen funktioniert, können filterFns optional Ergebnisse mit einem Filter-Metadaten-Wert markieren, der später verwendet werden kann, um die Daten nach Belieben zu sortieren/gruppieren/etc. Dies geschieht durch Aufrufen der addMeta-Funktion, die Ihrer benutzerdefinierten filterFn übergeben wird.

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

import { sortingFns } from '@tanstack/[adapter]-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/[adapter]-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
}

enableGlobalFilter?: boolean

enableGlobalFilter?: boolean

Aktiviert/deaktiviert den globalen Filter für diese Spalte.

getCanGlobalFilter: () => boolean

getCanGlobalFilter: () => boolean

Gibt zurück, ob die Spalte global gefiltert werden kann. Auf false gesetzt, um eine Spalte vom Scannen während der globalen Filterung auszuschließen.

columnFiltersMeta: Record<string, any>

columnFiltersMeta: Record<string, any>

Die Spaltenfilter-Metadaten für die Zeile. Dieses Objekt verfolgt alle 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 filterFn-Option einer Spalte über ihren Schlüssel verwiesen werden kann. Beispiel

declare module '@tanstack/table-core' {
  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/table-core' {
  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 die Filterung von übergeordneten Zeilen nach unten durchgeführt (d. h. wenn eine übergeordnete Zeile herausgefiltert wird, werden auch alle ihre untergeordneten Zeilen herausgefiltert). Wenn diese Option auf true gesetzt wird, erfolgt die Filterung von Blattzeilen nach oben (was bedeutet, dass übergeordnete Zeilen einbezogen werden, solange eine ihrer untergeordneten oder enkelkindigen Zeilen ebenfalls einbezogen wird).

maxLeafRowFilterDepth?: number

maxLeafRowFilterDepth?: number

Standardmäßig wird die Filterung für alle Zeilen durchgeführt (maximale Tiefe 100), unabhängig davon, ob es sich um übergeordnete Zeilen auf der Stammebene oder um die untergeordneten Blattzeilen einer übergeordneten Zeile handelt. Wenn diese Option auf 0 gesetzt wird, wird die Filterung nur auf die übergeordneten Zeilen der Stammebene angewendet, und alle Unterzeilen bleiben ungefiltert. Ähnlich führt das Setzen dieser Option auf 1 dazu, dass die Filterung nur auf untergeordnete Blattzeilen in 1 Ebene angewendet wird und so weiter.

Dies ist nützlich in Situationen, in denen die gesamte Hierarchie von Unterzeilen 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.

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 die serverseitige Filterung ist diese Funktion unnötig und kann ignoriert werden, da der Server das gefilterte Zeilenmodell bereits zurückgeben sollte.
• Für die clientseitige Filterung ist diese Funktion erforderlich. Eine Standardimplementierung wird über den Export von { getFilteredRowModel } eines beliebigen Tabellenadapters bereitgestellt.

Beispiel

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

  getFilteredRowModel: getFilteredRowModel(),
})

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

  getFilteredRowModel: getFilteredRowModel(),
})

globalFilterFn?: FilterFn | keyof FilterFns | keyof BuiltInFilterFns

globalFilterFn?: FilterFn | keyof FilterFns | keyof BuiltInFilterFns

Die Filterfunktion, die für die globale Filterung verwendet werden soll.

Optionen

• Ein String, der auf eine integrierte Filterfunktion verweist
• Ein String, der auf benutzerdefinierte Filterfunktionen verweist, die über die Option tableOptions.filterFns bereitgestellt werden
• Eine benutzerdefinierte Filterfunktion

onGlobalFilterChange?: OnChangeFn<GlobalFilterState>

onGlobalFilterChange?: OnChangeFn<GlobalFilterState>

Wenn angegeben, wird diese Funktion mit einer updaterFn aufgerufen, wenn sich state.globalFilter ändert. Dies überschreibt die standardmäßige interne Zustandsverwaltung, sodass Sie die Zustandsänderung entweder vollständig oder teilweise außerhalb der Tabelle beibehalten müssen.

enableGlobalFilter?: boolean

enableGlobalFilter?: boolean

Aktiviert/deaktiviert den globalen Filter für die Tabelle.

getColumnCanGlobalFilter?: (column: Column<TData>) => boolean

getColumnCanGlobalFilter?: (column: Column<TData>) => boolean

Wenn angegeben, wird diese Funktion mit der Spalte aufgerufen und sollte true oder false zurückgeben, um anzugeben, ob diese Spalte für die globale Filterung verwendet werden soll. Dies ist nützlich, wenn die Spalte Daten enthalten kann, die keine string oder number sind (z. B. undefined).

getPreFilteredRowModel: () => RowModel<TData>

getPreFilteredRowModel: () => RowModel<TData>

Gibt das Zeilenmodell der Tabelle zurück, bevor eine Spaltenfilterung angewendet wurde.

getFilteredRowModel: () => RowModel<TData>

getFilteredRowModel: () => RowModel<TData>

Gibt das Zeilenmodell der Tabelle zurück, nachdem eine Spaltenfilterung angewendet wurde.

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

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

Setzt oder aktualisiert den state.globalFilter-Zustand.

resetGlobalFilter: (defaultState?: boolean) => void

resetGlobalFilter: (defaultState?: boolean) => void

Setzt den globalFilter-Zustand auf initialState.globalFilter zurück, oder es kann true übergeben werden, um ein standardmäßiges leeres Zurücksetzen auf undefined zu erzwingen.

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

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

Derzeit gibt diese Funktion die integrierte includesString-Filterfunktion zurück. In zukünftigen Versionen kann sie dynamischere Filterfunktionen basierend auf der Art der bereitgestellten Daten zurückgeben.

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

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

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