UI Overview

@univerjs-pro/bases-ui provides the licensed browser workbench for Univer Bases. It renders the table and view navigation, grid, kanban, calendar, gantt and gallery views, field editors, record detail panel, menus, and selection state.

Register the workbench

Register the license and formula engines before the Bases plugins. Formula fields use @univerjs-pro/engine-formula; they do not require a Sheets application.

univer.registerPlugin(UniverLicensePlugin, {  license: process.env.CLIENT_LICENSE_TEXT,})univer.registerPlugin(UniverFormulaEnginePlugin)univer.registerPlugin(UniverProFormulaEnginePlugin)univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverUIPlugin, { container: 'app' })univer.registerPlugin(UniverBasesPlugin)univer.registerPlugin(UniverBasesUIPlugin)

See Installation & Basic Usage for imports, styles, and locale data.

Configure the initial layout

IUniverBaseUIConfig controls the workbench regions and the first table and view shown after startup.

univer.registerPlugin(UniverBasesUIPlugin, {  workbench: {    header: true,    headerMenu: true,    content: true,    leftSidebar: true,    rightSidebar: false,    rightPanelMode: 'dock',  },  initialState: {    tableId: 'tasks',    viewId: 'kanban',  },})

Use disableEdit for a read-only workbench, and use attachment, personOptions, or groupOptions only when the corresponding Base fields need those host-provided values.