Column Sizing APIs
状态 (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 轴)的列偏移量,测量所有前一列的大小。
对于列的粘性或绝对定位(例如 left 或 transform)很有用。
getAfter
getAfter: (position?: ColumnPinningPosition) => number
返回沿行轴(通常是标准表格的 X 轴)的列偏移量,测量所有后续列的大小。
对于列的粘性或绝对定位(例如 right 或 transform)很有用。
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
将列大小重置为其初始状态。如果 defaultState 为 true,将使用表格的默认状态,而不是提供给表格的初始值。
resetHeaderSizeInfo
resetHeaderSizeInfo: (defaultState?: boolean) => void
将列大小信息重置为其初始状态。如果 defaultState 为 true,将使用表格的默认状态,而不是提供给表格的初始值。
getTotalSize
getTotalSize: () => number
通过计算所有叶子列的大小之和返回表格的总大小。
getLeftTotalSize
getLeftTotalSize: () => number
如果启用固定(pinning),通过计算所有左侧叶子列的大小之和返回表格左侧部分的总大小。
getCenterTotalSize
getCenterTotalSize: () => number
如果启用固定,通过计算所有未固定/居中叶子列的大小之和返回表格中心部分的总大小。
getRightTotalSize
getRightTotalSize: () => number
如果启用固定,通过计算所有右侧叶子列的大小之和返回表格右侧部分的总大小。