列固定指南

TanStack Table 提供了状态和 API，有助于在表格 UI 中实现列固定功能。你可以通过多种方式实现列固定。你可以将固定列拆分成单独的表格，也可以将所有列保留在同一个表格中，但使用固定状态正确排序列并使用 CSS 的 sticky 属性将列固定在左侧或右侧。

列固定如何影响列顺序

有 3 个表格功能可以重新排序列，它们的发生顺序如下：

列固定：如果启用了固定功能，列会被分为左侧、中央（未固定）和右侧固定列。
手动列排序：应用手动指定的列顺序。
分组：如果启用了分组，并且分组状态处于活动状态，并且 tableOptions.groupedColumnMode 设置为 'reorder' | 'remove'，那么分组的列会被重新排序到列流的开头。

唯一可以更改固定列顺序的方法是直接在 columnPinning.left 和 columnPinning.right 状态中进行。columnOrder 状态将只影响未固定（“居中”）列的顺序。

列固定状态

管理 columnPinning 状态是可选的，通常也不是必需的，除非你正在添加持久化状态功能。TanStack Table 已经为你跟踪了列固定状态。如果你需要，可以像管理任何其他表格状态一样管理 columnPinning 状态。

const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({
  left: [],
  right: [],
});
//...
const table = useReactTable({
  //...
  state: {
    columnPinning,
    //...
  },
  onColumnPinningChange: setColumnPinning,
  //...
});

默认固定列

一个非常常见的用例是默认固定某些列。你可以通过使用固定列 ID 初始化 columnPinning 状态，或者使用 initialState 表格选项来实现。

const table = useReactTable({
  //...
  initialState: {
    columnPinning: {
      left: ['expand-column'],
      right: ['actions-column'],
    },
    //...
  },
  //...
});

有用的列固定 API

注意：其中一些 API 是 v8.12.0 中新增的。

有一些有用的列 API 方法可以帮助你实现列固定功能：

column.getCanPin：用于判断列是否可以被固定。
column.pin：用于将列固定到左侧或右侧。也可以用于取消固定列。
column.getIsPinned：用于判断列固定在何处。
column.getStart：用于为固定列提供正确的 left CSS 值。
column.getAfter：用于为固定列提供正确的 right CSS 值。
column.getIsLastColumn：用于判断列是否是其固定组中的最后一列。对于添加阴影很有用。
column.getIsFirstColumn：用于判断列是否是其固定组中的第一列。对于添加阴影很有用。

分割表格列固定

如果你只是使用 CSS 的 sticky 属性来固定列，那么你基本上可以像往常一样使用 table.getHeaderGroups 和 row.getVisibleCells 方法渲染表格。

但是，如果你将固定列拆分到单独的表格中，你可以使用 table.getLeftHeaderGroups、table.getCenterHeaderGroups、table.getRightHeaderGroups、row.getLeftVisibleCells、row.getCenterVisibleCells 和 row.getRightVisibleCells 方法，只渲染与当前表格相关的列。

表格状态 (Vue) 指南

列大小调整指南

列固定指南

示例

其他示例