Table

Board table support is split into model and UI packages. Register both packages in browser editors that need editable table elements on the Board canvas.

Register table support

import { UniverBoardsTablePlugin } from '@univerjs-pro/boards-table'import { UniverBoardsTableUIPlugin } from '@univerjs-pro/boards-table-ui'import BoardsTableUIEnUS from '@univerjs-pro/boards-table-ui/locale/en-US'import '@univerjs-pro/boards-table/facade'import '@univerjs-pro/boards-table-ui/lib/index.css'univer.registerPlugin(UniverBoardsTablePlugin)univer.registerPlugin(UniverBoardsTableUIPlugin)

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.

Package responsibilities

• @univerjs-pro/boards-table integrates table elements with the Board model.
• @univerjs-pro/boards-table-ui adds table rendering and editing UI on the Board canvas. It also provides @univerjs-pro/boards-table-ui/locale/* and @univerjs-pro/boards-table-ui/lib/index.css for browser editors.

Snapshot data

A Board table element stores a tableId and common Board element fields. The table payload is managed by the table plugin and referenced through Board resources.

const table = board.insertTable({  left: 120,  top: 120,  width: 480,  height: 280,  rows: 3,  columns: 4,})if (!table) throw new Error('Cannot insert Board table')

Register table support before opening snapshots that contain table elements.

Stable table colors

When a Board table is inserted or its style changes, the plugin stores the resolved theme palette with that table. Existing tables keep their colors after the global Univer theme changes; selecting another table style creates a new table-owned theme snapshot.