列固定指南

列固定指南

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,
  //...
});

默认固定列

一个非常常见的用例是默认固定某些列。您可以通过使用固定的 columnIds 初始化 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 中是新增的

有一些有用的 Column 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