如何在Svelte项目的TanStack Table中添加行选择复选框？

1. 基础配置：启用行选择 #

首先在创建表格实例时，通过defineOptions开启行选择功能，支持全选、单选及自定义选择逻辑：

<script>
import { createTable, defineOptions, getCoreRowModel } from '@tanstack/svelte-table';

const columns = [
  // 配置你的表格列，比如：
  { accessorKey: 'name', header: '名称' },
  { accessorKey: 'age', header: '年龄' }
];

const data = [
  { id: 1, name: '张三', age: 28 },
  { id: 2, name: '李四', age: 32 },
  { id: 3, name: '王五', age: 25 }
];

const table = createTable({
  data,
  columns,
  // 启用行选择
  ...defineOptions({
    enableRowSelection: true,
    // 可选：自定义允许选择的行，比如禁用状态的行无法选择
    // selectableRowPredicate: row => row.original.status !== 'disabled'
  }),
  getCoreRowModel: getCoreRowModel(),
});
</script>

2. 表头添加全选复选框 #

在表头最左侧插入复选框，绑定全选/取消全选的事件及状态：

<thead>
  <tr>
    <!-- 全选复选框 -->
    <th>
      <input
        type="checkbox"
        checked={table.getIsAllRowsSelected()}
        indeterminate={table.getIsSomeRowsSelected()}
        on:change={table.getToggleAllRowsSelectedHandler()}
      />
    </th>
    <!-- 渲染其他表头列 -->
    {#each table.getHeaderGroups() as headerGroup}
      {#each headerGroup.headers as header}
        <th>{header.column.id}</th>
      {/each}
    {/each}
  </tr>
</thead>

3. 行内添加选择复选框 #

在每一行的第一列插入复选框，绑定单行选择的事件及状态：

<tbody>
  {#each table.getRowModel().rows as row}
    <tr>
      <!-- 行选择复选框 -->
      <td>
        <input
          type="checkbox"
          checked={row.getIsSelected()}
          on:change={row.getToggleSelectedHandler()}
        />
      </td>
      <!-- 渲染其他数据列 -->
      {#each row.getVisibleCells() as cell}
        <td>{cell.getValue()}</td>
      {/each}
    </tr>
  {/each}
</tbody>

4. 获取选中的行 #

通过table.getSelectedRowModel().rows可以随时获取当前选中的行数据，用于批量操作：

<button on:click={() => {
  const selectedRows = table.getSelectedRowModel().rows;
  console.log('选中的行数据:', selectedRows.map(r => r.original));
  // 这里可以执行批量删除、导出等操作
}}>
  批量处理选中行
</button>

进阶配置 #

• 默认选中行：如果需要页面加载时默认选中某些行，可在defineOptions中设置初始状态：

  defineOptions({
    enableRowSelection: true,
    initialState: {
      rowSelection: {
        '1': true, // 对应data中id为1的行
        '3': true
      }
    }
  })
  

• 自定义行ID：若你的数据不用id作为唯一标识，可配置getRowId指定键名：

  createTable({
    data,
    columns,
    getRowId: row => row.uniqueCode, // 替换为你的数据唯一键字段
    // ...其他配置
  })
  

内容的提问来源于stack exchange，提问作者Jan