列固定指南

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

列固定如何影响列顺序

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

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

更改固定列顺序的唯一方法是在 columnPinning.left 和 columnPinning.right 状态本身中。 columnOrder 状态只会影响未固定（“中间”）列的顺序。

列固定状态

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

jsx

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

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

默认固定列

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

jsx

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

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 固定列，那么对于大多数情况，您可以照常渲染表格，并使用 table.getHeaderGroups 和 row.getVisibleCells 方法。

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

列固定指南

示例

其他示例

API