列固定 API | TanStack Table Docs

可固定

列是否能够被固定取决于以下因素：

options.enablePinning 未设置为 false
options.enableColumnPinning 未设置为 false
columnDefinition.enablePinning 未设置为 false

状态

固定状态使用以下结构存储在表格中：

tsx

export type ColumnPinningPosition = false | 'left' | 'right'

export type ColumnPinningState = {
  left?: string[]
  right?: string[]
}


export type ColumnPinningTableState = {
  columnPinning: ColumnPinningState
}

export type ColumnPinningPosition = false | 'left' | 'right'

export type ColumnPinningState = {
  left?: string[]
  right?: string[]
}


export type ColumnPinningTableState = {
  columnPinning: ColumnPinningState
}

表格选项

enableColumnPinning

tsx

enableColumnPinning?: boolean

enableColumnPinning?: boolean

启用/禁用表格中所有列的列固定。

onColumnPinningChange

tsx

onColumnPinningChange?: OnChangeFn<ColumnPinningState>

onColumnPinningChange?: OnChangeFn<ColumnPinningState>

如果提供，当 state.columnPinning 更改时，将使用 updaterFn 调用此函数。这会覆盖默认的内部状态管理，因此您还需要从自己管理的状态中提供 state.columnPinning。

列定义选项

enablePinning

tsx

enablePinning?: boolean

enablePinning?: boolean

启用/禁用列的固定。

表格 API

setColumnPinning

tsx

setColumnPinning: (updater: Updater<ColumnPinningState>) => void

setColumnPinning: (updater: Updater<ColumnPinningState>) => void

设置或更新 state.columnPinning 状态。

resetColumnPinning

tsx

resetColumnPinning: (defaultState?: boolean) => void

resetColumnPinning: (defaultState?: boolean) => void

将 columnPinning 状态重置为 initialState.columnPinning，或者可以传递 true 以强制将默认空白状态重置为 { left: [], right: [], }。

getIsSomeColumnsPinned

tsx

getIsSomeColumnsPinned: (position?: ColumnPinningPosition) => boolean

getIsSomeColumnsPinned: (position?: ColumnPinningPosition) => boolean

返回是否有任何列被固定。可以选择指定仅检查 left 或 right 位置中固定的列。

注意：不考虑列可见性

getLeftHeaderGroups

tsx

getLeftHeaderGroups: () => HeaderGroup<TData>[]

getLeftHeaderGroups: () => HeaderGroup<TData>[]

返回表格的左侧固定表头组。

getCenterHeaderGroups

tsx

getCenterHeaderGroups: () => HeaderGroup<TData>[]

getCenterHeaderGroups: () => HeaderGroup<TData>[]

返回表格的未固定/居中表头组。

getRightHeaderGroups

tsx

getRightHeaderGroups: () => HeaderGroup<TData>[]

getRightHeaderGroups: () => HeaderGroup<TData>[]

返回表格的右侧固定表头组。

getLeftFooterGroups

tsx

getLeftFooterGroups: () => HeaderGroup<TData>[]

getLeftFooterGroups: () => HeaderGroup<TData>[]

返回表格的左侧固定表脚组。

getCenterFooterGroups

tsx

getCenterFooterGroups: () => HeaderGroup<TData>[]

getCenterFooterGroups: () => HeaderGroup<TData>[]

返回表格的未固定/居中表脚组。

getRightFooterGroups

tsx

getRightFooterGroups: () => HeaderGroup<TData>[]

getRightFooterGroups: () => HeaderGroup<TData>[]

返回表格的右侧固定表脚组。

getLeftFlatHeaders

tsx

getLeftFlatHeaders: () => Header<TData>[]

getLeftFlatHeaders: () => Header<TData>[]

返回表格的左侧固定表头的扁平数组，包括父表头。

getCenterFlatHeaders

tsx

getCenterFlatHeaders: () => Header<TData>[]

getCenterFlatHeaders: () => Header<TData>[]

返回表格的未固定/居中表头的扁平数组，包括父表头。

getRightFlatHeaders

tsx

getRightFlatHeaders: () => Header<TData>[]

getRightFlatHeaders: () => Header<TData>[]

返回表格的右侧固定表头的扁平数组，包括父表头。

getLeftLeafHeaders

tsx

getLeftLeafHeaders: () => Header<TData>[]

getLeftLeafHeaders: () => Header<TData>[]

返回表格的叶节点左侧固定表头的扁平数组。

getCenterLeafHeaders

tsx

getCenterLeafHeaders: () => Header<TData>[]

getCenterLeafHeaders: () => Header<TData>[]

返回表格的叶节点未固定/居中表头的扁平数组。

getRightLeafHeaders

tsx

getRightLeafHeaders: () => Header<TData>[]

getRightLeafHeaders: () => Header<TData>[]

返回表格的叶节点右侧固定表头的扁平数组。

getLeftLeafColumns

tsx

getLeftLeafColumns: () => Column<TData>[]

getLeftLeafColumns: () => Column<TData>[]

返回所有左侧固定的叶列。

getRightLeafColumns

tsx

getRightLeafColumns: () => Column<TData>[]

getRightLeafColumns: () => Column<TData>[]

返回所有右侧固定的叶列。

getCenterLeafColumns

tsx

getCenterLeafColumns: () => Column<TData>[]

getCenterLeafColumns: () => Column<TData>[]

返回所有中间固定（未固定）的叶列。

列 API

getCanPin

tsx

getCanPin: () => boolean

getCanPin: () => boolean

返回列是否可以被固定。

getPinnedIndex

tsx

getPinnedIndex: () => number

getPinnedIndex: () => number

返回固定列组中列的数字固定索引。

getIsPinned

tsx

getIsPinned: () => ColumnPinningPosition

getIsPinned: () => ColumnPinningPosition

返回列的固定位置。（'left'、'right' 或 false）

tsx

pin: (position: ColumnPinningPosition) => void

pin: (position: ColumnPinningPosition) => void

将列固定到 'left' 或 'right'，如果传递 false，则取消固定列到中间。

行 API

getLeftVisibleCells

tsx

getLeftVisibleCells: () => Cell<TData>[]

getLeftVisibleCells: () => Cell<TData>[]

返回行中所有左侧固定的可见单元格。

getRightVisibleCells

tsx

getRightVisibleCells: () => Cell<TData>[]

getRightVisibleCells: () => Cell<TData>[]

返回行中所有右侧固定的可见单元格。

getCenterVisibleCells

tsx

getCenterVisibleCells: () => Cell<TData>[]

getCenterVisibleCells: () => Cell<TData>[]

返回行中所有中间固定（未固定）的可见单元格。