列大小调整 API | TanStack Table Docs

状态

列大小调整状态使用以下结构存储在表格中：

tsx

export type ColumnSizingTableState = {
  columnSizing: ColumnSizing
  columnSizingInfo: ColumnSizingInfoState
}

export type ColumnSizing = Record<string, number>

export type ColumnSizingInfoState = {
  startOffset: null | number
  startSize: null | number
  deltaOffset: null | number
  deltaPercentage: null | number
  isResizingColumn: false | string
  columnSizingStart: [string, number][]
}

export type ColumnSizingTableState = {
  columnSizing: ColumnSizing
  columnSizingInfo: ColumnSizingInfoState
}

export type ColumnSizing = Record<string, number>

export type ColumnSizingInfoState = {
  startOffset: null | number
  startSize: null | number
  deltaOffset: null | number
  deltaPercentage: null | number
  isResizingColumn: false | string
  columnSizingStart: [string, number][]
}

列定义选项

enableResizing

tsx

enableResizing?: boolean

enableResizing?: boolean

启用或禁用列的列大小调整。

size

tsx

size?: number

size?: number

列的期望大小

minSize

tsx

minSize?: number

minSize?: number

列的最小允许大小

maxSize

tsx

maxSize?: number

maxSize?: number

列的最大允许大小

列 API

getSize

tsx

getSize: () => number

getSize: () => number

返回列的当前大小

getStart

tsx

getStart: (position?: ColumnPinningPosition) => number

getStart: (position?: ColumnPinningPosition) => number

返回列沿行轴（对于标准表格通常为 x 轴）的偏移量测量值，测量所有前面列的大小。

对于列的粘性或绝对定位非常有用。（例如 left 或 transform）

getAfter

tsx

getAfter: (position?: ColumnPinningPosition) => number

getAfter: (position?: ColumnPinningPosition) => number

返回列沿行轴（对于标准表格通常为 x 轴）的偏移量测量值，测量所有后面列的大小。

对于列的粘性或绝对定位非常有用。（例如 right 或 transform）

getCanResize

tsx

getCanResize: () => boolean

getCanResize: () => boolean

如果列可以调整大小，则返回 true。

getIsResizing

tsx

getIsResizing: () => boolean

getIsResizing: () => boolean

如果列当前正在调整大小，则返回 true。

resetSize

tsx

resetSize: () => void

resetSize: () => void

将列大小重置为其初始大小。

表头 API

getSize

tsx

getSize: () => number

getSize: () => number

返回表头的大小，通过对属于它的所有叶列的大小求和计算得出。

getStart

tsx

getStart: (position?: ColumnPinningPosition) => number

getStart: (position?: ColumnPinningPosition) => number

返回表头沿行轴（对于标准表格通常为 x 轴）的偏移量测量值。这实际上是所有前面表头的偏移量测量值的总和。

getResizeHandler

tsx

getResizeHandler: () => (event: unknown) => void

getResizeHandler: () => (event: unknown) => void

返回一个事件处理程序函数，可用于调整表头的大小。它可以用作：

onMouseDown 处理程序
onTouchStart 处理程序

拖动和释放事件会自动为您处理。

表格选项

enableColumnResizing

tsx

enableColumnResizing?: boolean

enableColumnResizing?: boolean

启用/禁用*所有列**的列大小调整。

columnResizeMode

tsx

columnResizeMode?: 'onChange' | 'onEnd'

columnResizeMode?: 'onChange' | 'onEnd'

确定何时更新 columnSizing 状态。onChange 在用户拖动调整大小手柄时更新状态。onEnd 在用户释放调整大小手柄时更新状态。

columnResizeDirection

tsx

columnResizeDirection?: 'ltr' | 'rtl'

columnResizeDirection?: 'ltr' | 'rtl'

启用或禁用从右到左调整列大小的支持。默认为“ltr”。

onColumnSizingChange

tsx

onColumnSizingChange?: OnChangeFn<ColumnSizingState>

onColumnSizingChange?: OnChangeFn<ColumnSizingState>

当 columnSizing 状态更改时，将调用此可选函数。如果提供此函数，您将负责自己维护其状态。您可以通过 state.columnSizing 表格选项将此状态传递回表格。

onColumnSizingInfoChange

tsx

onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState>

onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState>

当 columnSizingInfo 状态更改时，将调用此可选函数。如果提供此函数，您将负责自己维护其状态。您可以通过 state.columnSizingInfo 表格选项将此状态传递回表格。

表格 API

setColumnSizing

tsx

setColumnSizing: (updater: Updater<ColumnSizingState>) => void

setColumnSizing: (updater: Updater<ColumnSizingState>) => void

使用更新程序函数或值设置列大小调整状态。如果将一个函数传递给表格选项，则会触发底层的 onColumnSizingChange 函数，否则状态将由表格自动管理。

setColumnSizingInfo

tsx

setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void

setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void

使用更新程序函数或值设置列大小调整信息状态。如果将一个函数传递给表格选项，则会触发底层的 onColumnSizingInfoChange 函数，否则状态将由表格自动管理。

resetColumnSizing

tsx

resetColumnSizing: (defaultState?: boolean) => void

resetColumnSizing: (defaultState?: boolean) => void

将列大小调整重置为其初始状态。如果 defaultState 为 true，则将使用表格的默认状态，而不是提供给表格的 initialValue。

resetHeaderSizeInfo

tsx

resetHeaderSizeInfo: (defaultState?: boolean) => void

resetHeaderSizeInfo: (defaultState?: boolean) => void

将列大小调整信息重置为其初始状态。如果 defaultState 为 true，则将使用表格的默认状态，而不是提供给表格的 initialValue。

getTotalSize

tsx

getTotalSize: () => number

getTotalSize: () => number

通过计算所有叶列大小的总和来返回表格的总大小。

getLeftTotalSize

tsx

getLeftTotalSize: () => number

getLeftTotalSize: () => number

如果固定，则通过计算所有左侧叶列大小的总和来返回表格左侧部分的总大小。

getCenterTotalSize

tsx

getCenterTotalSize: () => number

getCenterTotalSize: () => number

如果固定，则通过计算所有未固定/中间叶列大小的总和来返回表格中间部分的总大小。

getRightTotalSize

tsx

getRightTotalSize: () => number

getRightTotalSize: () => number

如果固定，则通过计算所有右侧叶列大小的总和来返回表格右侧部分的总大小。