单独用Shadcn Table能否固定右侧Actions列？是否需搭配Tanstack Table？

开发者阿泽

2026-7-4

关于Shadcn Table固定右侧Actions列的实现

核心结论

不需要额外安装其他包，而且你其实已经在使用TanStack Table的能力——Shadcn Table本身就是基于TanStack Table封装的，直接用它自带的特性就能实现固定列。

实现步骤

在列配置中给Actions列添加sticky: "right"属性，这是TanStack Table原生支持的固定列配置
给该列的单元格设置和表格主体一致的背景色，避免滚动时被其他列的内容穿透覆盖
确保表格容器开启横向滚动（Shadcn Table默认已配置overflow-x: auto，无需额外修改）

代码示例

// 列定义示例
const columns = [
  // 其他业务列...
  {
    accessorKey: "actions",
    header: "操作",
    cell: ({ row }) => (
      // bg-white 需和你的表格背景色匹配，比如如果表格是灰色背景就用bg-gray-50
      <div className="flex gap-2 bg-white p-2">
        <Button variant="default" size="sm">编辑</Button>
        <Button variant="destructive" size="sm">删除</Button>
      </div>
    ),
    sticky: "right", // 关键配置：固定在右侧
    width: 180, // 可选：固定列宽，防止按钮挤压变形
  },
];

// 渲染表格（和你原本的写法一致）
<Table>
  <TableHeader>
    <TableRow>
      {columns.map((column) => (
        <TableHead key={column.accessorKey}>{column.header}</TableHead>
      ))}
    </TableRow>
  </TableHeader>
  <TableBody>
    {data.map((row) => (
      <TableRow key={row.id}>
        {columns.map((column) => (
          <TableCell key={column.accessorKey}>
            {column.cell({ row })}
          </TableCell>
        ))}
      </TableRow>
    ))}
  </TableBody>
</Table>