TinyBase Svelte 实战：用 `＜ValuesInHtmlTable /＞` 把 Store 的 Values 渲染成 HTML 表格

数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载本文是 TinyBase 官方 Svelte UI 组件系列演示的第一篇聚焦ui-svelte-dom模块中的ValuesInHtmlTable /组件。我们将从一个含用户名、邮箱等混合类型键值数据的 Store 出发完整演示「创建 Store → 填充 Values → 通过 Provider 注入 → 渲染 HTML 表格」的全流程并深入组件源码说明表头、Id 列、可编辑模式等 props 的底层实现机制。读完本文你将能独立搭建一个可响应 Store 数据变化的 Svelte 键值表格页面。一、组件定位Values 的表格化视图TinyBase 将数据分为两类以 Id 为键的键值对集合Values以及按表、行、单元格组织的表格集合Tables。ValuesInHtmlTable /负责把前者渲染成标准的 HTMLtable每一行对应一个 Value行首是 Value 的 Id行内是 Value 的值。它属于tinybase/ui-svelte-dom模块——该模块专门提供「把 TinyBase 数据结构渲染为原生 HTML 表格」的组件家族还包括TableInHtmlTable /、SortedTableInHtmlTable /、SliceInHtmlTable /、RelationshipInHtmlTable /等导出列表见 src/ui-svelte-dom/index.ts。与 React/Solid 版本的组件同名且行为一致只是绑定了 Svelte 的响应式运行时。二、项目骨架导入映射与入口文件2.1 使用 Import Map 免构建加载演示采用 CDN 原生 Import Map 的方式无需打包器即可运行script typeimportmap { imports: { tinybase: https://esm.sh/tinybase, tinybase/ui-svelte: https://esm.sh/tinybase/ui-svelte, tinybase/ui-svelte-dom: https://esm.sh/tinybase/ui-svelte-dom, svelte: https://esm.sh/svelte } } /script四个入口分别对应核心库createStore等 API、Svelte 绑定层Provider等组件、DOM 表格组件层ValuesInHtmlTable等以及 Svelte 运行时本身。若在本地工程中使用则直接npm install tinybase后按tinybase/ui-svelte、tinybase/ui-svelte-dom子路径导入即可。2.2 创建 Store 并填充示例 Values主入口文件创建 Store链式写入四个混合类型的 Values再挂载 Svelte 组件import {createStore} from tinybase; import {mount} from svelte; import App from ./App.svelte; const store createStore() .setValue(username, John Appleseed) .setValue(email address, john.appleseedexample.com) .setValue(dark mode, true) .setValue(font size, 14); mount(App, {target: document.body, props: {store}});createStore()来自核心库tinybase源码见 src/store/index.tssetValue可链式调用这里刻意混合了字符串、布尔、数字三种类型用来展示表格对异构值的通用渲染能力。mount是 Svelte 5 的挂载 API通过props把 store 传给组件。三、App.svelteProvider 提供数据组件自动取数script import {Provider} from tinybase/ui-svelte; import {ValuesInHtmlTable} from tinybase/ui-svelte-dom; let {store} $props(); /script Provider {store} ValuesInHtmlTable / ValuesInHtmlTable headerRow{false} idColumn{false} / /Provider这里展示了两层关键机制Provider 注入Provider {store}通过 Svelte 的 Context 把 store 注入组件树。查看 src/ui-svelte/Provider.svelte 可以看到它把 store及可选的 metrics、indexes、queries、checkpoints、persister 等写入setContext(TINYBASE_CONTEXT_KEY, ctx)供后代组件读取同时支持storesById注册多个命名 Store。免 props 取数ValuesInHtmlTable /内部通过getValueIds(() store)从 Context 解析 Store见 src/ui-svelte/functions.svelte.ts 中resolveStore与getValueIds因此无需显式传store。若想显式指定也可传入storeprop。第二个ValuesInHtmlTable /通过headerRow{false}隐藏表头、idColumn{false}隐藏 Id 列是本文档演示的第一个差异化用法。四、渲染结果与 DOM 结构开启默认配置时第一个表格输出如下结构Id 列与 Value 列table theadtrthId/ththValue/th/tr/thead tbody trth titleusernameusername/thtdJohn Appleseed/td/tr !-- ...其余三行... -- /tbody /table对照 src/ui-svelte-dom/ValuesInHtmlTable.svelte 源码表头在headerRow ! false时渲染固定输出Id与Value两个thValue文案来自 src/common/strings.ts 中的常量VALUE每行先渲染th title{valueId}{valueId}/th作为 Id 列title属性提供悬停提示再渲染td包住真正的值组件值组件默认为ui-svelte层的ValueView /src/ui-svelte/ValueView.svelte它通过getValue(...)订阅 Store 的addValueListener任何setValue改动都会触发该行重新渲染。单元测试快照印证了这一结构见 test/unit/core/ui-svelte/snapshots/ui-svelte-dom.test.ts.snap 中ValuesInHtmlTable basic与 idColumn两条记录Playwright 端到端测试则验证了「第一张表有 Id 列、第二张表没有」的页面行为test/e2e/demos/ui-components-svelte.test.ts。五、props 全解从默认值到高级用法组件类型定义见 src/types/ui-svelte-dom/index.d.ts 的ValuesInHtmlTableProps与HtmlTablePropsProp类型默认值作用storeStoreOrStoreId取 Context 中 Provider 注入的 Store指定数据源可传 Store 实例或已注册的 Store IdheaderRowbooleantrue是否渲染thead表头行false时整行省略idColumnbooleantrue是否渲染 Id 列false时省略thId 单元格源码中以isFalse(idColumn)严格判断editablebooleanfalse是否启用编辑模式见下文valueComponentComponentValueViewPropsValueView或编辑模式下的EditableValueView自定义渲染每个 Value 的组件getValueComponentProps(valueId: Id) {[prop: string]: any}无为自定义 value 组件计算额外 propsextraCellsBefore/extraCellsAfterExtraValueCell[][]在每行 Id 列之前/之后插入附加单元格classNamestring无应用到table的 CSS 类名关于editable置为true时值单元格改用EditableValueView /src/ui-svelte-dom/EditableValueView.svelte。它内部由通用编辑组件EditableThingsrc/ui-svelte-dom/common/EditableThing.svelte驱动根据值的实际类型渲染对应控件字符串用文本框、数字用typenumber输入框、布尔用复选框、对象/数组用 JSON 文本编辑并在无 schema 约束时允许通过类型按钮在 string / number / boolean / object / array 间切换有 schema 时该按钮被禁用。快照ValuesInHtmlTable editable展示了编辑模式下的 DOM。同模块的EditableValueView /也单独导出可直接复用src/ui-svelte-dom/index.ts。关于extraCellsBefore/extraCellsAfter每个元素形如{label, component}组件会接收{valueId, store}作为 props表头会通过getExtraHeaderssrc/ui-svelte-dom/common/index.ts自动生成对应的th。单元测试对store、editable、自定义valueComponent、className、idColumn五种配置均有覆盖test/unit/core/ui-svelte/ui-svelte-dom.test.ts 中describe(ValuesInHtmlTable)块可作为回归验证的参照。六、样式让朴素表格贴近设计与 React DOM 组件一致组件渲染出的 HTML 刻意保持素朴样式完全交由开发者。演示中使用了如下 LESS 关键片段body { color: #333; display: flex; font-family: Inter, sans-serif; font-size: 0.8rem; justify-content: space-around; line-height: 1.5rem; user-select: none; } table { background: white; border-collapse: collapse; box-shadow: 0 0 1rem #0004; font-size: inherit; margin: 2rem; table-layout: fixed; th, td { border-color: #eee; border-style: solid; border-width: 1px 0; overflow: hidden; padding: 0.25rem 0.5rem; text-align: left; white-space: nowrap; } }要点说明user-select: none让演示页更像应用界面table-layout: fixed配合overflow: hidden防止长字符串撑破列宽box-shadow与border-width: 1px 0实现轻量分隔线。组件只负责结构视觉完全可控——这正符合 TinyBase UI 组件「无侵入样式」的设计取向。页内同时放置默认与headerRow{false} idColumn{false}两张表格正好对比两种形态。七、小结与延伸至此我们用约 60 行代码完成了 TinyBase Svelte 的首个表格渲染用createStore().setValue(...)准备数据用Provider {store}注入 Context用ValuesInHtmlTable /输出 HTML 表格并通过headerRow/idColumn/editable/valueComponent等 props 控制形态。本文演示的完整代码即 site/demos/11_ui_components_svelte/01_ValuesInHtmlTable.md。后续教程将沿同一套件继续深入下一篇Svelte会把它换成表格Table数据渲染并演示异步加载 TSV 数据集的完整流程再往后还有排序表格、切片、关系、查询结果等进阶组件最终构成ui-svelte-dom的完整拼图。赞分享数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载相关推荐TinyBase ValuesInHtmlTable / (Solid) 实战用 ui-solid-dom 组件把 Store Values 渲染成响应式 HTML 表格TinyBase ValuesInHtmlTable / Solid 实战用 ui solid dom 组件把 Store Values 渲染成响应式 HT数据库后端前端TinyBase 实战指南使用 ValuesInHtmlTable 在 React 中渲染 Store 的 Values 数据表TinyBase 实战指南使用 ValuesInHtmlTable 在 React 中渲染 Store 的 Values 数据表 本文基于 TinyBase数据库后端前端tinybase React 实战用 SliceInHtmlTable 把 Index 的 Slice 渲染为 HTML 表格tinybase React 实战用 SliceInHtmlTable 把 Index 的 Slice 渲染为 HTML 表格 本文以 tinybase 官方数据库后端前端上一篇如何用BarrageGrab在5分钟内搭建全平台直播弹幕采集系统下一篇rust-raspberrypi-OS-tutorials 教程 03Hacky Hello World——用 QEMU 虚拟 UART 点亮内核第一个 println! 与自动化启动测试创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考