Core Features
Univer Sheets core features include a spreadsheet editor, formula engine, rendering engine, number formatting engine, design system, and UI component library. Together, they form a powerful platform for handling spreadsheets, supporting various formats and complex operations.
Features
Univer Sheets core features include:
- Spreadsheet Rendering: Supports rendering of Univer Sheets, including cursor and selection drawing.
- Cell Styling: Allows styling of cells in the spreadsheet, including font, color, borders, and alignment.
- Formula Calculation: Supports adding and calculating formulas in the spreadsheet, covering nearly all Excel functions, including mathematical, statistical, text, and date functions.
- Number Formatting: Enables formatting of numbers in the spreadsheet, including currency, percentage, date formats, etc.
- Gridlines and Frozen Panes: Supports displaying gridlines and frozen panes, making it easier for users to view and edit large datasets.
- Default Styles: Allows setting default styles for the spreadsheet, including default font, size, color, etc.
- Plugin System: Supports a plugin system that allows for custom plugins, such as formula plugins, image plugins, chart plugins, etc. This is also one of the core architectural capabilities of Univer.
Plugin Mode
Installation
pnpm add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-uinpm install @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-uiyarn add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-uibun add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-uiUsage
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import DesignEnUS from '@univerjs/design/locale/en-US'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US'import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverSheetsPlugin } from '@univerjs/sheets'import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui'import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US'import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui'import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-ui/locale/en-US'import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US'import SheetsEnUS from '@univerjs/sheets/locale/en-US'import { UniverUIPlugin } from '@univerjs/ui'import UIEnUS from '@univerjs/ui/locale/en-US'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs/docs-ui/lib/index.css'import '@univerjs/sheets-ui/lib/index.css'import '@univerjs/sheets-formula-ui/lib/index.css'import '@univerjs/sheets-numfmt-ui/lib/index.css'import '@univerjs/engine-formula/facade'import '@univerjs/ui/facade'import '@univerjs/docs-ui/facade'import '@univerjs/sheets/facade'import '@univerjs/sheets-ui/facade'import '@univerjs/sheets-formula/facade'import '@univerjs/sheets-numfmt/facade'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DesignEnUS, UIEnUS, DocsUIEnUS, SheetsEnUS, SheetsUIEnUS, SheetsFormulaUIEnUS, SheetsNumfmtUIEnUS, ), },})univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverFormulaEnginePlugin)univer.registerPlugin(UniverUIPlugin, { container: 'app',})univer.registerPlugin(UniverDocsPlugin)univer.registerPlugin(UniverDocsUIPlugin)univer.registerPlugin(UniverSheetsPlugin)univer.registerPlugin(UniverSheetsUIPlugin)univer.registerPlugin(UniverSheetsFormulaPlugin)univer.registerPlugin(UniverSheetsFormulaUIPlugin)univer.registerPlugin(UniverSheetsNumfmtPlugin)univer.registerPlugin(UniverSheetsNumfmtUIPlugin)Plugins and Configuration
@univerjs/core
This plugin is the core library of Univer, providing basic functionalities such as creating Univer instances, themes, and languages.
interface UniverParameter { // Univer instance theme, default is `defaultTheme` theme: IStyleSheet // Whether to use dark mode, default is false darkMode?: boolean // The locale of the Univer instance locale: LocaleType // The locale objects to use, with keys as locale types and values as corresponding locale objects locales: ILocales // The log level of the Univer instance logLevel?: LogLevel}Reference: Univer
@univerjs/engine-render
This plugin is the rendering engine of Univer, responsible for rendering, scrollbars, cursor, and selection rendering. It provides the UniverRenderEnginePlugin.
Reference: @univerjs/engine-render
@univerjs/engine-formula
This plugin is the formula engine of Univer, responsible for calculating and processing formulas. It provides the UniverFormulaEnginePlugin.
Reference: @univerjs/engine-formula
@univerjs/design
This plugin is the design system of Univer, providing all basic components and styles.
See: UI Chapter
@univerjs/ui
This plugin is the UI foundation of Univer. It provides the UniverUIPlugin.
The UniverUIPlugin provides some configuration options that can be used for basic layout configuration.
interface IUniverUIConfig { // Container element, can be a string or a DOM element container?: string | HTMLElement // Whether to show the header header?: boolean // Whether to show the header toolbar toolbar?: boolean // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode ribbonType?: RibbonType // Whether to show the context menu contextMenu?: boolean // Whether to disable auto focus disableAutoFocus?: true // Dependency injection override configuration override?: DependencyOverride // Menu configuration menu?: MenuConfig}The menu configuration option can be used to simply set the display or hidden state of certain specific menu items:
univer.registerPlugin(UniverSheetsUIPlugin, { menu: { 'sheet.command.set-range-bold': { hidden: true, }, 'sheet.command.set-range-italic': { hidden: true, disabled: true, }, },})Here, 'sheet.command.set-range-bold' and 'sheet.command.set-range-italic' are the names of the commands, indicating the corresponding menu items. You can refer to the Menu Item ID List below.
Reference: @univerjs/ui
@univerjs/docs
This plugin is the core plugin of Univer Docs. It provides the UniverDocsPlugin.
Reference: @univerjs/docs
@univerjs/docs-ui
This plugin is the UI plugin of Univer Docs, which includes UI components and interactions for the document editor. It provides the UniverDocsUIPlugin.
Reference: @univerjs/docs-ui
@univerjs/sheets
This plugin is the core plugin of Univer Sheets, providing the core functionalities of the spreadsheet editor. It provides the UniverSheetsPlugin.
The UniverSheetsPlugin provides some configuration options that can be used for the spreadsheet editor configuration.
interface IUniverSheetsConfig { // If both row style and column style are set, whether row style precedes column style isRowStylePrecedeColumnStyle?: boolean // Whether auto height applies to merged cells autoHeightForMergedCells?: boolean /** * Whether synchronize the frozen state to other users in real-time collaboration. * @default true */ freezeSync?: boolean}Reference: @univerjs/sheets
@univerjs/sheets-ui
This plugin is the UI plugin of Univer Sheets, which includes UI components and interactions for the spreadsheet editor. It provides the UniverSheetsUIPlugin.
The UniverSheetsUIPlugin provides some configuration options that can be used for the spreadsheet editor UI configuration.
interface IUniverSheetsUIConfig { // Whether to show the footer. footer?: | false | { // The sheet bar is the sub-sheet manager, including adding/switching/deleting sub-sheets. sheetBar?: boolean // The statistic bar includes statistics of the current selection, such as count, sum, average, etc. statisticBar?: boolean // The bottom menu includes options like highlight, gridlines, etc. menus?: boolean // The zoom slider at the bottom. zoomSlider?: boolean /** * The config of the add sheet button in the sheet bar. */ addSheetButtonConfig?: { /** * Whether to show the add sheet button in the sheet bar. * When `footer` or `footer.sheetBar` is false, this config will not work because the sheet bar will not be rendered. * @default true */ show?: boolean /** * The default row count of the new sheet created by the add sheet button. * @default 1000 */ defaultRowCount?: number /** * The default column count of the new sheet created by the add sheet button. * @default 20 */ defaultColumnCount?: number } } // Whether to show the formula bar formulaBar?: boolean clipboardConfig?: { // Whether to show the paste options button after paste operation hidePasteOptions?: boolean } // The configuration for the scroll bar scrollConfig?: IScrollBarProps /** * Strategy for showing the protected range shadow. * - true or 'always': Show shadow for all protected ranges (default behavior) * - 'non-editable': Only show shadow for ranges that cannot be edited (Edit permission is false) * - 'non-viewable': Only show shadow for ranges that cannot be viewed (View permission is false) * - false or 'none': Never show shadow for protected ranges * @default true */ protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none' // Whether to disable the force string alert. disableForceStringAlert?: boolean // Whether to disable the force string mark. disableForceStringMark?: boolean}Reference: @univerjs/sheets-ui
Preset Mode
Installation
pnpm add @univerjs/presets @univerjs/preset-sheets-corenpm install @univerjs/presets @univerjs/preset-sheets-coreyarn add @univerjs/presets @univerjs/preset-sheets-corebun add @univerjs/presets @univerjs/preset-sheets-coreUsage
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS), }, presets: [UniverSheetsCorePreset()],})univerAPI.createWorkbook({})Presets and Configuration
@univerjs/presets
This preset provides the createUniver method to create a Univer application, and exposes all methods and objects from @univerjs/core and @univerjs/design.
The createUniver method accepts a configuration object that includes options for theme, language, presets, etc. It returns a Univer instance univer and an FUniver instance univerAPI for calling the Facade API.
interface CreateUniverParameter { // Univer instance theme, default is `defaultTheme` theme: IStyleSheet // Whether to use dark mode, default is false darkMode?: boolean // The locale of the Univer instance locale: LocaleType region?: LocaleType // The locale objects to use, with keys as locale types and values as corresponding locale objects locales: ILocales // The log level of the Univer instance logLevel?: LogLevel // The list of presets to use. presets: IPresets[] // The list of plugins to use. plugins: IPlugins[]}Reference: createUniver
@univerjs/preset-sheets-core
This preset is the core preset of Univer Sheets, which includes the necessary core features for document editing, formula engine, rendering engine, etc.
interface IUniverSheetsCorePresetConfig { // Container element, can be a string or a DOM element container?: string | HTMLElement // Whether to show the header header?: boolean // Whether to show the header toolbar toolbar?: boolean // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode ribbonType?: RibbonType // Whether to show the footer footer?: | false | { // Sheet bar is the sub-sheet manager, including adding/switching/deleting sub-sheets. sheetBar?: boolean // Statistic bar includes statistics of the current selection, such as count, sum, average, etc. statisticBar?: boolean // The bottom menu includes options like highlight, gridlines, etc. menus?: boolean // The zoom slider at the bottom. zoomSlider?: boolean /** * The config of the add sheet button in the sheet bar. */ addSheetButtonConfig?: { /** * Whether to show the add sheet button in the sheet bar. * When `footer` or `footer.sheetBar` is false, this config will not work because the sheet bar will not be rendered. * @default true */ show?: boolean /** * The default row count of the new sheet created by the add sheet button. * @default 1000 */ defaultRowCount?: number /** * The default column count of the new sheet created by the add sheet button. * @default 20 */ defaultColumnCount?: number } } // Whether to show the context menu contextMenu?: boolean // Whether to disable auto focus disableAutoFocus?: true // Menu configuration menu?: MenuConfig sheets?: { // If both row style and column style are set, whether row style precedes column style isRowStylePrecedeColumnStyle?: boolean // Whether auto height applies to merged cells autoHeightForMergedCells?: boolean /** * Whether synchronize the frozen state to other users in real-time collaboration. * @default true */ freezeSync?: boolean clipboardConfig?: { // Whether to show the paste options button after paste operation hidePasteOptions?: boolean } // The configuration for the scroll bar scrollConfig?: IScrollBarProps /** * Strategy for showing the protected range shadow. * - true or 'always': Show shadow for all protected ranges (default behavior) * - 'non-editable': Only show shadow for ranges that cannot be edited (Edit permission is false) * - 'non-viewable': Only show shadow for ranges that cannot be viewed (View permission is false) * - false or 'none': Never show shadow for protected ranges * @default true */ protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none' // Whether to disable the force string alert. disableForceStringAlert?: boolean // Whether to disable the force string mark. disableForceStringMark?: boolean } // ... More configuration options}The menu configuration option can be used to simply set the display or hidden state of certain specific menu items:
UniverSheetsCorePreset({ menu: { 'sheet.command.set-range-bold': { hidden: true, }, 'sheet.command.set-range-italic': { hidden: true, disabled: true, }, },})Here, 'sheet.command.set-range-bold' and 'sheet.command.set-range-italic' are the names of the commands, indicating the corresponding menu items. You can refer to the Menu Item ID List below.
Reference: @univerjs/preset-sheets-core
Toolbar Layout and RibbonType
By configuring the ribbonType property in IUniverSheetsCorePresetConfig or IUniverUIConfig, you can set the layout of the toolbar.
ribbonType supports the following four modes:
classic: Default classic mode, with groups on top and the toolbar laid out below, suitable for users accustomed to traditional layouts.grid: Grid mode, retaining tabs at the top and arranging each group's tools below in a two-row grid, suitable for desktop layouts that need more tools visible at once.collapsed: Compact mode, where groups and the toolbar are laid out in the same row, suitable for scenarios with limited vertical screen space.simple: Ungrouped mode, where all tools are placed in a flat list, suitable for users familiar with toolbar functions.
Menu Item ID List
data-u-command attribute on the menu item DOM element.Toolbar Menu Items
| Menu Item ID | Menu Item Name |
|---|---|
| univer.command.undo | Undo |
| univer.command.redo | Redo |
| sheet.command.set-once-format-painter | Paint format |
| sheet.command.set-range-bold | Bold |
| sheet.command.set-range-italic | Italic |
| sheet.command.set-range-underline | Underline |
| sheet.command.set-range-stroke | Strikethrough |
| sheet.command.set-range-font-family | Font |
| sheet.command.set-range-fontsize | Font size |
| sheet.command.set-range-text-color | Text color |
| sheet.command.set-background-color | Fill color |
| sheet.command.set-border-basic | Border |
| sheet.command.set-horizontal-text-align | Horizontal align |
| sheet.command.set-vertical-text-align | Vertical align |
| sheet.command.set-text-wrap | Text wrap |
| sheet.command.set-text-rotation | Text rotate |
| sheet.command.add-worksheet-merge | Merge cells |
| sheet.command.add-worksheet-merge-all | Merge cells - Merge all |
| sheet.command.add-worksheet-merge-vertical | Merge cells - Vertical merge |
| sheet.command.add-worksheet-merge-horizontal | Merge cells - Horizontal merge |
| sheet.command.remove-worksheet-merge | Merge cells - Cancel merge |
| sheet.operation.open.conditional.formatting.panel | Conditional Formatting |
| formula-ui.operation.insert-function | Functions |
| formula-ui.operation.more-functions | Functions - More Functions |
| sheet.menu.sheets-sort | Sort |
| sheet.command.sort-range-asc | Sort - Ascending |
| sheet.command.sort-range-asc-ext | Sort - Expand Ascending |
| sheet.command.sort-range-desc | Sort - Descending |
| sheet.command.sort-range-desc-ext | Sort - Expand Descending |
| sheet.command.sort-range-custom | Sort - Custom Sort |
| sheet.menu.image | Image |
| sheet.command.insert-float-image | Image - Float Image |
| sheet.command.insert-cell-image | Image - Cell Image |
| sheet.command.numfmt.set.currency | Currency |
| sheet.command.numfmt.add.decimal.command | Increase decimal places |
| sheet.command.numfmt.subtract.decimal.command | Decreasing decimal places |
| sheet.command.numfmt.set.percent | Percentage |
| sheet.operation.open.numfmt.panel | Number format |
| sheet.menu.data-validation | Data validation |
| data-validation.operation.open-validation-panel | Data validation - Data validation management |
| data-validation.command.addRuleAndOpen | Data validation - Add Rule |
| sheet.command.smart-toggle-filter | Toggle Filter |
| sheet.command.clear-filter-criteria | Toggle Filter - Clear Filter Conditions |
| sheet.command.re-calc-filter | Toggle Filter - Re-calc Filter Conditions |
| sheet.operation.open-pivot-table-range-selector-panel | Pivot Table |
| sheet.menu.print | |
| sheet.operation.print-open | Print - Print |
| sheet.operation.open-print-grid-sidebar | Print - Print Layout |
| data-connector.operation.sidebar | Data Connector |
| sheets-exchange-client.operation.exchange | File |
| exchange-client.operation.import-xlsx | File - Open(File) |
| exchange-client.operation.export-xlsx | File - Save As |
| sheet.command.menu-insert-chart | Insert chart |
| sheet.command.add-range-protection-from-toolbar | Protection |
| univer.operation.toggle-edit-history | Edit History |
| sheet.operation.open-sparkline-selector | Sparkline |
| sheet.operation.toggle-comment-panel | Comment Management |
| sheet.operation.insert-hyper-link-toolbar | Insert Link |
| ui.operation.open-find-dialog | Find & Replace |
| base-ui.operation.toggle-shortcut-panel | Toggle Shortcut Panel |
| sheet.toolbar.text-to-number | Text to Number |
Context Menu Items
| Menu Item ID | Menu Item Name |
|---|---|
| sheet.command.copy | Copy |
| sheet.command.cut | Cut |
| sheet.command.paste | Paste |
| sheet.menu.copy-special | Copy Special |
| sheet.command.copy-formula-only | Copy Special - Copy Formula Only |
| sheet.menu.paste-special | Paste Special |
| sheet.command.paste-values | Paste Special - Paste Value |
| sheet.command.paste-format | Paste Special - Paste Format |
| sheet.command.paste-col-width | Paste Special - Paste Column Width |
| sheet.command.paste-besides-border | Paste Special - Paste Besides Border Styles |
| sheet.command.paste-formula | Paste Special - Paste Formula |
| sheet.menu.clear-selection | Clear |
| sheet.command.clear-selection-content | Clear - Clear Contents |
| sheet.command.clear-selection-format | Clear - Clear Formats |
| sheet.command.clear-selection-all | Clear - Clear All |
| sheet.contextMenu.text-to-number | Text to Number |
| sheet.menu.cell-insert | Insert |
| sheet.command.insert-row-before | Insert - Insert Row Before |
| sheet.command.insert-col-before | Insert - Insert Column Before |
| sheet.command.insert-range-move-right-confirm | Insert - Move Right |
| sheet.command.insert-range-move-down-confirm | Insert - Move Down |
| sheet.menu.delete | Delete |
| sheet.command.remove-row-confirm | Delete Selected Row |
| sheet.command.remove-col-confirm | Delete Selected Column |
| sheet.command.delete-range-move-left-confirm | Delete - Move Left |
| sheet.command.delete-range-move-up-confirm | Delete - Move Up |
| sheet.menu.sheet-frozen | Freeze |
| sheet.header-menu.sheet-frozen | Freeze (Row & Column Header Right Click Menu Item) |
| sheet.command.set-selection-frozen | Freeze - Freeze |
| sheet.command.set-row-frozen | Freeze - Freeze to this row |
| sheet.command.set-col-frozen | Freeze - Freeze to this column |
| sheet.command.cancel-frozen | Freeze - Cancel freeze |
| sheet.contextMenu.permission | Protect Rows And Columns |
| sheet.command.add-range-protection-from-context-menu | Protect Rows And Columns - Add Protection Range |
| sheet.command.set-range-protection-from-context-menu | Protect Rows And Columns - Set Protection Range |
| sheet.command.delete-range-protection-from-context-menu | Protect Rows And Columns - Remove Protection Range |
| sheet.command.view-sheet-permission-from-context-menu | Protect Rows And Columns - View All Protection Ranges |
| sheet.menu.sheets-sort-ctx | Sort |
| sheet.command.sort-range-asc-ctx | Sort - Ascending |
| sheet.command.sort-range-asc-ext-ctx | Sort - Expand Ascending |
| sheet.command.sort-range-desc-ctx | Sort - Descending |
| sheet.command.sort-range-desc-ext-ctx | Sort - Expand Descending |
| sheet.command.sort-range-custom-ctx | Sort - Custom Sort |
| sheet.operation.show-comment-modal | Add Comment |
| sheet.operation.insert-hyper-link | Insert Link |
| sheet.operation.screenshot | Copy as picture |
Context Menu Items - Row Header
| Menu Item ID | Menu Item Name |
|---|---|
| sheet.command.insert-multi-rows-above | Insert Row Before |
| sheet.command.insert-multi-rows-after | Insert Row After |
| sheet.command.hide-row-confirm | Hide Selected Row |
| sheet.command.set-selected-rows-visible | Show Hide Row |
| sheet.command.set-row-height | Row Height |
| sheet.command.set-row-is-auto-height | Fit for data |
Context Menu Items - Column Header
| Menu Item ID | Menu Item Name |
|---|---|
| sheet.command.insert-multi-cols-before | Insert Column Before |
| sheet.command.insert-multi-cols-right | Insert Column After |
| sheet.command.hide-col-confirm | Hide Selected Column |
| sheet.command.set-selected-cols-visible | Show Hide Column |
| sheet.command.set-worksheet-col-width | Column Width |
| sheet.command.set-col-auto-width | Fit for data |
How is this guide?