列宽调整 API

状态

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

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 函数传递给表格选项，则这将触发底层的 onColumnSizingChange 函数，否则状态将由表格自动管理。

setColumnSizingInfo

tsx

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

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

使用更新器函数或值设置列宽调整信息状态。如果将 onColumnSizingInfoChange 函数传递给表格选项，则这将触发底层的 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

如果启用固定，则通过计算所有右侧叶子列的尺寸之和，返回表格右侧部分的总尺寸。

状态

列定义选项

enableResizing

size

minSize

maxSize

列 API

getSize

getStart

getAfter

getCanResize

getIsResizing

resetSize

表头 API

getSize

getStart

getResizeHandler

表格选项

enableColumnResizing

columnResizeMode

columnResizeDirection

onColumnSizingChange

onColumnSizingInfoChange

表格 API

setColumnSizing

setColumnSizingInfo

resetColumnSizing

resetHeaderSizeInfo

getTotalSize

getLeftTotalSize

getCenterTotalSize

getRightTotalSize

订阅 Bytes

订阅 Bytes