Skip to content

useTableStickyColumns

@astryxdesign/core v0.7.1 · useTableStickyColumns

配置对象是 MaybeRefOrGetter:传一个 getter 或 ref,就能在运行时改固定哪些列。

参数 ​

参数类型默认值说明
startKeysreadonly string[]—固定在开头边缘(行内起点,从左往右排版时是左边)的列键。实际固定的是从第一列到你写的最后一个键之间这一段连续的列。
endKeysreadonly string[]—固定在末尾边缘(行内终点,从左往右排版时是右边)的列键。实际固定的是从你写的第一个键到最后一列之间这一段连续的列。

返回值 ​

字段类型说明
cellPatch(input: TableCellPatchInput<T>) => TableCellPatch | null把表头或表体的某一格标成固定。偏移量按固定段累加:每固定一列,就把前一列的最小宽度加上去。不固定的列返回 null;两个键列表都为空时,所有列都返回 null。
bindScrollRoot(element: HTMLElement | null) => void表格把自己的滚动容器交给它,卸载时再传一次 null。它在这个容器上监听滚动和尺寸变化,把 --table-sticky-shadow-start / --table-sticky-shadow-end 写成 '1' 或 '0',阴影就靠这两个值出现或消失。作用域销毁时监听会自动摘掉。

固定住的单元格拿到的补丁是:position: sticky、一个开头或末尾方向的 inset、z-index 表头 3 表体 1,以及 astryx-table__sticky 加上 astryx-table__sticky--start 或 astryx-table__sticky--end 两个类。