Table
Plugins Info
The enhanced table feature provides rich table editing capabilities for Univer Docs, including cell styling, border customization, row and column manipulation, and data population.
Introduction
In Univer Docs, enhanced tables enable you to:
- Insert tables programmatically: Create tables with specified dimensions.
- Manipulate structure: Add, delete, and move rows and columns.
- Style cells: Apply borders, backgrounds, and text formatting.
- Merge and split cells: Combine cells for complex layouts.
Plugin Mode
Installation
Shell
pnpm add @univerjs-pro/docs-table @univerjs-pro/docs-table-uiShell
npm install @univerjs-pro/docs-table @univerjs-pro/docs-table-uiShell
yarn add @univerjs-pro/docs-table @univerjs-pro/docs-table-uiShell
bun add @univerjs-pro/docs-table @univerjs-pro/docs-table-uiUsage
TypeScript
import { UniverDocsTablePlugin } from '@univerjs-pro/docs-table'import { UniverDocsTableUIPlugin } from '@univerjs-pro/docs-table-ui'import DocsTableUIEnUS from '@univerjs-pro/docs-table-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-table-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DocsTableUIEnUS, ), },})univer.registerPlugin(UniverDocsTablePlugin)univer.registerPlugin(UniverDocsTableUIPlugin)If you have a commercial license for Univer, please refer to Using License in Client for configuration.
Facade API
Make sure to import the facade before using the API:
TypeScript
import '@univerjs-pro/docs-table/facade'Insert a Table
TypeScript
const doc = univerAPI.getActiveDocument()const table = doc?.insertTable(3, 4, { tableId: 'my-table' })table?.setCellText(0, 0, 'Name')Insert a Table from Data
TypeScript
const doc = univerAPI.getActiveDocument()doc?.insertTableFromData([ ['Name', 'Status'], ['Facade', 'Ready'],], { headerRowCount: 1 })Get All Tables
TypeScript
const doc = univerAPI.getActiveDocument()const tables = doc?.getTables() ?? []Delete a Table
TypeScript
const doc = univerAPI.getActiveDocument()doc?.deleteTable('my-table')How is this guide?