列分面指南

列分面指南

示例

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

filters-faceted

API

列分面 API

列分面是一项功能，允许您从给定列的数据中生成该列的值列表。例如，可以从该列中的所有行生成列中唯一值的列表，以用作自动完成过滤器组件中的搜索建议。或者，可以从数字列生成最小值和最大值的元组，以用作范围滑块过滤器组件的范围。

列分面行模型

为了使用任何列分面功能，您必须在表格选项中包含适当的行模型。

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

首先，您必须包含 getFacetedRowModel 行模型。此行模型将为给定列生成值列表。如果您需要唯一值的列表，请包含 getFacetedUniqueValues 行模型。如果您需要最小值和最大值的元组，请包含 getFacetedMinMaxValues 行模型。

使用分面行模型

一旦您在表格选项中包含了适当的行模型，您将能够使用分面列实例 API 来访问由分面行模型生成的值列表。

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

自定义（服务器端）分面

如果您不使用内置的客户端分面功能，而是可以在服务器端实现您自己的分面逻辑，并将分面值传递给客户端。您可以使用 getFacetedUniqueValues 和 getFacetedMinMaxValues 表格选项来从服务器端解析分面值。

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

或者，您不必将任何分面逻辑通过 TanStack Table API。只需获取您的列表并直接将它们传递给您的过滤器组件。

列分面指南

示例

API