用途
row-pinning 行固定技能建立在 core 与 table-features 之上，用于把带有稳定 ID 的行固定到顶部、中部和底部三个行区域（row regions）中。固定操作会划分出行区域，但具体的渲染顺序与粘性（sticky）布局由渲染器自行控制。
主要能力
- 通过 rowPinningFeature 启用行固定功能，配合 tableFeatures 组合使用。
- 提供顶部、中部、底部三个区域的行获取接口：table.getTopRows()、table.getCenterRows()、table.getBottomRows()。
- 通过 keepPinnedRows 选项决定固定行在筛选和分页影响下的可见性策略。
使用方式
设置阶段，需要引入 rowPinningFeature 与 tableFeatures：
import { rowPinningFeature, tableFeatures } from '@tanstack/table-core'
type Person = { id: string; name: string }
export const features = tableFeatures({ rowPinningFeature })
export const options = {
getRowId: (row: Person) => row.id,
keepPinnedRows: true,
}
渲染阶段，按区域分别获取并渲染行：
const regions = [
table.getTopRows(),
table.getCenterRows(),
table.getBottomRows(),
]
for (const rows of regions) rows.forEach(renderRow)
如果视觉顺序重要，应显式渲染每个区域。
常见错误
错误一：持久化基于索引的 ID
错误写法：
const options = { getRowId: (_row: Person, index: number) => String(index) }
正确写法：
const options = { getRowId: (row: Person) => row.id }
原因：索引在排序、筛选、分页和插入操作下都会发生变化。
错误二：期望固定行自动获得粘性定位
错误写法：
row.pin('top')
正确写法：
topRowElement.style.position = 'sticky'
原因：固定状态本身不会设置样式或放置 DOM 元素。
固定行可见性策略
- keepPinnedRows: true 为默认值。固定行即使在筛选或分页中被移除出中心行模型，仍会保留在其固定区域中可见。
- keepPinnedRows: false 则只保留当前已筛选和分页后的行模型中存在的固定行。
应根据产品行为显式选择，两种取值本身都不算错误。
API 探索
可以查看 node_modules/@tanstack/table-core/dist/features/row-pinning/ 目录，了解区域获取接口、行 API 以及 keepPinnedRows 的语义。
适用场景与限制
该技能适用于需要在表格中固定特定行、并配合筛选与分页控制可见性的场景。渲染顺序与粘性布局需由使用方自行实现，固定状态不负责样式与 DOM 位置；行 ID 必须稳定，不能使用索引。其余关于价格、平台或效果的信息暂未提供。