Skip to content

useTableColumnResize

@astryxdesign/core v0.7.1 · useTableColumnResize

参数 ​

useTableColumnResize() 只接一个配置对象。宽度存在 ref 里时用 getter 包一层,表格每次读都能拿到最新的值:useTableColumnResize(() => ({ ... }))。

名称类型默认值说明
columnWidthsRecord<string, number>{}已经提交的像素宽度,键是列 key。有值时覆盖列自己声明的宽度。
onColumnResizeEnd(updates: Record<string, number>) => void—一次拖动结束(松开指针或按键)时调用。参数是「列 key → 新宽度」的映射,包含所有宽度变了的列,把它并进 columnWidths 就是新的状态。最后一列不在里面,它的宽度跟着剩余空间走。
minWidthnumber—拖动时所有列共用的最窄像素,一设就盖过每一列自己的下限。
maxWidthnumberInfinity拖动时所有列共用的最宽像素。
columnsreadonly TableColumn<T>[]—列定义。用来取每一列的下限,并区分比例列和固定像素列,好决定相邻列和最后一列怎么动。表格自己会传,只有自己调下面的辅助函数时才需要给。

返回值 ​

useTableColumnResize() 返回一个 TablePlugin&lt;T&gt;,放进 Table 的 plugins 里。它填的是插件约定里的三个字段:

名称类型说明
widthFor(column: TableColumn<T>) => number | undefined返回某一列已经提交的宽度,没有就返回 undefined。
resizeFor(column: TableColumn<T>, columns: readonly TableColumn<T>[]) => TableColumnResizeContribution | null说明一列怎么参与拖动:当前宽度、最窄、最宽、让出宽度的相邻列,以及这一列有没有把手。
onColumnResizeEnd(updates: Record<string, number>) => voidTable 把变了的列交给它。它把宽度取整到整像素,再转给你的 onColumnResizeEnd。

辅助函数 ​

同一个模块也导出插件内部用的计算函数,自己的界面需要算宽度时可以直接用。

名称类型说明
columnResizeMinWidth(width: ColumnWidth | undefined, globalMinWidth?: number) => number一列能拖到的最窄像素:设了全局下限就用它,否则用列自己的下限。
isProportionalColumnWidth(width: ColumnWidth | undefined) => boolean比例列和没写宽度的列都算比例列。
resizeColumnWidths(plan: ColumnResizePlan, delta: number) => number[]把指针位移(像素)套到一组列宽快照上,返回算好的每一列宽度。
columnResizeStep(isShiftKey: boolean) => number按一下方向键走多少像素:10px,按住 Shift 是 50px。
columnResizeDirectionSign(direction: string) => 1 | -1横向位移在书写方向上的符号。RTL 返回 -1。