Web SDK

Column Layout

Plugins Info

Column layout adds editable column groups to Univer Docs. A column group is a block container that owns two to five columns, so users can create compact editorial layouts, comparison sections, newsletters, and mixed text/table content inside a document.

Introduction

In Univer Docs, column layout enables you to:

  • Insert column groups: Create a two-column, three-column, or custom-ratio block at a document offset.
  • Edit interactively: Let users insert, resize, and delete columns through the Docs UI.
  • Use Facade APIs: Query column groups, insert content into a specific column, and update width ratios in code.
  • Preserve document operations: Column mutations run through the normal rich-text command pipeline, so undo/redo and collaboration receive the same document changes as UI operations.

Plugin Mode

Installation

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

Usage

TypeScript
import { UniverDocsColumnUIPlugin } from '@univerjs-pro/docs-column-ui'import DocsColumnUIEnUS from '@univerjs-pro/docs-column-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-column-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DocsColumnUIEnUS,     ),  },})univer.registerPlugin(UniverDocsColumnUIPlugin)

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-column/facade'

Insert a Column Group

TypeScript
const doc = univerAPI.getActiveDocument()const group = doc?.insertColumnGroup(3, {  gap: 18,  widthRatios: [1.1, 1, 0.9],})

Insert Content into a Column

TypeScript
const doc = univerAPI.getActiveDocument()const group = doc?.insertColumnGroup(2)const [left, right] = group?.getColumns() ?? []const leftOffset = left?.getInsertOffset()if (leftOffset != null) {  doc?.insertText('Summary\rKey decisions and context.', {    startOffset: leftOffset,    endOffset: leftOffset,  })}const rightOffset = right?.getInsertOffset()if (rightOffset != null) {  doc?.insertTableFromData([    ['Item', 'Owner'],    ['Launch checklist', 'Docs team'],  ], { offset: rightOffset, headerRowCount: 1 })}

Query Column Groups

TypeScript
const doc = univerAPI.getActiveDocument()const groups = doc?.getColumnGroups() ?? []const byId = doc?.getColumnGroup('column-group-id')const atOffset = doc?.getColumnGroupAt(128)const matched = doc?.findColumnGroups('Launch') ?? []console.log(groups.map(group => group.describe()))console.log(byId, atOffset, matched)

Resize or Edit a Group

TypeScript
const doc = univerAPI.getActiveDocument()const group = doc?.getColumnGroups()[0]group?.setWidthRatios([1.2, 1, 0.8])const first = group?.getColumn(0)if (first) {  group?.addColumn(first.getId(), 'right')}

Delete a Column Group

TypeScript
const doc = univerAPI.getActiveDocument()doc?.deleteColumnGroup('column-group-id')

How is this guide?

© 2026 DreamNum Co., Ltd.