Table

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

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

npm install @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

yarn add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

bun add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

Usage

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.

Mobile support

First configure the mobile editor. In this page’s plugin-mode setup, replace the desktop registrations below with their mobile exports from the same packages, before opening a document. Keep the model plugins, styles, locales and Facade imports; do not register both variants.

Facade API

Make sure to import the facade before using the API:

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

Insert a Table

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

Insert a Table from Data

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

Get All Tables

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

Delete a Table

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

Table borders

Select a table or its cells to open the contextual Table tab. Its border picker offers all, outer, inner, individual-edge, and no-border presets, alongside color, width, and line-style controls. These controls are supplied by UniverDocsTableUIPlugin.

Editing, undo, and collaboration

Table Facade setters and structural edits use document commands and participate in undo/redo and collaboration. setTableStyle() combines background and border changes in one history entry. setColumnType() is also undoable and synchronized; column types follow columns when they move. setCellText() replaces the whole cell value: concurrent replacements use atomic-value conflict resolution, while ordinary character edits use text OT. A cell edit rejected by a locked content control returns false without consuming undo/redo history.

Align the whole table

In Traditional documents, select a table and use Table → Table alignment in the Ribbon to align the table left, center, or right within the page content area. This changes the table position, not cell text alignment. The control is disabled in Modern documents.

The value is stored in tableSource[tableId].align and supports undo/redo and saving. After registering the table plugin, the same action is available through the public command below. Use an existing table ID from the document snapshot. Invalid targets, disabled documents, and Modern documents return false.

import { DocsTableSetTableAlignCommand } from '@univerjs-pro/docs-table'import { TableAlignmentType } from '@univerjs/core'const aligned = await univerAPI.executeCommand(DocsTableSetTableAlignCommand.id, {  unitId: documentId,  tableId,  value: TableAlignmentType.CENTER,})