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.