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 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')

你觉得这篇文档如何？

© 2026 DreamNum Co., Ltd.