Core Features
@univerjs/preset-sheets-core
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, merge } from '@univerjs/presets'
import '@univerjs/preset-sheets-core/lib/index.css'
const { univerAPI } = createUniver({
locale: LocaleType.En_US,
locales: {
[LocaleType.En_US]: merge(
{},
UniverPresetSheetsCoreEnUS,
),
},
presets: [
UniverSheetsCorePreset(),
],
})
univerAPI.createWorkbook({})
Preset 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 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, merge, 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]: merge(
{},
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