Lzh on GitHub

状态 (State)

列大小调整状态以以下形式存储在表格中:

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][]
}

列定义选项 (Column Def Options)

enableResizing

enableResizing?: boolean

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

size

size?: number

列的期望大小。

minSize

minSize?: number

列允许的最小大小。

maxSize

maxSize?: number

列允许的最大大小。

列 API (Column API)

getSize

getSize: () => number

返回列的当前大小。

getStart

getStart: (position?: ColumnPinningPosition) => number

返回沿行轴(通常是标准表格的 X 轴)的列偏移量,测量所有前一列的大小。

对于列的粘性或绝对定位(例如 lefttransform)很有用。

getAfter

getAfter: (position?: ColumnPinningPosition) => number

返回沿行轴(通常是标准表格的 X 轴)的列偏移量,测量所有后续列的大小。

对于列的粘性或绝对定位(例如 righttransform)很有用。

getCanResize

getCanResize: () => boolean

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

getIsResizing

getIsResizing: () => boolean

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

resetSize

resetSize: () => void

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

标题 API (Header API)

getSize

getSize: () => number

返回标题的大小,通过汇总属于它的所有叶子列的大小计算得出。

getStart

getStart: (position?: ColumnPinningPosition) => number

返回沿行轴(通常是标准表格的 X 轴)的标题偏移量。这实际上是所有前置标题偏移量的总和。

getResizeHandler

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

返回一个事件处理函数,可用于调整标题大小。它可以作为:

  • onMouseDown 处理程序
  • onTouchStart 处理程序

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

表格选项 (Table Options)

enableColumnResizing

enableColumnResizing?: boolean

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

columnResizeMode

columnResizeMode?: 'onChange' | 'onEnd'

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

columnResizeDirection

columnResizeDirection?: 'ltr' | 'rtl'

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

onColumnSizingChange

onColumnSizingChange?: OnChangeFn<ColumnSizingState>

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

onColumnSizingInfoChange

onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState>

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

表格 API (Table API)

setColumnSizing

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

使用更新函数或值设置列大小状态。如果将 onColumnSizingChange 函数传递给表格选项,这将触发底层函数,否则状态将由表格自动管理。

setColumnSizingInfo

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

使用更新函数或值设置列大小信息状态。如果将 onColumnSizingInfoChange 函数传递给表格选项,这将触发底层函数,否则状态将由表格自动管理。

resetColumnSizing

resetColumnSizing: (defaultState?: boolean) => void

将列大小重置为其初始状态。如果 defaultStatetrue,将使用表格的默认状态,而不是提供给表格的初始值。

resetHeaderSizeInfo

resetHeaderSizeInfo: (defaultState?: boolean) => void

将列大小信息重置为其初始状态。如果 defaultStatetrue,将使用表格的默认状态,而不是提供给表格的初始值。

getTotalSize

getTotalSize: () => number

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

getLeftTotalSize

getLeftTotalSize: () => number

如果启用固定(pinning),通过计算所有左侧叶子列的大小之和返回表格左侧部分的总大小。

getCenterTotalSize

getCenterTotalSize: () => number

如果启用固定,通过计算所有未固定/居中叶子列的大小之和返回表格中心部分的总大小。

getRightTotalSize

getRightTotalSize: () => number

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