SuperAPI AI 工具集

tanstack-table-core-row-selection

前端与建站

查看项目

更新于 10-16 00:02

技能介绍

用途:在 @tanstack/table-core 中管理行选择状态,基于 core 与 table-features,选择状态独立于数据、以 ID 形式保存,选中行模型只能物化已加载的行。

主要能力:通过 rowSelectionFeature 与 tableFeatures 注册;用 getRowId 提供稳定应用 ID;支持单选、多选、子行(enableSubRowSelection)与 Shift 范围选择(默认开启,可用 enableRowRangeSelection: false 关闭)。常用 API 包括 table.getSelectedRowIds()、table.getSelectedRowModel().rows、row.getToggleSelectedHandler()、row.toggleSelected()、table.setRowSelection()、table.toggleAllRowsSelected()、getIsAllRowsSelected()、getIsAllPageRowsSelected()。

用法要点:Shift 范围由 getToggleSelectedHandler() 建立表内锚点,普通交互落锚,Shift 交互对当前显示顺序的闭区间应用勾选值;直接调用 row.toggleSelected() 或 table.setRowSelection() 不会移动锚点。复选框应传入原始 click 事件并使用 click 绑定,因为 DOM change 事件常缺失修饰键(React 可通过 nativeEvent 获取)。getToggleSelectedHandler({ selectChildren: false }) 将范围限制为显式显示行;{ deselectParents: true } 可在取消子行时清理祖先 ID。enableSubRowSelection: false 时全选会跳过阻断父行的后代,全选框仍显示已选;取消全选跳过 enableRowSelection 为 false 的行,需用 toggleAllRowsSelected(false, { deselectAll: true }) 或 resetRowSelection(true) 清空全部。

适用场景:需要数据库级选择意图(用 ID)或仅需当前已加载对象(用行模型)的表格,含子行层级与客户端分页范围选择。

限制:选择状态独立,删除数据后需手动清理无效 ID;不要用可变索引作为 getRowId;手动分页下未加载的选中 ID 无对应 Row 对象,Shift 范围无法跨越未加载的服务器分页,此类全局选择应在应用状态中管理 ID。具体版本与参数细节以本地 node_modules/@tanstack/table-core/dist/features/row-selection/ 为准。