Core Features

Facade API	Has Paid Plan	Univer Server	Univer on Node.js	Preset
✅	-	-	✅	UniverSheetsCorePreset

Core packages implement the basic functions of the spreadsheet, including the core functions of Univer Sheet, such as creating workbooks, cell editing, cell selection, and formulas.

This feature includes the following plugin packages:

@univerjs/engine-render - Render Engine Plugin
@univerjs/engine-formula - Formula Engine Plugin
@univerjs/drawing - Fundamental Drawing Plugin
@univerjs/ui - Fundamental UI Plugin
@univerjs/docs - Doc Plugin
@univerjs/docs-ui - Doc UI Plugin
@univerjs/sheets - Sheet Plugin
@univerjs/sheets-ui - Sheet UI Plugin
@univerjs/sheets-formula - Formula Plugin
@univerjs/sheets-formula-ui - Formula UI Plugin
@univerjs/sheets-numfmt - Number Format Plugin
@univerjs/sheets-numfmt-ui - Number Format UI Plugin

Presets Installation


npm install @univerjs/presets


pnpm add @univerjs/presets


yarn add @univerjs/presets


bun add @univerjs/presets


import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US';
 
import '@univerjs/presets/lib/styles/preset-sheets-core.css'
 
const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: merge(
      {},
      UniverPresetSheetsCoreEnUS
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset(),
  ]
});

Configuration

`createUniver`


const { univerAPI } = createUniver({
  theme: IStyleSheet;,
  locale: LocaleType;
  locales: ILocales;
  logLevel?: LogLevel;
  presets: IPresets[],
  plugins: IPlugins[],
});

Presets Configuration

The configuration of the plugin can also be passed directly to the corresponding preset for use, as in the common configuration of @univerjs/ui:


const { univerAPI } = createUniver({
  presets: [
    UniverSheetsCorePreset({
      container?: string | HTMLElement;
 
      header?: boolean;
      toolbar?: boolean;
      footer?: boolean;
      contextMenu?: boolean;
 
      disableAutoFocus?: true;
      override?: DependencyOverride;
      menu?: MenuConfig;
 
      // ... More configuration options
    }),
  ]
});

container - Container element, can be a string or DOM element.
header - Whether to display the header.
toolbar - Whether to display the header toolbar. 0.2.0+
footer - Whether to display the footer.
contextMenu - Whether to display the context menu.
disableAutoFocus - Whether to disable auto-focus.
override - Dependency injection override configuration.
menu - Menu configuration, see Customize menu items (hide menu items)

For a complete list of configuration options, see IUniverSheetsCorePresetConfig .

Piecemeal Installation

npm


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

pnpm


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

yarn


yarn 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 react react-dom rxjs


import { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverUIPlugin } from "@univerjs/ui";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsFormulaUIPlugin } from "@univerjs/sheets-formula-ui";
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
import { UniverSheetsNumfmtUIPlugin } from "@univerjs/sheets-numfmt-ui";
import DesignEnUS from '@univerjs/design/locale/en-US';
import UIEnUS from '@univerjs/ui/locale/en-US';
import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US';
import SheetsEnUS from '@univerjs/sheets/locale/en-US';
import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US';
import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US';
import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-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({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: merge(
      {},
      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);

Configuration

`@univerjs/core`

@univerjs/core provides some configuration options that can be used to configure the theme, internationalization, etc.


new Univer({
  theme: IStyleSheet;
  locale: LocaleType;
  locales: ILocales;
  logLevel?: LogLevel;
});

For a complete list of configuration options, see IUniverConfig .

`@univerjs/ui`

@univerjs/ui provides some configuration options that can be used to configure the basic layout.


univer.registerPlugin(UniverUIPlugin, {
  container?: string | HTMLElement;
 
  header?: boolean;
  toolbar?: boolean;
  footer?: boolean;
  contextMenu?: boolean;
 
  disableAutoFocus?: true;
  override?: DependencyOverride;
  menu?: MenuConfig;
});

container - Container element, can be a string or DOM element.
header - Whether to display the header.
toolbar - Whether to display the header toolbar. 0.2.0+
footer - Whether to display the footer.
contextMenu - Whether to display the context menu.
disableAutoFocus - Whether to disable auto-focus.
override - Dependency injection override configuration.
menu - Menu configuration, see Customize menu items (hide menu items)

For a complete list of configuration options, see IUniverUIConfig .

`@univerjs/sheets`


univer.registerPlugin(UniverSheetsPlugin, {
  // If the row style and column style be set both, and the row style should precede the column style or not
  isRowStylePrecedeColumnStyle?: boolean;
  // Auto height works for merged cells
  autoHeightForMergedCells?: boolean;
});

For a complete list of configuration options, see IUniverSheetsConfig 。

`@univerjs/sheets-ui`


univer.registerPlugin(UniverSheetsUIPlugin, {
  // Whether to show the formula bar
  formulaBar?: boolean;
  // Whether to show the statistics bar
  statusBarStatistics?: boolean;
  clipboardConfig?: {
    // Whether to display the Paste Options button after a paste operation
    hidePasteOptions?: boolean;
  };
  // ... More configuration options
});

For a complete list of configuration options, see IUniverSheetsUIConfig 。

Univer on Node.js Piecemeal Installation

npm


npm install @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/docs @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-numfmt

pnpm


pnpm add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/docs @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-numfmt

yarn


yarn add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/docs @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-numfmt rxjs


import { LocaleType, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
 
import '@univerjs/engine-formula/facade';
import '@univerjs/sheets/facade';
import '@univerjs/sheets-formula/facade';
import '@univerjs/sheets-numfmt/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
});
 
univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);
univer.registerPlugin(UniverDocsPlugin);
univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);
univer.registerPlugin(UniverSheetsNumfmtPlugin);