用途:这是一个面向 @tanstack/preact-table v9 的入门技能,基于 @tanstack/table-core 的 core 与 table-features 构建,目标是用原生 Preact 适配器创建表格,而不是通过 React 兼容层。
主要能力:用 useTable 创建表格实例;用 tableFeatures 注册所需特性(如按需引入 rowSortingFeature 与 createSortedRowModel);用 createColumnHelper 定义列;通过 table.getHeaderGroups()、getRowModel()、getAllCells() 获取表头、行与单元格模型,并用表的 FlexRender 组件渲染 header 或 cell。
使用方式:从 @tanstack/preact-table 导入 createColumnHelper、tableFeatures、useTable;先定义 features 与列,再在组件中调用 useTable({ features, columns, data })。数据可用 preact/hooks 的 useState 提供。特性与列应保持模块级稳定,不要在渲染中重建。v9 使用显式特性插槽,而非 v8 的 getCoreRowModel 等行模型选项。
限制与注意:不要导入 React 适配器(如 @tanstack/react-table)通过兼容层使用,原生适配器直接使用 Preact 的 hooks、stores、JSX 类型与订阅。不要照搬 v8 构造函数写法。渲染中重建 features、columns 或 tableFeatures({}) 会产生新的标识,导致不必要的选项与模型计算。API 细节可查看 node_modules/@tanstack/preact-table/dist/index.d.ts 及 useTable.d.ts、Subscribe.d.ts、FlexRender.d.ts,并顺 core 导出查看已安装的 @tanstack/table-core/dist/。