Core Features

📊 Univer Sheet📝 Univer Doc

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.

Installation

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

Import

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/lib/index.css";
 
import { Univer } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";
 
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
 
import { UniverUIPlugin } from "@univerjs/ui";
 
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
 
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";

Internationalization

import { LocaleType, Tools } from '@univerjs/core';
import DesignEnUS from '@univerjs/design/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 SheetsFormulaEnUS from '@univerjs/sheets-formula/locale/en-US';
import UIEnUS from '@univerjs/ui/locale/en-US';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      DesignEnUS,
      DocsUIEnUS,
      SheetsEnUS,
      SheetsUIEnUS,
      SheetsFormulaEnUS,
      UIEnUS
    ),
  },
});

Register

univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);
 
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
});
 
univer.registerPlugin(UniverDocsPlugin, {
  hasScroll: false,
});
univer.registerPlugin(UniverDocsUIPlugin);
 
univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);
 
univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});

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

`@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;
  footer?: boolean;
  contextMenu?: boolean;
});

container - Container element, can be a string or DOM element.
header - Whether to display the header.
toolbar - Whether to display the header toolbar. 0.1.18+
footer - Whether to display the footer.
contextMenu - Whether to display the right-click menu.

Configure Cell Data Facade API