Core Features

Preset ModePlugin Mode

Preset Info

@univerjs/preset-sheets-core

Server Required

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.

Preset Mode

Installation

npm install @univerjs/presets @univerjs/preset-sheets-core

Usage

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
  // 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. default: grouped 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
  }
  // 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

  // ... 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.

Reference: @univerjs/preset-sheets-core

Plugin Mode

Installation

npm 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-ui

Usage

import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import DesignEnUS from '@univerjs/design/locale/en-US'
import { UniverSheetsPlugin } from '@univerjs/docs'
import { UniverSheetsUIPlugin } from '@univerjs/docs-ui'
import SheetsUIEnUS 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,
      SheetsUIEnUS,
      SheetsEnUS,
      SheetsUIEnUS,
      SheetsFormulaUIEnUS,
      SheetsNumfmtUIEnUS,
    ),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
})
univer.registerPlugin(UniverSheetsPlugin)
univer.registerPlugin(UniverSheetsUIPlugin)
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. default: grouped 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.

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
}

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
  }
  // 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
  // Whether to show the shadow for protected ranges.
  protectedRangeShadow?: boolean
  // Whether to disable the force string alert.
  disableForceStringAlert?: boolean
  // Whether to disable the force string mark.
  disableForceStringMark?: boolean
}

Reference: @univerjs/sheets-ui

By configuring the ribbonType property in IUniverSheetsCorePresetConfig or IUniverUIConfig, you can set the layout of the toolbar.

ribbonType supports two modes: "default" for grouped mode, where the toolbar is organized by function, and "simple" for ungrouped mode, where all tools are displayed in a flat list.

On this page