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

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

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

状态

列定义选项

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