跟着官方示例学习 @tanStack-table --- Row Selection

🌲系列一：跟着官方示例学习 @tanStack-table --- Basic

🌲系列二：跟着官方示例学习 @tanStack-table --- Header Groups

🌲系列三：跟着官方示例学习 @tanStack-table --- Column Filters

🌲系列四：跟着官方示例学习 @tanStack-table --- Column Ordering

🌲系列五：跟着官方示例学习 @tanStack-table --- Sticky Column Pinning

🌲系列六：跟着官方示例学习 @tanStack-table --- Column Sizing

🌲系列七：跟着官方示例学习 @tanStack-table --- Expanding

🌲系列八：跟着官方示例学习 @tanStack-table --- Pagination

🌲系列九：跟着官方示例学习 @tanStack-table --- Row Dnd

🌲系列十：跟着官方示例学习 @tanStack-table --- Row Pinning

在表格世界里，"选择困难症" 一向不是什么稀奇事。但别怕，@tanStack/react-table 就像一个可靠的老朋友，早早为你准备好了贴心的行选择功能，无论你要全选、单选、页选，它都能轻松应对！

🧠 行选择：背后的小魔术

通过开启 enableRowSelection，你便启动了整套行选择机制。可以选择性地开启每行的选择按钮，甚至自定义选择的条件，比如只让成年人（age > 18）能被选中，防止熊孩子乱点：

enableRowSelection: true
// 或者： enableRowSelection: row => row.original.age > 18

每一行和表头的复选框都可以通过 getToggleSelectedHandler() 来控制行为，我们用 IndeterminateCheckbox 组件来增强 UX——实现“部分选中”的视觉状态提示。

✅ 三个层级的“选中”逻辑

• 全表选择：选择所有可选的行（跨页也行）

• 当前页选择：仅勾选当前分页的行

• 局部选择：只选你点中的那些

<table>
  <thead>
    {/* 全选 Checkbox */}
    <IndeterminateCheckbox
      checked={table.getIsAllRowsSelected()}
      indeterminate={table.getIsSomeRowsSelected()}
      onChange={table.getToggleAllRowsSelectedHandler()}
    />
  </thead>
  <tfoot>
    {/* 当前页全选 */}
    <IndeterminateCheckbox
      checked={table.getIsAllPageRowsSelected()}
      indeterminate={table.getIsSomePageRowsSelected()}
      onChange={table.getToggleAllPageRowsSelectedHandler()}
    />
  </tfoot>
</table>

可以通过

table.getState().rowSelection

来获取勾选的数据

官方代码地址🔗: @tanStack/react-table