跳到内容
+

数据表格 - 筛选自定义技巧

高级筛选自定义技巧。

在本地存储中持久化筛选器

您可以将筛选器持久化在本地存储中,以便在页面重新加载后保持筛选器的应用状态。

在下面的演示中,使用了 React.useSyncExternalStore hook 来同步本地存储中的筛选器。

网格外部的快速筛选器

快速筛选器 组件通常在数据表格的工具栏组件插槽中使用。

某些用例可能需要在网格外部放置诸如快速筛选器之类的组件。这需要考虑到网格的上下文结构。以下示例展示了如何实现此目的

提前计算筛选后的行数

Grid API 提供了 getFilterState 方法,该方法允许您预先显示预定义筛选器的行数,而无需将筛选器应用于数据表格