模糊过滤指南

示例

想跳过实现步骤？查看这些示例

filters-fuzzy

API

过滤器 API

模糊过滤是一种允许您基于近似匹配项过滤数据的技术。当您想要搜索与给定值相似的数据，而不是完全匹配项时，这会很有用。

您可以通过定义自定义过滤器函数来实现客户端模糊过滤。此函数应接收行、columnId 和过滤器值，并返回一个布尔值，指示是否应将该行包含在过滤后的数据中。

模糊过滤主要与全局过滤一起使用，但您也可以将其应用于单个列。我们将讨论如何在两种情况下实现模糊过滤。

注意： 您需要安装 @tanstack/match-sorter-utils 库才能使用模糊过滤。TanStack Match Sorter Utils 是 Kent C. Dodds 的 match-sorter 的一个分支。它被分支出来是为了更好地与 TanStack Table 的逐行过滤方法配合使用。

使用 match-sorter 库是可选的，但 TanStack Match Sorter Utils 库提供了一种很好的方法，既可以进行模糊过滤，又可以按其返回的排名信息进行排序，从而可以根据行与搜索查询的最接近匹配项对行进行排序。

定义自定义模糊过滤函数

这是一个自定义模糊过滤函数的示例

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
}

在此函数中，我们使用 @tanstack/match-sorter-utils 库中的 rankItem 函数对项目进行排名。然后，我们将排名信息存储在行的元数据中，并返回项目是否通过了排名标准。

将模糊过滤与全局过滤结合使用

要将模糊过滤与全局过滤结合使用，您可以在表格实例的 globalFilterFn 选项中指定模糊过滤器函数

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.
})

将模糊过滤与列过滤结合使用

要将模糊过滤与列过滤结合使用，您应该首先在表格实例的 filterFns 选项中定义模糊过滤器函数。然后，您可以在列定义的 filterFn 选项中指定模糊过滤器函数

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...
];

在此示例中，我们将模糊过滤器应用于一个列，该列组合了数据的 firstName 和 lastName 字段。

使用模糊过滤进行排序

将模糊过滤与列过滤结合使用时，您可能还希望根据排名信息对数据进行排序。您可以通过定义自定义排序函数来做到这一点

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
}

在此函数中，我们比较了两行的排名信息。如果排名相等，我们将回退到字母数字排序。

然后，您可以在列定义的 sortFn 选项中指定此排序函数

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
}

模糊过滤指南

示例

API