前端UI组件【免费下载链接】table Headless UI for building powerful tables datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table项目地址https://gitcode.com/gh_mirrors/ta/table点击查看免费下载createTable是 TanStack Table 的 Solid 适配层tanstack/solid-table提供的核心函数。它接收一份 TableOptions 配置features、columns、data 等返回一个由 Solid 响应式系统驱动的表格实例。这个实例的 API 与 TanStack Table 的 headless 核心保持一致但在底层它把表格状态接入 Solid 的信号依赖追踪使得只有读取了相关状态片段的组件才会在状态变化时更新从而实现细粒度的响应式渲染。本文将围绕createTable的签名、参数、返回值及其实现原理展开并结合仓库中的源码、示例和测试说明如何在 Solid 项目中用它构建一个真正响应式的表格。函数签名与基本用法createTable在 packages/solid-table/src/createTable.ts 中定义function createTableTFeatures, TData(tableOptions): SolidTableTFeatures, TData;最简单的调用方式如下这也是官方文档中的示例const table createTable( { features, columns, data, }, )其中featuresv9 新增的必选项声明该表格启用了哪些可选功能如排序、分页、过滤等由tableFeatures({...})生成。columns列定义数组可用createColumnHelper辅助生成。data表格数据。注意在 v9 中features是必传的。tableFeatures({})表示不启用任何额外功能注册的功能越多表格实例和列类型上暴露的 API 也就越丰富同时未使用的功能代码不会被打进包更好的 tree-shaking。参数TableOptionstableOptions的类型是TableOptionsTFeatures, TData来源于tanstack/table-core。它除了features、columns、data外还包括state、initialState、getRowId、onXxxChange回调、以及各功能对应的配置项等。关键选项说明选项类型说明featuresTableFeatures必填声明启用的功能与行模型columnsColumnDefTFeatures, TData[]列定义数组dataTData[] \| (() TData[])数据传 getter 可保持响应式state部分状态对象可含 getter受控状态与onXxxChange搭配initialState部分状态对象非受控场景下的初始状态getRowId(row, index, parent?) string自定义行 ID 生成规则keystring表格标识用于 Devtools 注册在快速上手文档 docs/framework/solid/quick-start.md 中可以看到一个完整示例把数据放进createSignal然后通过 getter 传入const [data] createSignal(defaultData) const table createTable({ key: person-table, features, columns, get data() { return data() }, })这里的关键点是get data() { return data() }它以 getter 形式把信号的最新值暴露给表格从而让表格在信号更新时感知新数据。如果直接写data: data()则只会捕获一次性快照后续更新无法反映到表格中。该模式在 examples/solid/basic-use-table/src/App.tsx 的完整示例中同样如此使用const [data] createSignal([...defaultData])。返回值SolidTablecreateTable返回SolidTableTFeatures, TData它是在 table-core 的Table基础上扩展出的类型额外包含两个成员见 createTable.tsSubscribe一个用于创建原子追踪渲染边界的组件。它的 children 接收table.atoms在 children 中读取哪些原子Solid 就只追踪哪些读取table.Subscribe {(atoms) spanPage {atoms.pagination.get().pageIndex 1}/span} /table.SubscribeFlexRender便捷的渲染组件挂在表格实例上用于渲染列定义中的 header、cell、footertable.FlexRender header{header} / table.FlexRender cell{cell} / table.FlexRender footer{footer} /类型参数TFeatures extends TableFeatures功能集合类型决定表格实例暴露哪些功能 API。TData extends RowData行数据类型决定列访问器与单元格取值的类型推导。内部实现从选项合并到表格构造阅读 createTable.ts 的源码可以看到createTable的内部工作分为几步捕获当前 Ownerconst owner getOwner()!记录调用时的响应式上下文后续创建的信号原子都挂在这个 owner 下表格销毁时依赖关系一并清理。创建响应式绑定solidReactivity(owner)生成 table-core 与 Solid 之间的响应式桥梁见下文。合并选项用 Solid 的mergeProps把coreReactivityFeature注入features并设置默认的mergeOptions策略保证后续setOptions更新与默认值正确合并。构造表格调用 table-core 的constructTable(resolvedOptions)生成表格实例。建立响应式同步createComputed中读取用户传入的stategetter 形式使受控状态的读取纳入依赖追踪随后在untrack中调用table.setOptions把最新选项合并回表格从而让行模型等依据状态重新计算。由于这里没有手动创建 effect表格内部各派生数据的更新由读取方组件、memo驱动。清理onCleanup(() reactivity.unmount?.())在组件卸载时退订所有 Store 订阅。挂载扩展成员把Subscribe与FlexRender挂到表格实例上并返回。solidReactivityState 原子与 Solid 信号的桥接createTable依赖 packages/solid-table/src/reactivity.ts 中的solidReactivity(owner)来对接 table-core 的原子Atom模型。它实现了一个关键策略表格的状态原子由 TanStack Store 的 Atom 承载而选项存储保持框架原生因为行模型 API 在渲染期间直接读取table.options。createReadonlyAtom基于createMemo实现把 Store 的依赖追踪桥接进 Solid 的 memo 中支持自定义equals比较与debugName。createWritableAtom基于createSignal实现提供set/get/subscribe三件套set支持函数式更新subscribe通过observable(signal)把 Solid 信号包装为可订阅的 Store 观察者并利用runWithOwner确保订阅创建在正确的 owner 上下文内。schedule: (fn) queueMicrotask(() fn())用微任务调度批量更新batch直接复用 Solid 的batch保证同一批次内的多次状态修改只触发一次 UI 更新。这种设计的直接效果是表格状态更新具备 Solid 的细粒度响应式特性——读取特定状态片段如atoms.pagination.get()的计算只会在该片段变化时重新执行不会无效化无关 UI。典型使用场景基础表格 响应式数据完整可运行的示例见 examples/solid/basic-use-table/src/App.tsx要点如下const features tableFeatures({}) // 声明功能集合 const columnHelper createColumnHelpertypeof features, Person() const columns columnHelper.columns([...]) // 用列助手定义列 const table createTable({ key: basic-use-table, debugTable: true, features, columns, get data() { return data() }, }) // 渲染时用 For 遍历表头组与行模型用 FlexRender 渲染列内容 For each{table.getHeaderGroups()} {(headerGroup) ( tr For each{headerGroup.headers} {(header) ( th{header.isPlaceholder ? null : FlexRender header{header} /}/th )} /For /tr )} /For For each{table.getRowModel().rows} {(row) ( tr For each{row.getAllCells()} {(cell) tdFlexRender cell{cell} //td} /For /tr )} /For需要说明key是可选项但若配合 Devtools 使用则建议设置useTanStackTableDevtools(table)通过key标识表格。debugTable: true会输出调试日志便于排查响应式更新问题。表头、单元格、表尾分别用FlexRender header{...} /、FlexRender cell{...} /、FlexRender footer{...} /渲染该组件在 packages/solid-table/src/FlexRender.tsx 中实现一次只接受cell、header、footer中的一个 prop。组合功能排序等在 v9 中功能是按需注册的。以排序为例见 docs/framework/solid/quick-start.mdconst features tableFeatures({ rowSortingFeature, // 启用排序 API 与状态 sortedRowModel: createSortedRowModel(), // 客户端排序行模型 sortFns, }) const table createTable({ key: person-table, features, columns, get data() { return data() }, })之后在表头绑定header.column.getToggleSortingHandler()并在onClick中根据header.column.getIsSorted()显示排序箭头即可。所有其他功能分页、过滤、行选择等都遵循同一模式在tableFeatures中注册功能及其行模型工厂再使用它们为表格、列、行新增的 API。受控状态分页联动createTable同样支持受控状态。在 packages/solid-table/tests/unit/createTable.test.ts 的测试中可以看到分页状态由外部信号驱动const [pagination, setPaginationSignal] createSignalPaginationState({ pageSize: 5, pageIndex: 0, }) const table createTable({ data, columns: paginatedColumns, features: paginatedFeatures, getRowId: (row) row.id, state: { get pagination() { return pagination() }, }, onPaginationChange: setPaginationSignal, })测试验证当外部调用table.setPageSize(3)触发onPaginationChange后行模型的行 ID 从 5 条变为 3 条且这一变化被createEffect捕获——证明受控状态的变化通过响应式链路正确驱动了行模型的重新计算。自定义表格 HookcreateTableHookcreateTable之上还有更高层的createTableHook见 packages/solid-table/src/createTableHook.tsx它把功能、行模型、默认选项和可复用组件一次定义再通过createAppTable返回挂载了AppTable、AppCell、AppHeader、AppFooter等包装组件和预绑定组件的扩展表格实例。其内部正是调用createTable完成实例创建的const { createAppTable, createAppColumnHelper } createTableHook({ features }) function UsersTable({ data }: { data: Person[] }) { const table createAppTable({ columns, data }) return ( table.AppTable table.../table table.PaginationControls / /table.AppTable ) }这种模式下注册的cellComponents、headerComponents会通过Object.assign预绑定到 cell/header 实例上配合useCellContext、useHeaderContext等上下文 Hook 使用让大型应用中的表格组件保持一致性。源码结构速览文件作用packages/solid-table/src/createTable.tscreateTable实现与SolidTable类型定义packages/solid-table/src/reactivity.tsSolid 响应式绑定Atom ↔ Signal 桥接packages/solid-table/src/FlexRender.tsxflexRender函数与FlexRender组件packages/solid-table/src/createTableHook.tsx组合式表格 HookcreateAppTable等packages/solid-table/tests/unit/createTable.test.tscreateTable响应式行为测试小结createTable是使用 TanStack Table 构建 Solid 表格的入口。它把 table-core 的 headless 逻辑与 Solid 的细粒度响应式无缝衔接通过features按需启用功能保持包体积与类型精度通过 getter 形式的data、state接入 Solid 响应式数据流通过table.Subscribe与原子读取实现最小化的渲染边界通过table.FlexRender/FlexRender灵活渲染任意列内容。掌握createTable的签名与内部机制后无论是快速搭建基础表格、组合排序分页等高级功能还是基于createTableHook构建可复用表格组件都能有的放矢。赞分享前端UI组件【免费下载链接】table Headless UI for building powerful tables datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table项目地址https://gitcode.com/gh_mirrors/ta/table点击查看免费下载相关推荐在 Svelte 5 中创建响应式表格实例深入解析 tanstack/svelte-table 的 createTable 函数在 Svelte 5 中创建响应式表格实例深入解析 tanstack/svelte table 的 createTable 函数 createTable 是前端UI组件useTable 深入解析在 Ember 中创建响应式表格的官方入口函数useTable 深入解析在 Ember 中创建响应式表格的官方入口函数 TanStack Table 是一个无头headless表格库负责管理表格的状前端UI组件Skeleton表格设计最佳实践如何创建响应式数据表格Skeleton表格设计最佳实践如何创建响应式数据表格 在移动优先的网页开发时代Skeleton CSS框架为开发者提供了一个简单而强大的响应式表格解决方案前端上一篇【亲测免费】 开源项目Collabora Online 指南下一篇【亲测免费】 VAP项目安装与使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考