SuperAPI AI 工具集

tanstack-lit-table-getting-started

前端与建站

查看项目

更新于 10-16 00:02

技能介绍

用途:在 Lit 中搭建 TanStack Table v9 表格。前置阅读 @tanstack/table-core 的 core 与 table-features,理解无头与特性插件模型。

主要能力:通过 @tanstack/lit-table 的 FlexRender、TableController、createColumnHelper、tableFeatures 构建表格;用 repeat 指令渲染表头组、行与单元格。

用法要点:在模块作用域创建 features、columnHelper 与静态 columns;把 TableController 作为类字段(如 private tableController = new TableController(this)),在每次 render 中调用 this.tableController.table({ features, columns, data, getRowId });需要时传入选择器,如 (state) => ({ pagination: state.pagination }),简单表格用默认选择器。

常见错误:不要在 render 内重建 controller(会泄漏生命周期并丢失状态);不要向构造函数传 v8 选项(v9 通过 table 方法接收当前选项);不要指望特性状态自动渲染 UI,需自行渲染 start/center/end 集合并应用 sticky 偏移与 CSS。

限制:TanStack Table 为无头库,不注入标记或样式,语义元素、可访问性、宽度、粘性定位与设计系统组件均由应用代码负责。API 可查 node_modules/@tanstack/lit-table/dist/index.d.ts 与 table-core 的 dist。