Fuzzy-Filter-Anleitung

Beispiele

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

filters-fuzzy

Fuzzy-Filterung ist eine Technik, mit der Sie Daten basierend auf ungefähren Übereinstimmungen filtern können. Dies kann nützlich sein, wenn Sie nach Daten suchen möchten, die einem bestimmten Wert ähneln, anstatt einer exakten Übereinstimmung.

Sie können eine clientseitige Fuzzy-Filterung implementieren, indem Sie eine benutzerdefinierte Filterfunktion definieren. Diese Funktion sollte die Zeile, die Spalten-ID und den Filterwert entgegennehmen und einen booleschen Wert zurückgeben, der angibt, ob die Zeile in den gefilterten Daten enthalten sein soll.

Fuzzy-Filterung wird hauptsächlich mit globaler Filterung verwendet, kann aber auch auf einzelne Spalten angewendet werden. Wir werden diskutieren, wie die Fuzzy-Filterung für beide Fälle implementiert wird.

Hinweis: Sie müssen die Bibliothek @tanstack/match-sorter-utils installieren, um Fuzzy-Filterung verwenden zu können. TanStack Match Sorter Utils ist ein Fork von match-sorter von Kent C. Dodds. Er wurde geforkt, um besser mit dem Zeilen-für-Zeilen-Filteransatz von TanStack Table zu funktionieren.

Die Verwendung der match-sorter-Bibliotheken ist optional, aber die TanStack Match Sorter Utils-Bibliothek bietet eine großartige Möglichkeit, sowohl Fuzzy-Filterung als auch Sortierung nach den zurückgegebenen Ranginformationen durchzuführen, sodass Zeilen nach ihrer größten Übereinstimmung mit der Suchanfrage sortiert werden können.

Definieren einer benutzerdefinierten Fuzzy-Filter-Funktion

Hier ist ein Beispiel für eine benutzerdefinierte Fuzzy-Filterfunktion

typescript

import { rankItem } from '@tanstack/match-sorter-utils';
import { FilterFn } from '@tanstack/table';

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

  // Store the itemRank info
  addMeta({ itemRank })

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

import { rankItem } from '@tanstack/match-sorter-utils';
import { FilterFn } from '@tanstack/table';

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

  // Store the itemRank info
  addMeta({ itemRank })

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

In dieser Funktion verwenden wir die Funktion rankItem aus der Bibliothek @tanstack/match-sorter-utils, um das Element zu ranken. Wir speichern dann die Ranginformationen in den Meta-Daten der Zeile und geben zurück, ob das Element die Ranking-Kriterien bestanden hat.

Fuzzy-Filterung mit globaler Filterung verwenden

Um Fuzzy-Filterung mit globaler Filterung zu verwenden, können Sie die Fuzzy-Filterfunktion in der globalFilterFn-Option der Tabelleninstanz angeben

typescript

const table = useReactTable({ // or your framework's equivalent function
    columns,
    data,
    filterFns: {
      fuzzy: fuzzyFilter, //define as a filter function that can be used in column definitions
    },
    globalFilterFn: 'fuzzy', //apply fuzzy filter to the global filter (most common use case for fuzzy filter)
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(), //client side filtering
    getSortedRowModel: getSortedRowModel(), //client side sorting needed if you want to use sorting too.
})

const table = useReactTable({ // or your framework's equivalent function
    columns,
    data,
    filterFns: {
      fuzzy: fuzzyFilter, //define as a filter function that can be used in column definitions
    },
    globalFilterFn: 'fuzzy', //apply fuzzy filter to the global filter (most common use case for fuzzy filter)
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(), //client side filtering
    getSortedRowModel: getSortedRowModel(), //client side sorting needed if you want to use sorting too.
})

Fuzzy-Filterung mit Spaltenfilterung verwenden

Um Fuzzy-Filterung mit Spaltenfilterung zu verwenden, sollten Sie zuerst die Fuzzy-Filterfunktion in der filterFns-Option der Tabelleninstanz definieren. Sie können dann die Fuzzy-Filterfunktion in der filterFn-Option der Spaltendefinition angeben

typescript

const column = [
  {
    accessorFn: row => `${row.firstName} ${row.lastName}`,
    id: 'fullName',
    header: 'Full Name',
    cell: info => info.getValue(),
    filterFn: 'fuzzy', //using our custom fuzzy filter function
  },
  // other columns...
];

const column = [
  {
    accessorFn: row => `${row.firstName} ${row.lastName}`,
    id: 'fullName',
    header: 'Full Name',
    cell: info => info.getValue(),
    filterFn: 'fuzzy', //using our custom fuzzy filter function
  },
  // other columns...
];

In diesem Beispiel wenden wir den Fuzzy-Filter auf eine Spalte an, die die Felder firstName und lastName der Daten kombiniert.

Sortieren mit Fuzzy-Filterung

Wenn Sie Fuzzy-Filterung mit Spaltenfilterung verwenden, möchten Sie möglicherweise auch die Daten basierend auf den Ranginformationen sortieren. Sie können dies tun, indem Sie eine benutzerdefinierte Sortierfunktion definieren

typescript

import { compareItems } from '@tanstack/match-sorter-utils'
import { sortingFns } from '@tanstack/table'

const fuzzySort: SortingFn<any> = (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]?.itemRank!,
      rowB.columnFiltersMeta[columnId]?.itemRank!
    )
  }

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

import { compareItems } from '@tanstack/match-sorter-utils'
import { sortingFns } from '@tanstack/table'

const fuzzySort: SortingFn<any> = (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]?.itemRank!,
      rowB.columnFiltersMeta[columnId]?.itemRank!
    )
  }

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

In dieser Funktion vergleichen wir die Ranginformationen der beiden Zeilen. Wenn die Ränge gleich sind, greifen wir auf alphanumerische Sortierung zurück.

Sie können diese Sortierfunktion dann in der sortFn-Option der Spaltendefinition angeben

typescript

{
  accessorFn: row => `${row.firstName} ${row.lastName}`,
  id: 'fullName',
  header: 'Full Name',
  cell: info => info.getValue(),
  filterFn: 'fuzzy', //using our custom fuzzy filter function
  sortFn: 'fuzzySort', //using our custom fuzzy sort function
}

{
  accessorFn: row => `${row.firstName} ${row.lastName}`,
  id: 'fullName',
  header: 'Full Name',
  cell: info => info.getValue(),
  filterFn: 'fuzzy', //using our custom fuzzy filter function
  sortFn: 'fuzzySort', //using our custom fuzzy sort function
}

Beispiele

API