如何在TanStack React Table中为每行添加查看/删除操作按钮

方案一：通过列配置添加（推荐，符合react-table设计逻辑） #

• 第一步：在原有列配置COLUMNS数组末尾追加操作列，通过Cell渲染函数自定义按钮内容，可直接获取当前行的完整员工数据

const COLUMNS = [
  // 保留你原有所有列的配置，例如员工姓名、部门、岗位等列
  {
    Header: '操作',
    id: 'actions', // 无对应数据字段时必须配置唯一id
    Cell: ({ row }) => {
      // row.original 对应当前行的原始员工数据，替换成你实际的员工编码字段名即可
      const empCode = row.original.employeeCode
      return (
        <div className="flex gap-2">
          <button
            className="px-3 py-1 rounded text-xs text-white bg-blue-600"
            onClick={() => handleView(empCode)}
          >
            查看
          </button>
          <button
            className="px-3 py-1 rounded text-xs text-white bg-red-600"
            onClick={() => handleDelete(empCode)}
          >
            删除
          </button>
        </div>
      )
    }
  }
]

• 第二步：编写对应事件处理函数，接收员工编码作为入参执行业务逻辑

// 查看员工逻辑
const handleView = (empCode) => {
  // 自定义你的业务逻辑：例如跳转详情页、打开详情弹窗、拉取员工详情数据
  console.log('当前查看员工编码：', empCode)
}

// 删除员工逻辑
const handleDelete = async (empCode) => {
  // 自定义你的业务逻辑：例如弹删除确认、调用删除接口、刷新列表
  if (!window.confirm(`确认删除编码为${empCode}的员工？`)) return
  try {
    // 调用删除接口、刷新列表逻辑写在这里
    console.log('执行删除，员工编码：', empCode)
  } catch (err) {
    console.error('删除失败', err)
  }
}

方案二：直接在行渲染时追加操作单元格（无需修改列配置） #

如果不想调整原有列配置，可以直接在表格行渲染逻辑里，遍历完所有单元格后手动追加操作列的td标签，同样可以拿到当前行的员工数据：

{page.map(row => {
  prepareRow(row)
  // 提前获取当前行员工编码
  const empCode = row.original.employeeCode
  return (
    <tr className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4" {...row.getRowProps()}>
      {row.cells.map(cell => {
        return <td className="px-6 py-4 text-black font-bold align-middle border-2 whitespace-nowrap text-left"  {...cell.getCellProps()}>{cell.render('Cell')}</td>
      })}
      {/* 追加操作列单元格 */}
      <td className="px-6 py-4 text-black font-bold align-middle border-2 whitespace-nowrap text-left">
        <div className="flex gap-2">
          <button
            className="px-3 py-1 rounded text-xs text-white bg-blue-600"
            onClick={() => handleView(empCode)}
          >
            查看
          </button>
          <button
            className="px-3 py-1 rounded text-xs text-white bg-red-600"
            onClick={() => handleDelete(empCode)}
          >
            删除
          </button>
        </div>
      </td>
    </tr>
  )
})}

注意事项 #

• 代码中employeeCode字段名请替换为你实际接口返回的员工编码对应字段，例如empCode/staffNo等
• 按钮的className可以直接替换为你项目中已有的按钮样式类，无需和示例一致
• 如果需要给操作列表头、表脚加自定义内容，和其他列一样配置Header/Footer属性即可

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