Table
Register table support
Slides table support is split into a model package and a UI package:
import { UniverSlidesTablePlugin } from '@univerjs-pro/slides-table'import { UniverSlidesTableUIPlugin } from '@univerjs-pro/slides-table-ui'import SlidesTableUIEnUS from '@univerjs-pro/slides-table-ui/locale/en-US'import '@univerjs-pro/slides-table-ui/lib/index.css'import '@univerjs-pro/slides-table/facade'univer.registerPlugin(UniverSlidesTablePlugin)univer.registerPlugin(UniverSlidesTableUIPlugin)Package responsibilities
@univerjs-pro/slides-tablestores table elements in the slide model and provides facade APIs for table operations.@univerjs-pro/slides-table-uiadds browser editing UI, render integration, selection behavior, and context menu operations. It also provides@univerjs-pro/slides-table-ui/locale/*and@univerjs-pro/slides-table-ui/lib/index.css.
Runtime choices
Use both packages in a browser editor. For Node.js processing, import only the model package unless you also need browser rendering.
univer.registerPlugin(UniverSlidesPlugin)univer.registerPlugin(UniverSlidesTablePlugin)Register table support before opening or importing decks that may contain table elements, otherwise those elements cannot be fully interpreted by the runtime.
Stable table colors
When a table is inserted or its style changes, the plugin resolves the current theme palette into a table-owned snapshot. Existing tables keep those colors after the global Univer theme changes; choosing another table style creates a new snapshot. Standard Facade operations manage this automatically.
Facade API
Import the facade entry to add table methods to FSlide:
import '@univerjs-pro/slides-table/facade'Create a table from plain text data:
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideById('slide-1')const table = fSlide.insertTableFromData( [ ['Quarter', 'Owner', 'Status'], ['Q1', 'Sales', 'Done'], ['Q2', 'Marketing', 'In progress'], ], { id: 'status-table', rowHeight: 42, columnWidth: 160, },)Use the table builder when you need explicit layout control:
const tableInfo = fSlide.newTable() .setValues([ ['Metric', 'Value'], ['Revenue', '$120K'], ]) .setRows(2) .setColumns(2) .setAbsolutePosition(80, 120) .setSize(420, 180) .build()const table = fSlide.insertTable(tableInfo)Read and update table cells:
const table = fSlide.getTableById('status-table') ?? fSlide.getTableAt(0)if (table) { console.log(table.describe()) console.log(table.getCellText(0, 0)) table.getCell(1, 2)?.setText('Blocked') table.getCell(0, 0)?.setBackgroundColor('#E8F1FF')}Update or remove an existing table:
const table = fSlide.getTableById('status-table')if (table) { const nextTableInfo = table.toBuilder() .setValues([ ['Quarter', 'Owner', 'Status'], ['Q1', 'Sales', 'Done'], ['Q2', 'Marketing', 'Blocked'], ]) .setSize(480, 200) .build() fSlide.updateTable(nextTableInfo) fSlide.removeTable(table)}Table row and column indexes are zero-based. Builder row and column counts expand to fit the values you provide, so setValues() can be used as the source of truth for simple tables.
How is this guide?