排序、筛选与分页

要添加排序，请导入 getSortedRowModel，并将其添加到 useReactTable 配置中。您还需要排序状态（一个由 {id, desc} 对象组成的数组），以及连接到 React 状态的 onSortingChange 处理函数。

排序后的行模型会包装核心行模型，并根据当前排序状态重新排列各行。

每个列标题都会提供 column.getToggleSortingHandler()，您可以将其附加到 th 元素的 onClick 上。点击后会依次切换为升序、降序和未排序状态。

column.getIsSorted() 会返回 'asc'、'desc' 或 false，因此您可以据此显示相应的排序指示箭头。

TanStack 表格支持同时按多个列排序。用户在点击第二个列标题时按住上档键，即可将该列添加到排序数组中，而不会移除第一列。

sortingState 数组会按照优先级顺序包含所有处于启用状态的排序列，排序后的行模型会依次应用这些排序。

请导入 getFilteredRowModel，并添加 globalFilter 状态以及 onGlobalFilterChange 处理函数，以启用全局筛选。将输入元素连接到该状态，即可一次筛选所有列。

全局筛选默认使用模糊匹配或包含策略，您可以通过 filterFns 进行配置。

各列可以通过 column.getFilterValue() 和 column.setFilterValue() 提供自己的筛选器。在每个列标题下方添加筛选输入框，并将其连接到这些方法。

列筛选和全局筛选会叠加：各行必须通过所有处于启用状态的筛选条件，才能出现在筛选后的行模型中。

请导入 getPaginationRowModel，并将其与分页状态对象（pageIndex 和 pageSize）以及 onPaginationChange 处理函数一起添加到 useReactTable 配置中。

分页行模型会对经过筛选（以及排序）的行进行切片，只保留当前页面对应的部分。

表格实例提供 table.nextPage()、table.previousPage()、table.firstPage() 和 table.lastPage() 用于页面导航。请使用 table.getCanNextPage() 和 table.getCanPreviousPage()，在到达边界时禁用相应按钮。

table.setPageIndex(n) 可以直接跳转到指定页面；table.setPageSize(n) 可以更改每页显示的行数。

table.getPageCount() 会根据筛选后的行数除以 pageSize，返回页面总数。table.getState().pagination.pageIndex 会提供当前从零开始计算的页面索引。

您可以使用这些值在分页界面中构建类似“第 3 页，共 12 页”的页面计数器。

行模型可以组合使用：getCoreRowModel 提供基础模型，getFilteredRowModel 包装它并应用筛选，getSortedRowModel 包装筛选后的数据并应用排序，而 getPaginationRowModel 则为当前页面切分结果。

顺序很重要：先进行筛选，再进行排序，最后进行分页。

TanStack 表格会在内部缓存行模型的计算结果。对大型数据集进行排序和筛选时效率很高，因为只有发生变化的行模型才会重新计算。

对于超大型数据集（100,000 行以上），请将分页与虚拟化（react-virtual）结合使用，以避免一次性渲染当前页面的所有行。

将 getSortedRowModel 与排序状态连接，将 getFilteredRowModel 与 globalFilter 和列筛选状态连接，并将 getPaginationRowModel 与分页状态连接。每项功能都需要显式启用，并且可以与其他功能整洁地组合。

列标题通过 getToggleSortingHandler 驱动排序；输入框通过 setFilterValue 和 onGlobalFilterChange 驱动筛选；按钮通过 nextPage、previousPage 和 setPageIndex 驱动分页。

TanStack 表格的分页状态中，哪个对象保存当前页面索引和页面大小？

排序需要 getSortedRowModel、排序状态和列标题点击处理函数。筛选使用带有全局筛选状态和逐列筛选状态的 getFilteredRowModel。分页使用带有 pageIndex 和 pageSize 状态的 getPaginationRowModel。

这三个行模型会自动组合：先筛选，再排序，最后分页。