行选择与虚拟化表格

使用 id 为 'select' 的选择列，将其添加到您的 ColumnDef 数组中。单元格会渲染一个连接到 row.getToggleSelectedHandler() 的复选框。标题会使用 table.getToggleAllRowsSelectedHandler() 渲染一个全选复选框。

此外，还要将 rowSelection 状态和 onRowSelectionChange 传递给 useReactTable。

当某行当前处于选中状态时，row.getIsSelected() 会返回 true，非常适合为选中的行应用高亮背景样式。

当一个组中只有部分行被选中时，row.getIsSomeSelected() 可以处理复选框的不确定状态，这对分组表格很有用。

table.getSelectedRowModel().rows 会返回一个数组，其中包含当前选中的所有行对象。每一行都有一个 row.original 属性，其中包含原始数据对象。

您可以据此构建针对选中集合执行操作的批量操作按钮，例如“删除所选项”或“导出所选项”。

根据 table.getSelectedRowModel().rows.length > 0 有条件地渲染操作按钮。未选中任何行时，请隐藏或禁用批量操作工具栏，以免用户面对令人困惑的空状态操作。

在界面中显示选中数量：“已选中 {count} 行”，让用户随时了解当前选择。

将 10,000 行渲染为 DOM 节点会非常缓慢。浏览器必须对数千个元素进行布局、绘制和维护，用户会遇到卡顿的滚动效果以及缓慢的初始渲染。

虚拟化只会渲染当前视口中可见的行，从而大幅减小 DOM 规模并提升性能。

请将 @tanstack/react-virtual 与 @tanstack/react-table 一起安装。这两个库彼此独立，但专门设计为相互配合使用。TanStack 表格负责管理数据逻辑；TanStack 虚拟化负责管理哪些项目会被渲染到 DOM 中。

两者的集成点是 table.getRowModel().rows 返回的行数组。

请调用 useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 })。count 决定虚拟项目的数量，使其与当前表格在应用所有筛选后的行数一致。

estimateSize 提供初始行高估值；行渲染后会测量实际高度。

调用 virtualizer.getVirtualItems()，即可获取当前应该位于 DOM 中的行。遍历该数组，通过 table.getRowModel().rows[virtualRow.index] 访问实际行，然后只渲染这些 tr 元素。

每个虚拟项目都有一个 start 属性，用于在滚动容器中进行绝对定位。

为了保持正确的滚动位置，请添加一个顶部间隔 div，其高度等于第一个虚拟项目的 start；再添加一个底部间隔 div，其高度等于总大小减去最后一个项目的结束位置。

这些不可见的 div 会填充未渲染行本应占据的空间，使滚动条比例保持正确。

将 measureElement: el => el.getBoundingClientRect().height 传递给 useVirtualizer，以准确获取动态行高。每一行的引用都会附加到 tr 元素上，以便虚拟化器测量其实际渲染高度。

这样即可处理内容高度不同的行（多行文本、展开的行），而不会发生布局偏移。

TanStack 表格的排序、筛选、分页、行选择和 TanStack 虚拟化可以组合使用。传递给 useVirtualizer 的行数应来自 table.getRowModel().rows，此时所有处于启用状态的行模型都已处理完数据。

启用分页后，应先进行分页，再对当前页面的行进行虚拟化，从而在较大的页面中实现平滑滚动。

哪个方法会返回当前所有选中行的原始数据对象？

行选择使用带有 getToggleSelectedHandler 的复选框列、rowSelection 状态，以及用于访问选中数据的 table.getSelectedRowModel().rows。使用 useVirtualizer 进行虚拟化时，会通过 getVirtualItems、间隔 div 和可选的 measureElement，只渲染可见行。

TanStack 表格的所有功能（排序、筛选、分页和选择）都可以与虚拟渲染整洁地组合。