Beekeeper Studio 开源 UI Kit 之 Data Editor集成表格、实体树与 SQL 编辑器的数据编辑组件开发指南【免费下载链接】beekeeper-studioModern and easy to use SQL client for MySQL, Postgres, SQLite, SQL Server, and more. Linux, MacOS, and Windows.项目地址: https://gitcode.com/GitHub_Trending/be/beekeeper-studio导读Data Editor数据编辑器是 Beekeeper Studio 开源 UI Kit位于 apps/ui-kit中面向数据库客户端场景的复合组件它将 Table结果表格、Entity List数据库对象树与 SQL Text EditorSQL 编辑区三个子组件整合进一个可调整布局的容器中直接对应左侧选表、右上写 SQL、右下看结果的典型 SQL 客户端工作流。阅读本文后你将掌握bks-data-editor自定义元素的属性/方法/事件模型理解entities数据契约与bks-query-submit查询提交链路并能在自己的 Web 或 Electron 应用中搭建一个可运行的迷你 SQL 客户端界面。Data Editor 是什么一个面向数据库操作的复合组件Data Editor 的核心设计是一站式集成。在>window.customElements.define(bks-data-editor, DataEditorElement);其实现基于 Vue 2 组件通过vue/web-component-wrapper的 fork 版本包装而成见 index.ts并显式设置了disableShadowDom: true使内部样式直接作用于文档便于外部通过 CSS 定制主题可参考 customizing.md。基本使用向entities传入实体数据与 UI Kit 中其他组件一致Data Editor 的数据来源是entities属性——一个 Entity 对象的数组。每个实体描述一个数据库对象表、视图、物化视图、例程或 Schema并携带其列结构与示例数据。最小可用示例官方文档给出如下用法完整示例见>bks-data-editor/bks-data-editor script const dataEditor document.querySelector(bks-data-editor); dataEditor.entities [ { name: users, columns: [ { field: id, dataType: integer }, { field: name, dataType: varchar }, ], data: [ { id: 1, name: John Doe }, { id: 2, name: Jane Smith }, ], }, ]; /script注意在源码中entities属性的默认值并非文档表格中标注的[]而是() [{ columns: [], data: [] }]见>keybindings() { return { Ctrl-Enter: this.submitQuery, Cmd-Enter: this.submitQuery, }; }, submitQuery() { this.$emit(bks-query-submit, { query: this.sql }); },即无论通过哪种方式最终都会派发bks-query-submit事件负载为{ query: string }当前编辑器内容。这体现了该组件只负责编辑与提交、不负责执行的职责边界真正的查询执行逻辑由使用方宿主应用监听事件后自行完成。监听并处理查询官方示例演示了完整的处理模式——监听事件、执行查询、再把结果回填到表格中dataEditor.addEventListener(bks-query-submit, (event) { const query event.detail.query; const result await runQuery(query); dataEditor.setTable({ name: result, columns: result.columns, data: result.data, }); })在 TypeScript 侧事件类型被定义为CustomEvent{ query: string }并纳入DataEditorEventMap联合类型中见 types.ts便于宿主应用获得完整的类型提示。事件模型聚合子组件事件Data Editor 将内部三个子组件的事件全部向上透传因此除bks-query-submit外你还可以直接监听 Table、Entity List、SQL Text Editor 的所有事件详见 Data Editor API 中的事件汇总。透传机制由子组件上的proxyEmit属性启用例如 Entity List 上绑定proxyEmit后其bks-entity-dblclick、bks-entities-request-columns、bks-entity-contextmenu等事件即可被外层直接监听。官方给出的监听示例dataEditor.addEventListener(bks-entities-request-columns, (event) { console.log(Emitted from Entity List!); });各子组件可用事件包括详见对应 API 文档Entity Listentity-list.md ——bks-entity-expand、bks-entity-collapse、bks-entity-dblclick、bks-entity-contextmenu、bks-entities-request-columns、bks-expand-all、bks-collapse-all、bks-add-entity-click、bks-refresh-clickTabletable.md ——bks-initialized、bks-sorters-change、bks-ranges-change、bks-foreign-key-go-toSQL Text Editorsql-text-editor.md ——bks-query-selection-change、bks-apply-preset以及从 Text Editor 继承的事件。更新结果数据setTable方法与结果回填当查询执行完成或需要切换展示的数据集时调用setTable(entity)方法传入一个 Entity 对象即可更新右侧表格内容。官方示例见>dataEditor.setTable({ name: result, columns: [ { field: uuid, dataType: varchar, primaryKey: true }, { field: name, dataType: varchar }, { field: email, dataType: varchar }, ], data: [ { uuid: 123-456-789, name: John Doe, email: john.doeexample.com }, ], });源码实现中setTable会关闭初始占位提示showInitialPlaceholder并将实体的data与columns写入表格见 DataEditor.vuesetTable(table: Table) { this.showInitialPlaceholder false; this.data table.data; this.columns table.columns; },setTable在源码中通过exposeMethods显式暴露给自定义元素实例见>dataEditor.entityListProps { hiddenEntities: [ { name: users, entityType: table }, ], }; dataEditor.tableProps {}; dataEditor.sqlTextEditorProps {};entityListProps配置对象树Entity List 支持以下属性详见 entity-list.md名称类型说明默认值entitiesobject[]实体数组见 Entity API[]hiddenEntitiesobject[]需要隐藏的实体数组[]contextMenuItemsobject[]|function扩展默认右键菜单见 context-menu.mdundefined例如通过hiddenEntities可在树中屏蔽指定表常用于权限控制或 UI 精简。tableProps配置结果网格Table 组件提供丰富的属性以控制网格行为详见 table.md常用项包括名称类型说明默认值namestring表格名称tabledataobject[]表格数据键为列 field[]columnsobject[]列定义见下文Column Definition[]cellContextMenuItemsobject[]|function扩展单元格右键菜单undefinedrowContextMenuItemsobject[]|function扩展行右键菜单undefinedcolumnHeaderContextMenuItemsobject[]|function扩展列头右键菜单undefinedrowHeaderContextMenuItemsobject[]|function扩展行头右键菜单undefinedcornerHeaderContextMenuItemsobject[]|function扩展角标右键菜单undefinedtabulatorOptionsobject扩展 Tabulator 实例配置undefinedColumn Definition列定义字段如下名称类型说明默认值field必填string数据数组中该列对应的键-titlestring表头显示标题缺省时使用fieldundefinededitableboolean是否可编辑falsedataTypestring列数据类型undefinedcssClassstring应用到该列的 CSS 类undefinedsorterstring|none排序器none表示禁用排序undefinedprimaryKeyboolean标记主键列表头会显示主键标识undefinedforeignKeyboolean与primaryKey类似的外键标记undefinedgeneratedboolean与primaryKey类似的生成列标记undefinedtabulatorColumnDefinitionobject|function扩展 Tabulator 列定义undefinedTable 还暴露了getTabulator()方法以获取底层 Tabulator 实例见 table.md可用于更底层的网格操作。sqlTextEditorProps配置 SQL 编辑区SQL Text Editor 继承 Text Editor 的全部能力含 LSP 支持并额外提供以下 SQL 专属属性详见 sql-text-editor.md名称类型说明默认值entitiesobject[]用于自动补全的实体名数组格式与bks-entity-list的entities相同[]columnsGetter(entityName: string) (string[] \| Promisestring[])自定义列名补全函数支持异步参数为schema 名 实体名的组合字符串undefineddefaultSchemastring自动补全实体名时的默认 Schema匹配者优先展示publicformatterDialectstringSQL 格式化方言sqlidentifierDialectstring标识符引用方言genericformatterConfigobjectSQL 格式化器配置需包含id属性以追踪所选格式化预设{}allowPresetsboolean为Format Query右键菜单项启用格式化预设子菜单falsepresetsobject[]格式化预设数组每个预设含id、name、config配合allowPresets: true使用[]属性透传的源码机制从源码看三个子组件均以v-bind方式接收配置对象并展开为 props例如entity-list v-bindentityListProps :entitiesentities proxyEmit ... / sql-text-editor v-bindsqlTextEditorProps focus :entitiesentities :keybindingskeybindings proxyEmit ... / table-component v-bindtableProps :columnscolumns :datadata proxyEmit ... /完整模板见 DataEditor.vue。其中entities会被同时传递给 Entity List用于展示与 SQL Text Editor用于自动补全而表格则接收由setTable维护的columns/data数据源。props定义文件>bks-data-editor idde/bks-data-editor script const de document.getElementById(de); // 1) 初始化实体表结构 示例数据 de.entities [ { name: users, entityType: table, columns: [ { field: id, dataType: integer, primaryKey: true }, { field: name, dataType: varchar }, { field: email, dataType: varchar }, ], data: [ { id: 1, name: John Doe, email: john.doeexample.com }, { id: 2, name: Jane Smith, email: jane.smithexample.com }, ], }, ]; // 2) 配置子组件隐藏某张表、设置格式化方言 de.entityListProps { hiddenEntities: [{ name: secret_logs, entityType: table }], }; de.sqlTextEditorProps { formatterDialect: mysql, defaultSchema: public, }; de.tableProps {}; // 3) 提交查询模拟执行后回填结果 de.addEventListener(bks-query-submit, async (event) { const { query } event.detail; const result await runQuery(query); // 你的查询执行逻辑 de.setTable({ name: result, columns: result.columns, data: result.data, }); }); // 4) 监听子组件透传事件 de.addEventListener(bks-entities-request-columns, (event) { console.log(Emitted from Entity List!, event.detail.entity); }); /script注意事项与最佳实践查询执行在宿主侧bks-data-editor不内置数据库连接与查询执行能力务必自行实现runQuery并妥善处理错误与加载态类型安全在 TypeScript 项目中可引入 types.ts 中的DataEditorEventMap、QuerySubmitEvent与Table类型获得编译期校验默认 SchemaSQL 自动补全默认优先publicschema可在sqlTextEditorProps.defaultSchema中调整主题定制组件禁用 Shadow DOM全局 CSS 变量与类名如BksDataEditor-*可直接覆盖参见 customizing.mdReact 集成仓库提供了 BksDataEditor.tsx 封装示例可参考其事件绑定与属性映射方式。总结Data Editor 是 Beekeeper Studio UI Kit 中最具代表性的复合组件它以 Entity 数据契约为统一输入内部协调 Table、Entity List、SQL Text Editor 三个子组件并通过bks-query-submit事件 setTable方法完成查询提交—结果回填的闭环。对希望构建数据库工具类应用的开发者而言理解其属性透传机制entityListProps/tableProps/sqlTextEditorProps、事件聚合模型与entities数据契约是快速上手的关键——整套能力即可复用于 Web 应用也可无缝嵌入 Electron 桌面客户端。参考文档与源码索引组件总览data-editor.mdAPI 参考api/data-editor.md、api/entity.md子组件文档table.md、entity-list.md、sql-text-editor.md源码实现DataEditor.vue、data-editor.ts、types.ts、index.tsReact 集成示例BksDataEditor.tsx【免费下载链接】beekeeper-studioModern and easy to use SQL client for MySQL, Postgres, SQLite, SQL Server, and more. Linux, MacOS, and Windows.项目地址: https://gitcode.com/GitHub_Trending/be/beekeeper-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/13 21:12:15 · 阅读 1.2k Beekeeper Studio 开源 UI Kit 之 Data Editor：集成表格、实体树与 SQL 编辑器的数据编辑组件开发指南
Beekeeper Studio 开源 UI Kit 之 Data Editor集成表格、实体树与 SQL 编辑器的数据编辑组件开发指南【免费下载链接】beekeeper-studioModern and easy to use SQL client for MySQL, Postgres, SQLite, SQL Server, and more. Linux, MacOS, and Windows.项目地址: https://gitcode.com/GitHub_Trending/be/beekeeper-studio导读Data Editor数据编辑器是 Beekeeper Studio 开源 UI Kit位于 apps/ui-kit中面向数据库客户端场景的复合组件它将 Table结果表格、Entity List数据库对象树与 SQL Text EditorSQL 编辑区三个子组件整合进一个可调整布局的容器中直接对应左侧选表、右上写 SQL、右下看结果的典型 SQL 客户端工作流。阅读本文后你将掌握bks-data-editor自定义元素的属性/方法/事件模型理解entities数据契约与bks-query-submit查询提交链路并能在自己的 Web 或 Electron 应用中搭建一个可运行的迷你 SQL 客户端界面。Data Editor 是什么一个面向数据库操作的复合组件Data Editor 的核心设计是一站式集成。在>window.customElements.define(bks-data-editor, DataEditorElement);其实现基于 Vue 2 组件通过vue/web-component-wrapper的 fork 版本包装而成见 index.ts并显式设置了disableShadowDom: true使内部样式直接作用于文档便于外部通过 CSS 定制主题可参考 customizing.md。基本使用向entities传入实体数据与 UI Kit 中其他组件一致Data Editor 的数据来源是entities属性——一个 Entity 对象的数组。每个实体描述一个数据库对象表、视图、物化视图、例程或 Schema并携带其列结构与示例数据。最小可用示例官方文档给出如下用法完整示例见>bks-data-editor/bks-data-editor script const dataEditor document.querySelector(bks-data-editor); dataEditor.entities [ { name: users, columns: [ { field: id, dataType: integer }, { field: name, dataType: varchar }, ], data: [ { id: 1, name: John Doe }, { id: 2, name: Jane Smith }, ], }, ]; /script注意在源码中entities属性的默认值并非文档表格中标注的[]而是() [{ columns: [], data: [] }]见>keybindings() { return { Ctrl-Enter: this.submitQuery, Cmd-Enter: this.submitQuery, }; }, submitQuery() { this.$emit(bks-query-submit, { query: this.sql }); },即无论通过哪种方式最终都会派发bks-query-submit事件负载为{ query: string }当前编辑器内容。这体现了该组件只负责编辑与提交、不负责执行的职责边界真正的查询执行逻辑由使用方宿主应用监听事件后自行完成。监听并处理查询官方示例演示了完整的处理模式——监听事件、执行查询、再把结果回填到表格中dataEditor.addEventListener(bks-query-submit, (event) { const query event.detail.query; const result await runQuery(query); dataEditor.setTable({ name: result, columns: result.columns, data: result.data, }); })在 TypeScript 侧事件类型被定义为CustomEvent{ query: string }并纳入DataEditorEventMap联合类型中见 types.ts便于宿主应用获得完整的类型提示。事件模型聚合子组件事件Data Editor 将内部三个子组件的事件全部向上透传因此除bks-query-submit外你还可以直接监听 Table、Entity List、SQL Text Editor 的所有事件详见 Data Editor API 中的事件汇总。透传机制由子组件上的proxyEmit属性启用例如 Entity List 上绑定proxyEmit后其bks-entity-dblclick、bks-entities-request-columns、bks-entity-contextmenu等事件即可被外层直接监听。官方给出的监听示例dataEditor.addEventListener(bks-entities-request-columns, (event) { console.log(Emitted from Entity List!); });各子组件可用事件包括详见对应 API 文档Entity Listentity-list.md ——bks-entity-expand、bks-entity-collapse、bks-entity-dblclick、bks-entity-contextmenu、bks-entities-request-columns、bks-expand-all、bks-collapse-all、bks-add-entity-click、bks-refresh-clickTabletable.md ——bks-initialized、bks-sorters-change、bks-ranges-change、bks-foreign-key-go-toSQL Text Editorsql-text-editor.md ——bks-query-selection-change、bks-apply-preset以及从 Text Editor 继承的事件。更新结果数据setTable方法与结果回填当查询执行完成或需要切换展示的数据集时调用setTable(entity)方法传入一个 Entity 对象即可更新右侧表格内容。官方示例见>dataEditor.setTable({ name: result, columns: [ { field: uuid, dataType: varchar, primaryKey: true }, { field: name, dataType: varchar }, { field: email, dataType: varchar }, ], data: [ { uuid: 123-456-789, name: John Doe, email: john.doeexample.com }, ], });源码实现中setTable会关闭初始占位提示showInitialPlaceholder并将实体的data与columns写入表格见 DataEditor.vuesetTable(table: Table) { this.showInitialPlaceholder false; this.data table.data; this.columns table.columns; },setTable在源码中通过exposeMethods显式暴露给自定义元素实例见>dataEditor.entityListProps { hiddenEntities: [ { name: users, entityType: table }, ], }; dataEditor.tableProps {}; dataEditor.sqlTextEditorProps {};entityListProps配置对象树Entity List 支持以下属性详见 entity-list.md名称类型说明默认值entitiesobject[]实体数组见 Entity API[]hiddenEntitiesobject[]需要隐藏的实体数组[]contextMenuItemsobject[]|function扩展默认右键菜单见 context-menu.mdundefined例如通过hiddenEntities可在树中屏蔽指定表常用于权限控制或 UI 精简。tableProps配置结果网格Table 组件提供丰富的属性以控制网格行为详见 table.md常用项包括名称类型说明默认值namestring表格名称tabledataobject[]表格数据键为列 field[]columnsobject[]列定义见下文Column Definition[]cellContextMenuItemsobject[]|function扩展单元格右键菜单undefinedrowContextMenuItemsobject[]|function扩展行右键菜单undefinedcolumnHeaderContextMenuItemsobject[]|function扩展列头右键菜单undefinedrowHeaderContextMenuItemsobject[]|function扩展行头右键菜单undefinedcornerHeaderContextMenuItemsobject[]|function扩展角标右键菜单undefinedtabulatorOptionsobject扩展 Tabulator 实例配置undefinedColumn Definition列定义字段如下名称类型说明默认值field必填string数据数组中该列对应的键-titlestring表头显示标题缺省时使用fieldundefinededitableboolean是否可编辑falsedataTypestring列数据类型undefinedcssClassstring应用到该列的 CSS 类undefinedsorterstring|none排序器none表示禁用排序undefinedprimaryKeyboolean标记主键列表头会显示主键标识undefinedforeignKeyboolean与primaryKey类似的外键标记undefinedgeneratedboolean与primaryKey类似的生成列标记undefinedtabulatorColumnDefinitionobject|function扩展 Tabulator 列定义undefinedTable 还暴露了getTabulator()方法以获取底层 Tabulator 实例见 table.md可用于更底层的网格操作。sqlTextEditorProps配置 SQL 编辑区SQL Text Editor 继承 Text Editor 的全部能力含 LSP 支持并额外提供以下 SQL 专属属性详见 sql-text-editor.md名称类型说明默认值entitiesobject[]用于自动补全的实体名数组格式与bks-entity-list的entities相同[]columnsGetter(entityName: string) (string[] \| Promisestring[])自定义列名补全函数支持异步参数为schema 名 实体名的组合字符串undefineddefaultSchemastring自动补全实体名时的默认 Schema匹配者优先展示publicformatterDialectstringSQL 格式化方言sqlidentifierDialectstring标识符引用方言genericformatterConfigobjectSQL 格式化器配置需包含id属性以追踪所选格式化预设{}allowPresetsboolean为Format Query右键菜单项启用格式化预设子菜单falsepresetsobject[]格式化预设数组每个预设含id、name、config配合allowPresets: true使用[]属性透传的源码机制从源码看三个子组件均以v-bind方式接收配置对象并展开为 props例如entity-list v-bindentityListProps :entitiesentities proxyEmit ... / sql-text-editor v-bindsqlTextEditorProps focus :entitiesentities :keybindingskeybindings proxyEmit ... / table-component v-bindtableProps :columnscolumns :datadata proxyEmit ... /完整模板见 DataEditor.vue。其中entities会被同时传递给 Entity List用于展示与 SQL Text Editor用于自动补全而表格则接收由setTable维护的columns/data数据源。props定义文件>bks-data-editor idde/bks-data-editor script const de document.getElementById(de); // 1) 初始化实体表结构 示例数据 de.entities [ { name: users, entityType: table, columns: [ { field: id, dataType: integer, primaryKey: true }, { field: name, dataType: varchar }, { field: email, dataType: varchar }, ], data: [ { id: 1, name: John Doe, email: john.doeexample.com }, { id: 2, name: Jane Smith, email: jane.smithexample.com }, ], }, ]; // 2) 配置子组件隐藏某张表、设置格式化方言 de.entityListProps { hiddenEntities: [{ name: secret_logs, entityType: table }], }; de.sqlTextEditorProps { formatterDialect: mysql, defaultSchema: public, }; de.tableProps {}; // 3) 提交查询模拟执行后回填结果 de.addEventListener(bks-query-submit, async (event) { const { query } event.detail; const result await runQuery(query); // 你的查询执行逻辑 de.setTable({ name: result, columns: result.columns, data: result.data, }); }); // 4) 监听子组件透传事件 de.addEventListener(bks-entities-request-columns, (event) { console.log(Emitted from Entity List!, event.detail.entity); }); /script注意事项与最佳实践查询执行在宿主侧bks-data-editor不内置数据库连接与查询执行能力务必自行实现runQuery并妥善处理错误与加载态类型安全在 TypeScript 项目中可引入 types.ts 中的DataEditorEventMap、QuerySubmitEvent与Table类型获得编译期校验默认 SchemaSQL 自动补全默认优先publicschema可在sqlTextEditorProps.defaultSchema中调整主题定制组件禁用 Shadow DOM全局 CSS 变量与类名如BksDataEditor-*可直接覆盖参见 customizing.mdReact 集成仓库提供了 BksDataEditor.tsx 封装示例可参考其事件绑定与属性映射方式。总结Data Editor 是 Beekeeper Studio UI Kit 中最具代表性的复合组件它以 Entity 数据契约为统一输入内部协调 Table、Entity List、SQL Text Editor 三个子组件并通过bks-query-submit事件 setTable方法完成查询提交—结果回填的闭环。对希望构建数据库工具类应用的开发者而言理解其属性透传机制entityListProps/tableProps/sqlTextEditorProps、事件聚合模型与entities数据契约是快速上手的关键——整套能力即可复用于 Web 应用也可无缝嵌入 Electron 桌面客户端。参考文档与源码索引组件总览data-editor.mdAPI 参考api/data-editor.md、api/entity.md子组件文档table.md、entity-list.md、sql-text-editor.md源码实现DataEditor.vue、data-editor.ts、types.ts、index.tsReact 集成示例BksDataEditor.tsx【免费下载链接】beekeeper-studioModern and easy to use SQL client for MySQL, Postgres, SQLite, SQL Server, and more. Linux, MacOS, and Windows.项目地址: https://gitcode.com/GitHub_Trending/be/beekeeper-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考