# useTableStickyColumns

## 使用方法

返回一个 `TablePlugin`，把连续的一段列固定在表格的开头边缘或末尾边缘（也可以两边都固定）。被固定的列会拿到累加的偏移量，滚动内容上方还会加一层柔和的阴影，只在能滚动的那一侧出现。配置传空对象 `{}` 也合法，就是什么都不固定。

```ts
import { useTableStickyColumns } from '@astryx-vue/core/Table'
```

## 示例

### useTableStickyColumns —— 固定列

Name 留在左边，Friday 留在右边，中间的日子横向滚动。滚动内容上方的阴影告诉你哪一侧还藏着列。

```vue
<script setup lang="ts">
import type { TableColumn } from '@astryx-vue/core/Table'
import { pixel, Table, useTableStickyColumns } from '@astryx-vue/core/Table'

interface Shift extends Record<string, unknown> {
  id: string
  name: string
  monday: string
  tuesday: string
  wednesday: string
  thursday: string
  friday: string
}

const shifts: Shift[] = [
  { id: '1', name: 'Alice', monday: 'Desk', tuesday: 'Desk', wednesday: 'Remote', thursday: 'Desk', friday: 'Off' },
  { id: '2', name: 'Bob', monday: 'Remote', tuesday: 'Desk', wednesday: 'Desk', thursday: 'Remote', friday: 'Desk' },
  { id: '3', name: 'Carol', monday: 'Off', tuesday: 'Remote', wednesday: 'Desk', thursday: 'Desk', friday: 'Remote' },
]

const columns: TableColumn<Shift>[] = [
  { key: 'name', header: 'Name', width: pixel(140) },
  { key: 'monday', header: 'Monday', width: pixel(140) },
  { key: 'tuesday', header: 'Tuesday', width: pixel(140) },
  { key: 'wednesday', header: 'Wednesday', width: pixel(160) },
  { key: 'thursday', header: 'Thursday', width: pixel(140) },
  { key: 'friday', header: 'Friday', width: pixel(140) },
]

const sticky = useTableStickyColumns<Shift>({
  startKeys: ['name'],
  endKeys: ['friday'],
})
</script>

<template>
  <Table
    :data="shifts"
    :columns="columns"
    id-key="id"
    :plugins="{ sticky }"
  />
</template>
```

## 属性

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

## 参数

| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `startKeys` | `readonly string[]` | — | 固定在开头边缘（行内起点，从左往右排版时是左边）的列键。实际固定的是从第一列到你写的最后一个键之间这一段连续的列。 |
| `endKeys` | `readonly string[]` | — | 固定在末尾边缘（行内终点，从左往右排版时是右边）的列键。实际固定的是从你写的第一个键到最后一列之间这一段连续的列。 |

## 返回值

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `cellPatch` | `(input: TableCellPatchInput) => 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` 两个类。