Web SDK

表格

插件信息

增强表格功能为 Univer Docs 提供了丰富的表格编辑能力，包括单元格样式、边框自定义、行列操作和数据填充。

介绍

在 Univer Docs 中，增强表格使您能够：

  • 以编程方式插入表格：创建指定尺寸的表格。
  • 操作结构：添加、删除和移动行列。
  • 样式单元格：应用边框、背景和文本格式。
  • 合并和拆分单元格：组合单元格以实现复杂布局。

插件模式

安装

Shell
pnpm add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

使用

TypeScript
import { UniverDocsTablePlugin } from '@univerjs-pro/docs-table'import { UniverDocsTableUIPlugin } from '@univerjs-pro/docs-table-ui'import DocsTableUIZhCN from '@univerjs-pro/docs-table-ui/locale/zh-CN'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-table-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(      DocsTableUIZhCN,     ),  },})univer.registerPlugin(UniverDocsTablePlugin)univer.registerPlugin(UniverDocsTableUIPlugin)

如果您拥有 Univer 商业许可证，请参阅在客户端使用许可证进行配置。

移动端适配

先配置移动端编辑器。在本页插件模式的初始化代码中，将下列桌面端注册替换为同一个包导出的移动端插件，并在打开文档前完成。保留模型插件、样式、语言包和 Facade 导入，不要同时注册两个版本。

来源包桌面端注册移动端注册
@univerjs-pro/docs-table-uiUniverDocsTableUIPluginUniverDocsTableMobileUIPlugin

Facade API

使用 API 前请确保已导入 facade：

TypeScript
import '@univerjs-pro/docs-table/facade'

插入表格

TypeScript
const doc = univerAPI.getActiveDocument()const table = doc?.insertTable(3, 4, { tableId: 'my-table' })table?.setCellText(0, 0, 'Name')

从数据插入表格

TypeScript
const doc = univerAPI.getActiveDocument()doc?.insertTableFromData([  ['Name', 'Status'],  ['Facade', 'Ready'],], { headerRowCount: 1 })

获取所有表格

TypeScript
const doc = univerAPI.getActiveDocument()const tables = doc?.getTables() ?? []

删除表格

TypeScript
const doc = univerAPI.getActiveDocument()doc?.deleteTable('my-table')

表格边框

选中表格或其中的单元格后，可在表格上下文选项卡中使用边框选择器。它提供全部、外侧、内部、单侧与无边框预设，并可调整边框颜色、粗细和线型。这些控件由 UniverDocsTableUIPlugin 提供。

编辑、撤销与协同

表格 Facade 的设置方法和结构编辑通过文档命令执行，参与撤销、重做和协同。setTableStyle() 将背景与边框修改合并为一条历史记录。setColumnType() 同样支持撤销和同步，列类型随列移动。setCellText() 替换整个单元格值，并发替换按原子值冲突规则处理，普通逐字编辑仍使用文本 OT。锁定内容控件拒绝的单元格编辑返回 false，且不消耗撤销/重做历史。

你觉得这篇文档如何？

© 2026 DreamNum Co., Ltd.