Tanstack Table：实现行可点击但排除指定两列的技术求助

我使用Solid框架（React方案实现逻辑基本一致）结合Tailwind CSS，需要给Tanstack Table实现行可点击功能，但要排除两类列：

• 第一列：带有可点击收藏星标的列
• 最后一列：包含修改/复制按钮组的列

试过两种方案都有问题：

1. 给列单独添加点击事件：只有列内的文本区域能触发点击，点击单元格空白处没反应，体验差
2. 给<tr>标签添加点击事件：点击列内的可点击元素（星标、按钮）会同时触发行点击，导致多重触发（比如点修改按钮时，既执行修改逻辑又打开查看弹窗）

想找正确的实现方式。

我尝试过的代码示例 #

列单独添加点击事件的示例：

{ 
  cell: ({row}) => <span onClick={() => openAction('View', row.original)}>{row.original.name}</span>, 
  accessorKey: 'name', 
  minSize: 200, 
  header: 'Name', 
  enableMultiSort: true 
},

给<tr>添加点击事件的示例：

<tbody>
  <For each={table.getRowModel().rows}>
    {(row, i) => (
      <tr 
        key={row.id} 
        class={`${i() % 2 === 1 && 'bg-gray-600'} border-gray-700 hover:bg-primary hover:border-darkprimary`} 
        onClick={() => clickEvent('View', row.original)}
      >
        <For each={row.getVisibleCells()}>
          {(cell) => <td key={cell.id} class={`p-1`}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>}
        </For>
      </tr>
    )}
  </For>
</tbody>

推荐两种可靠的实现方式，按需选择：

方式一：在排除列的可点击元素上阻止事件冒泡 #

给第一列的星标、最后一列的按钮添加event.stopPropagation()，阻止点击事件冒泡到<tr>，这样行点击逻辑就不会被触发。

第一列（收藏星标）的列配置修改： #

{
  cell: ({ row }) => (
    <button 
      onClick={(e) => {
        e.stopPropagation(); // 阻止事件冒泡到tr
        // 这里写你的收藏逻辑
        toggleFavorite(row.original.id);
      }}
      class="p-1"
    >
      {/* 星标图标，比如用Solid Icons */}
      <StarIcon class={row.original.isFavorite ? 'text-yellow-400' : 'text-gray-400'} />
    </button>
  ),
  accessorKey: 'favorite',
  header: '收藏',
  // 其他列配置
}

最后一列（操作按钮组）的列配置修改： #

{
  cell: ({ row }) => (
    <div class="flex gap-2 p-1">
      <button 
        onClick={(e) => {
          e.stopPropagation(); // 阻止冒泡
          // 修改逻辑
          openAction('Edit', row.original);
        }}
        class="px-2 py-1 bg-blue-600 rounded"
      >
        修改
      </button>
      <button 
        onClick={(e) => {
          e.stopPropagation(); // 阻止冒泡
          // 复制逻辑
          duplicateRow(row.original);
        }}
        class="px-2 py-1 bg-green-600 rounded"
      >
        复制
      </button>
    </div>
  ),
  accessorKey: 'actions',
  header: '操作',
  // 其他列配置
}

优点：精准控制，只针对可点击元素生效，不影响单元格空白处的点击（空白处点击仍会触发行逻辑）；即使列顺序变化，也不需要调整代码。

方式二：在<tr>的点击事件中判断点击的列是否为排除列 #

不需要修改列的配置，直接在<tr>的点击事件里，通过列索引或accessorKey判断当前点击的单元格是否属于排除列，若是则不执行行点击逻辑。

修改后的<tr>代码： #

<tbody>
  <For each={table.getRowModel().rows}>
    {(row, i) => (
      <tr 
        key={row.id} 
        class={`${i() % 2 === 1 && 'bg-gray-600'} border-gray-700 hover:bg-primary hover:border-darkprimary`} 
        onClick={(e) => {
          // 找到点击的单元格
          const td = e.target.closest('td');
          if (!td) return;

          // 获取当前可见列列表
          const visibleColumns = table.getVisibleColumns();
          // 获取点击单元格对应的列索引
          const cellIndex = Array.from(td.parentElement.children).indexOf(td);
          // 获取对应的列对象
          const clickedColumn = visibleColumns[cellIndex];

          // 通过accessorKey判断是否为排除列（推荐，不受列顺序影响）
          if (clickedColumn.accessorKey === 'favorite' || clickedColumn.accessorKey === 'actions') {
            return; // 不执行行点击逻辑
          }

          // 或者通过列索引判断（如果列顺序固定的话）
          // if (cellIndex === 0 || cellIndex === visibleColumns.length - 1) return;

          // 执行行点击逻辑
          clickEvent('View', row.original);
        }}
      >
        <For each={row.getVisibleCells()}>
          {(cell) => <td key={cell.id} class={`p-1`}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>}
        </For>
      </tr>
    )}
  </For>
</tbody>

优点：不需要改动任何列的组件代码，适合快速适配现有项目；用accessorKey判断的话，即使用户手动调整列顺序，也能正确排除目标列。

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