Univer Sheets

https://docs.univer.ai/guides/sheets
Admin
Univer Sheets is a flexible, extensible spreadsheet component that runs in both browser and Node.js...
Tokens:104,171
Snippets:987
Trust Score:7.7
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Zen Editor Plugin

Source: https://docs.univer.ai/guides/sheets/features/zen

Install the package using your preferred package manager.

```bash
npm install @univerjs/sheets-zen-editor
```

--------------------------------

### Install Live Share Plugin

Source: https://docs.univer.ai/guides/sheets/features/live-share

Install the required package using your preferred package manager.

```bash
npm install @univerjs-pro/live-share
```

--------------------------------

### Install Table Preset

Source: https://docs.univer.ai/guides/sheets/features/table

Command to install the @univerjs/preset-sheets-table package.

```bash
npm install @univerjs/preset-sheets-table
```

--------------------------------

### Install Thread Comment Preset

Source: https://docs.univer.ai/guides/sheets/features/comments

Install the required package using your preferred package manager.

```bash
npm install @univerjs/preset-sheets-thread-comment
```

--------------------------------

### Install Theme Plugins

Source: https://docs.univer.ai/guides/sheets/ui/themes

Install the required theme package via your preferred package manager.

```bash
npm install @univerjs/themes
```

--------------------------------

### Install Uniscript via NPM

Source: https://docs.univer.ai/guides/sheets/features/uniscript

Standard installation command for the Uniscript package.

```bash
npm install @univerjs/uniscript
```

--------------------------------

### Install Univer Web Component Adapter

Source: https://docs.univer.ai/guides/sheets/ui/components

Install the necessary package to enable Web Component integration with Univer.

```bash
npm install @univerjs/ui-adapter-web-component
```

--------------------------------

### Install Table Plugins

Source: https://docs.univer.ai/guides/sheets/features/table

Command to install the required sheets table and UI plugin packages.

```bash
npm install @univerjs/sheets-table @univerjs/sheets-table-ui
```

--------------------------------

### Install Edit History Dependencies

Source: https://docs.univer.ai/guides/sheets/features/edit-history

Install the required drawing, advanced, and collaboration presets for Univer Sheets.

```bash
npm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced @univerjs/preset-sheets-collaboration
```

--------------------------------

### Install Edit History Plugins

Source: https://docs.univer.ai/guides/sheets/features/edit-history

Install the required loader and viewer packages using npm.

```bash
npm install @univerjs-pro/edit-history-viewer @univerjs-pro/edit-history-loader
```

--------------------------------

### Install Sorting Preset

Source: https://docs.univer.ai/guides/sheets/features/sort

Command to install the sorting preset package via npm.

```bash
npm install @univerjs/preset-sheets-sort
```

--------------------------------

### Install Univer Sheets Core Preset

Source: https://docs.univer.ai/guides/sheets/features/core

Command to install the required Univer preset packages via npm.

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

--------------------------------

### Install Pro Formula Engine plugin

Source: https://docs.univer.ai/guides/sheets/features/advanced-formula

Install the commercial formula engine package via npm.

```bash
npm install @univerjs-pro/engine-formula
```

--------------------------------

### Install Univer Core Dependencies

Source: https://docs.univer.ai/guides/sheets/features/core

Install the necessary Univer packages via npm.

```bash
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
```

--------------------------------

### Install Collaboration Data Source

Source: https://docs.univer.ai/guides/sheets/features/comments

Install the additional package required when using the collaboration feature.

```bash
npm install @univerjs-pro/thread-comment-datasource
```

--------------------------------

### Install Sorting Plugin

Source: https://docs.univer.ai/guides/sheets/features/sort

Command to install the sorting plugin packages via npm.

```bash
npm install @univerjs/sheets-sort @univerjs/sheets-sort-ui
```

--------------------------------

### Registering the Network Plugin

Source: https://docs.univer.ai/guides/sheets/features/core/general-api

Required setup for enabling WebSocket functionality in Univer. Ensure the @univerjs/network package is installed and registered.

```typescript
// ... Omits other plugin imports
import { UniverNetworkPlugin } from '@univerjs/network'

// ... Omits other facade imports
import '@univerjs/network/facade'

// ... Omits other plugin registrations
univer.registerPlugin(UniverNetworkPlugin)
```

--------------------------------

### Install Conditional Formatting Packages

Source: https://docs.univer.ai/guides/sheets/features/conditional-formatting

Install the required core and UI packages for conditional formatting.

```bash
npm install @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-ui
```

--------------------------------

### Install Pivot Table Plugin

Source: https://docs.univer.ai/guides/sheets/features/pivot-table

Use the package manager of your choice to install the required pivot table packages.

```bash
npm install @univerjs-pro/sheets-pivot @univerjs-pro/sheets-pivot-ui
```

--------------------------------

### Installation

Source: https://docs.univer.ai/guides/sheets/features/filter

Install the Univer Sheets Filter and Filter UI plugins using npm, pnpm, yarn, or bun.

```APIDOC
## Installation

```
npm install @univerjs/sheets-filter @univerjs/sheets-filter-ui
```
```

--------------------------------

### Install Vue 3 Adapter Plugin - Univer Sheets

Source: https://docs.univer.ai/guides/sheets/ui/components

Install the `@univerjs/ui-adapter-vue3` package to enable Vue 3 component integration.

```bash
npm install @univerjs/ui-adapter-vue3
```

--------------------------------

### Formula Calculation Start Event

Source: https://docs.univer.ai/guides/sheets/features/core/formula

Listens for the start of the formula calculation process.

```typescript
// Listening to formula calculation start event
const formulaEngine = univerAPI.getFormula()
formulaEngine.calculationStart((forceCalculate) => {
  console.log(forceCalculate)
})
```

--------------------------------

### Install Advanced Formula Engine dependencies

Source: https://docs.univer.ai/guides/sheets/features/advanced-formula

Install the required drawing and advanced formula presets using npm.

```bash
npm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced
```

--------------------------------

### Install Data Validation Packages

Source: https://docs.univer.ai/guides/sheets/features/data-validation

Install the core, sheets, and UI data validation packages via npm.

```bash
npm install @univerjs/data-validation @univerjs/sheets-data-validation @univerjs/sheets-data-validation-ui
```

--------------------------------

### Install Sparkline Plugin

Source: https://docs.univer.ai/guides/sheets/features/sparkline

Use these commands to install the required sparkline packages via your preferred package manager.

```bash
npm install @univerjs-pro/sheets-sparkline @univerjs-pro/sheets-sparkline-ui
```

--------------------------------

### Install Thread Comment Plugins

Source: https://docs.univer.ai/guides/sheets/features/comments

Install the core and UI packages for thread comments and sheet-specific thread comments.

```bash
npm install @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/sheets-thread-comment @univerjs/sheets-thread-comment-ui
```

--------------------------------

### univerAPI.startFollowing()

Source: https://docs.univer.ai/guides/sheets/features/live-share

Starts following another user's perspective.

```APIDOC
## univerAPI.startFollowing()

### Description
Enables following mode, where the user's view synchronizes with the perspective of the presenter.
```

--------------------------------

### Install Conditional Formatting Preset

Source: https://docs.univer.ai/guides/sheets/features/conditional-formatting

Use the package manager of your choice to install the conditional formatting preset dependency.

```bash
npm install @univerjs/preset-sheets-conditional-formatting
```

--------------------------------

### Install Filter Preset Package

Source: https://docs.univer.ai/guides/sheets/features/filter

Install the filter preset package using npm. This is the first step to enable filtering capabilities in Univer Sheets.

```bash
npm install @univerjs/preset-sheets-filter
```

--------------------------------

### Integrate Custom Theme with Locale

Source: https://docs.univer.ai/guides/sheets/ui/themes

Example of initializing Univer with a custom theme and locale settings.

```typescript
import { Univer } from '@univerjs/core';
import { customTheme } from './custom-theme';

const univer = new Univer({
    theme: customTheme,
    locale: LocaleType.EN_US,
});
```

--------------------------------

### Install Data Validation Preset

Source: https://docs.univer.ai/guides/sheets/features/data-validation

Use the package manager command to add the data validation preset to your project.

```bash
npm install @univerjs/preset-sheets-data-validation
```

--------------------------------

### Initialize Univer with Sheets Core

Source: https://docs.univer.ai/guides/sheets/features/core

Basic setup for creating a Univer instance with the Sheets Core preset and English locale configuration.

```typescript
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({})
```

--------------------------------

### Configure Freeze State Object

Source: https://docs.univer.ai/guides/sheets/features/core/freeze

Example configuration object for freezing specific rows and columns.

```json
{
  "xSplit": 1, // Freeze 1 column, which is column B
  "ySplit": 1, // Freeze 1 row, which is row 2
  "startRow": 2, // The starting row that can be scrolled is row 3
  "startColumn": 2 // The starting column that can be scrolled is column C
}
```

--------------------------------

### Usage

Source: https://docs.univer.ai/guides/sheets/features/filter

Initialize Univer and register the Filter and Filter UI plugins. Import necessary modules and CSS.

```APIDOC
## Usage

```
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsFilterPlugin } from '@univerjs/sheets-filter'
import { UniverSheetsFilterUIPlugin } from '@univerjs/sheets-filter-ui'
import SheetsFilterUIEnUS from '@univerjs/sheets-filter-ui/locale/en-US'

import '@univerjs/sheets-filter-ui/lib/index.css'

import '@univerjs/sheets-filter/facade'

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      SheetsFilterUIEnUS,
    ),
  },
})

univer.registerPlugin(UniverSheetsFilterPlugin)
univer.registerPlugin(UniverSheetsFilterUIPlugin)
```
```

--------------------------------

### Implementing WebSocket Collaboration

Source: https://docs.univer.ai/guides/sheets/features/core/general-api

Example of creating a WebSocket connection and synchronizing commands. Requires a valid unitID to enable collaborative features.

```typescript
// Replace the URL with the address of your own WebSocket service
const ws = univerAPI.createSocket('ws://47.100.177.253:8449/ws')

ws.open$.subscribe(() => {
  console.log('websocket opened')
  ws.send('hello')
})

ws.message$.subscribe((message) => {
  console.log('websocket message', message)
  const content = JSON.parse(message.data).content
  if (!content.includes('command')) {
    return
  }

  const commandInfo = JSON.parse(content)
  const { command, options } = commandInfo
  const { id, params } = command

  // Upon receiving collaborative data, it is locally saved
  univerAPI.executeCommand(id, params, options)
})

ws.close$.subscribe(() => {
  console.log('websocket closed')
})

ws.error$.subscribe((error) => {
  console.log('websocket error', error)
})

univerAPI.onCommandExecuted((command, options) => {
  // Only synchronize local mutations
  if (command.type !== 2 || options?.fromCollab || options?.onlyLocal || command.id === 'doc.mutation.rich-text-editing') {
    return
  }

  const commandInfo = JSON.stringify({ command, options: { fromCollab: true } })
  ws.send(commandInfo)
})
```

--------------------------------

### univerAPI.startPresenting()

Source: https://docs.univer.ai/guides/sheets/features/live-share

Initiates a presentation session, allowing others to follow the user's perspective.

```APIDOC
## univerAPI.startPresenting()

### Description
Starts the presenting mode, enabling other users to synchronize their view with the current user's operations.
```

--------------------------------

### Initialize Univer Sheets via CDN

Source: https://docs.univer.ai/guides/sheets/getting-started/installation/cdn

A complete HTML template demonstrating how to load dependencies and initialize Univer Sheets using UMD builds.

```html
<head>
  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/rxjs/dist/bundles/rxjs.umd.min.js"></script>
  <script src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"></script>

  <script src="https://unpkg.com/@univerjs/presets/lib/umd/index.js"></script>

  <script src="https://unpkg.com/@univerjs/preset-sheets-core/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/preset-sheets-core/lib/umd/locales/en-US.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/preset-sheets-core/lib/index.css" />
  <style>
    html,
    body,
    #root,
    #app {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    const { createUniver } = UniverPresets
    const { LocaleType, mergeLocales } = UniverCore
    const { UniverSheetsCorePreset } = UniverPresetSheetsCore

    const { univerAPI } = createUniver({
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS),
      },
      presets: [UniverSheetsCorePreset()],
    })

    univerAPI.createWorkbook({ name: 'Test Sheet' })
  </script>
</body>
```

--------------------------------

### Initialize Univer Instance

Source: https://docs.univer.ai/guides/sheets/features/core

Import required plugins, styles, and facades, then register them with a new Univer instance.

```typescript
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)
```

--------------------------------

### Background Color Style Example

Source: https://docs.univer.ai/guides/sheets/model/cell-data

Shows how to set the background color for a cell's style using the `bg.rgb` property within `IStyleData`.

```typescript
interface IStyleData {
  bg: {
    rgb: '#ff0000' // Background color is red
  }
}
```

--------------------------------

### Create Ranges using Coordinates or A1 Notation

Source: https://docs.univer.ai/guides/sheets/features/core/range-selection

Examples of defining ranges using row/column indices or standard A1 notation strings.

```javascript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Create a range of A1 cell:
const fRange = fWorksheet.getRange(0, 0)
console.log(fRange, fRange.getA1Notation())

// Creates a range of A1:B2:
const fRange2 = fWorksheet.getRange(0, 0, 2, 2)
console.log(fRange2, fRange2.getA1Notation())
```

```javascript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Get the A1:B2 range on named Sheet1
const fRange1 = fWorksheet.getRange('Sheet1!A1:B2')
console.log(fRange1, fRange1.getA1Notation())

// Get a single cell A1
const fRange2 = fWorksheet.getRange('A1')
console.log(fRange2, fRange2.getA1Notation())

// Get the A1:B2 range
const fRange3 = fWorksheet.getRange('A1:B2')
console.log(fRange3, fRange3.getA1Notation())

// Get the range of column A
const fRange4 = fWorksheet.getRange('A:A')
console.log(fRange4, fRange4.getA1Notation())

// Get the range of row 1
const fRange5 = fWorksheet.getRange('1:1')
console.log(fRange5, fRange5.getA1Notation())
```

--------------------------------

### Initialize and dispose Univer in Vue component

Source: https://docs.univer.ai/guides/sheets/getting-started/integrations/vue

Example of mounting Univer in the component lifecycle and disposing of instances to prevent memory leaks.

```html
<script>
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'

export default {
  mounted() {
    const { univer, univerAPI } = createUniver({
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: mergeLocales(
          UniverPresetSheetsCoreEnUS,
        ),
      },
      presets: [
        UniverSheetsCorePreset({
          container: this.$refs.container,
        }),
      ],
    })

    univerAPI.createWorkbook({})

    this.univerInstance = univer
    this.univerAPIInstance = univerAPI
  },
  beforeUnmount() {
    this.univerInstance?.dispose()
    this.univerAPIInstance?.dispose()
    this.univerInstance = null
    this.univerAPIInstance = null
  },
}
</script>

<template>
  <div ref="container" />
</template>
```

--------------------------------

### Font Size Style Example

Source: https://docs.univer.ai/guides/sheets/model/cell-data

Illustrates setting the font size for a cell's style using the `fs` property, with units in points (pt).

```typescript
interface IStyleData {
  fs: 12 // Font size is 12 pt
}
```

--------------------------------

### Initialize Univer with Collaboration Presets

Source: https://docs.univer.ai/guides/sheets/features/edit-history

Configure the Univer instance with necessary presets and collaboration settings.

```typescript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'
import UniverPresetSheetsAdvancedEnUS from '@univerjs/preset-sheets-advanced/locales/en-US'
import { UniverSheetsCollaborationPreset } from '@univerjs/preset-sheets-collaboration'
import UniverPresetSheetsCollaborationEnUS from '@univerjs/preset-sheets-collaboration/locales/en-US'
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'
import UniverPresetSheetsDrawingEnUS from '@univerjs/preset-sheets-drawing/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-drawing/lib/index.css'
import '@univerjs/preset-sheets-advanced/lib/index.css'
import '@univerjs/preset-sheets-collaboration/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsDrawingEnUS, 
      UniverPresetSheetsAdvancedEnUS, 
      UniverPresetSheetsCollaborationEnUS, 
    ),
  },
  collaboration: true, 
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsDrawingPreset({ 
      collaboration: true,
    }), 
    UniverSheetsAdvancedPreset({ 
      // configuration for advanced features
    }), 
    UniverSheetsCollaborationPreset({ 
      universerEndpoint: 'http://localhost:3010', 
    }), 
  ],
})
```

--------------------------------

### Initialize Facade API

Source: https://docs.univer.ai/guides/sheets/getting-started/facade

Wrap an existing Univer instance with FUniver to enable the Facade API.

```typescript
import { FUniver } from '@univerjs/core/facade'

const univerAPI = FUniver.newAPI(univer)
```

--------------------------------

### Initialize Univer Instance

Source: https://docs.univer.ai/guides/sheets/getting-started/installation/cdn

Configure and register plugins to initialize the Univer instance in the browser.

```javascript
<script>
    const { Univer, LocaleType, mergeLocales, UniverInstanceType } = UniverCore
    const { FUniver } = UniverCoreFacade
    const { UniverRenderEnginePlugin } = UniverEngineRender
    const { UniverFormulaEnginePlugin } = UniverEngineFormula
    const { UniverUIPlugin } = UniverUi
    const { UniverSheetsPlugin } = UniverSheets
    const { UniverSheetsUIPlugin } = UniverSheetsUi
    const { UniverDocsPlugin } = UniverDocs
    const { UniverDocsUIPlugin } = UniverDocsUi
    const { UniverSheetsFormulaPlugin } = UniverSheetsFormula
    const { UniverSheetsFormulaUIPlugin } = UniverSheetsFormulaUi
    const { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt
    const { UniverSheetsNumfmtUIPlugin } = UniverSheetsNumfmtUi

    const univer = new Univer({
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: mergeLocales(
          UniverDesignEnUS,
          UniverUiEnUS,
          UniverSheetsEnUS,
          UniverSheetsUiEnUS,
          UniverDocsUiEnUS,
          UniverSheetsFormulaUiEnUS,
          UniverSheetsNumfmtUiEnUS,
        ),
      },
    })

    univer.registerPlugin(UniverRenderEnginePlugin)
    univer.registerPlugin(UniverFormulaEnginePlugin)

    univer.registerPlugin(UniverUIPlugin, {
      container: 'app',
    })

    univer.registerPlugin(UniverDocsPlugin)
    univer.registerPlugin(UniverDocsUIPlugin)
```

--------------------------------

### Register Live Share Plugin

Source: https://docs.univer.ai/guides/sheets/features/live-share

Import the plugin and its CSS, then register it with the Univer instance.

```typescript
import { UniverLiveSharePlugin } from '@univerjs-pro/live-share'
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'

import '@univerjs-pro/live-share/lib/index.css'

import '@univerjs-pro/live-share/facade'

const univer = new Univer({
  // ...
})

univer.registerPlugin(UniverLiveSharePlugin)
```

--------------------------------

### Initialize Sparkline Plugin

Source: https://docs.univer.ai/guides/sheets/features/sparkline

Import the necessary plugins, locales, and CSS, then register the plugins with the Univer instance.

```typescript
import { UniverSheetSparklinePlugin } from '@univerjs-pro/sheets-sparkline'
import { UniverSheetSparklineUIPlugin } from '@univerjs-pro/sheets-sparkline-ui'
import SheetsSparklineUIEnUS from '@univerjs-pro/sheets-sparkline-ui/locale/en-US'
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'

import '@univerjs-pro/sheets-sparkline/facade'

import '@univerjs-pro/sheets-sparkline-ui/lib/index.css'

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      SheetsSparklineUIEnUS, 
    ),
  },
})

univer.registerPlugin(UniverSheetSparklinePlugin)
univer.registerPlugin(UniverSheetSparklineUIPlugin)
```

--------------------------------

### Delete Multiple Columns Starting at Position

Source: https://docs.univer.ai/guides/sheets/features/core/row-col

Deletes a specified number of consecutive columns starting from a given column index.

```javascript
const sheet = univerAPI.getActiveWorkbook().getActiveSheet()

// Columns start at "0" - this deletes the first two columns
sheet.deleteColumns(0, 2)
```

--------------------------------

### Delete multiple columns starting at given position

Source: https://docs.univer.ai/guides/sheets/features/core/row-col

Deletes a specified number of consecutive columns starting from the given column position.

```APIDOC
## deleteColumns

### Description
Deletes a number of columns starting at the given column position.

### Method
`deleteColumns(columnPosition, howMany)`

### Parameters
- **columnPosition** (number) - The starting index of the columns to delete.
- **howMany** (number) - The number of columns to delete.

### Request Example
```javascript
const sheet = univerAPI.getActiveWorkbook().getActiveSheet()

// Columns start at "0" - this deletes the first two columns
sheet.deleteColumns(0, 2)
```
```

--------------------------------

### Initialize Pivot Table Plugin

Source: https://docs.univer.ai/guides/sheets/features/pivot-table

Import the necessary plugins, locales, and CSS, then initialize the Univer instance with the merged locales.

```typescript
import { UniverSheetsPivotTablePlugin } from '@univerjs-pro/sheets-pivot'
import { UniverSheetsPivotTableUIPlugin } from '@univerjs-pro/sheets-pivot-ui'
import SheetsPivotTableUIEnUS from '@univerjs-pro/sheets-pivot-ui/locale/en-US'
import SheetsPivotTableEnUS from '@univerjs-pro/sheets-pivot/locale/en-US'
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'

import '@univerjs-pro/sheets-pivot-ui/lib/index.css'

import '@univerjs-pro/sheets-pivot/facade' // [!code

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      SheetsPivotTableEnUS, 
      SheetsPivotTableUIEnUS, 
    ),
  },
})
```

--------------------------------

### Delete Multiple Rows Starting at Position

Source: https://docs.univer.ai/guides/sheets/features/core/row-col

Deletes a specified number of consecutive rows starting from a given row index. Row indices are 0-based.

```javascript
const sheet = univerAPI.getActiveWorkbook().getActiveSheet()

// Rows start at "0" - this deletes the first two rows
sheet.deleteRows(0, 2)
```

--------------------------------

### Install Sheets Filter Plugin

Source: https://docs.univer.ai/guides/sheets/features/filter

Install the necessary packages for the Univer Sheets Filter plugin and its UI component using npm, pnpm, yarn, or bun.

```bash
npm install @univerjs/sheets-filter @univerjs/sheets-filter-ui
```

--------------------------------

### Initialize Univer with Plugins

Source: https://docs.univer.ai/guides/sheets/getting-started/installation/cdn

Register essential sheet plugins and create a new sheet instance using the Univer API.

```javascript
univer.registerPlugin(UniverSheetsFormulaPlugin)
    univer.registerPlugin(UniverSheetsFormulaUIPlugin)
    univer.registerPlugin(UniverSheetsNumfmtPlugin)
    univer.registerPlugin(UniverSheetsNumfmtUIPlugin)

    univer.createUnit(UniverInstanceType.UNIVER_SHEET, {})

    const univerAPI = FUniver.newAPI(univer)
```

--------------------------------

### Delete multiple rows starting at given position

Source: https://docs.univer.ai/guides/sheets/features/core/row-col

Deletes a specified number of consecutive rows starting at the given row position. Row positions are 0-indexed.

```APIDOC
## deleteRows(rowPosition, howMany)

### Description
Deletes a specified number of consecutive rows starting at the given row position.

### Method
`deleteRows`

### Parameters
#### Path Parameters
- **rowPosition** (number) - Required - The 0-indexed starting row position for deletion.
- **howMany** (number) - Required - The number of rows to delete.

### Request Example
```javascript
const sheet = univerAPI.getActiveWorkbook().getActiveSheet();
// Rows start at "0" - this deletes the first two rows
sheet.deleteRows(0, 2);
```
```

--------------------------------

### Initialize Conditional Formatting Preset

Source: https://docs.univer.ai/guides/sheets/features/conditional-formatting

Import the necessary presets, locales, and CSS files, then register them within the createUniver configuration.

```typescript
import { UniverSheetsConditionalFormattingPreset } from '@univerjs/preset-sheets-conditional-formatting'
import UniverPresetSheetsConditionalFormattingEnUS from '@univerjs/preset-sheets-conditional-formatting/locales/en-US'
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'
import '@univerjs/preset-sheets-conditional-formatting/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsConditionalFormattingEnUS, 
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsConditionalFormattingPreset(), 
  ],
})
```

--------------------------------

### Initialize Univer with Filter Plugins

Source: https://docs.univer.ai/guides/sheets/features/filter

Import and register the Univer core, filter plugin, and filter UI plugin. Ensure locales and CSS are correctly imported.

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsFilterPlugin } from '@univerjs/sheets-filter'
import { UniverSheetsFilterUIPlugin } from '@univerjs/sheets-filter-ui'
import SheetsFilterUIEnUS from '@univerjs/sheets-filter-ui/locale/en-US'

import '@univerjs/sheets-filter-ui/lib/index.css'

import '@univerjs/sheets-filter/facade'

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      SheetsFilterUIEnUS, 
    ),
  },
})

univer.registerPlugin(UniverSheetsFilterPlugin) 
univer.registerPlugin(UniverSheetsFilterUIPlugin) 
```

--------------------------------

### Get Table List

Source: https://docs.univer.ai/guides/sheets/features/table

Retrieves all tables present in the active workbook.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const tables = fWorkbook.getTableList()
console.log('debugger tables', tables)
```

--------------------------------

### Worksheet Zoom

Source: https://docs.univer.ai/guides/sheets/features/core/sheets-api

Get or set the zoom level of the active worksheet.

```javascript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Set zoom ratio to 200%
fWorksheet.zoom(2)
const zoomRatio = fWorksheet.getZoom()
```

--------------------------------

### Get Worksheet ID

Source: https://docs.univer.ai/guides/sheets/features/core/sheets-api

Retrieve the unique identifier for the active worksheet.

```javascript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
fWorksheet?.getSheetId()
```

--------------------------------

### Get Worksheets

Source: https://docs.univer.ai/guides/sheets/features/core/sheets-api

Retrieve all sheets or the currently active sheet from the workbook.

```javascript
const fWorkbook = univerAPI.getActiveWorkbook()
const sheets = fWorkbook.getSheets()
```

```javascript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
```

--------------------------------

### Get Freeze State

Source: https://docs.univer.ai/guides/sheets/features/core/freeze

Retrieve the current freeze configuration object.

```javascript
const worksheet = univerAPI.getActiveWorkbook().getActiveSheet()

const freezeState = worksheet.getFreeze()
```

--------------------------------

### Set Frozen Rows

Source: https://docs.univer.ai/guides/sheets/features/core/freeze

Freeze a specific number of rows starting from the top.

```javascript
const worksheet = univerAPI.getActiveWorkbook().getActiveSheet()

// Set freeze for the first 3 rows
worksheet.setFrozenRows(3)
```

--------------------------------

### Set Frozen Columns

Source: https://docs.univer.ai/guides/sheets/features/core/freeze

Freeze a specific number of columns starting from the left.

```javascript
const worksheet = univerAPI.getActiveWorkbook().getActiveSheet()

// Set freeze for columns A-B
worksheet.setFrozenColumns(2)
```

--------------------------------

### Implement Custom React DOM Client

Source: https://docs.univer.ai/guides/sheets/getting-started/integrations/react

Create this file to provide a createRoot wrapper for older React versions that lack the modern React DOM client API.

```typescript
import ReactDOM from 'react-dom'

export function createRoot(container: HTMLElement) {
  return {
    render: (element: JSX.Element) => {
      ReactDOM.render(element, container)
    },
  }
}
```

--------------------------------

### Get Range Style

Source: https://docs.univer.ai/guides/sheets/features/core/range-selection

Retrieving style data for cells within a range.

```javascript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')
console.log(fRange.getCellStyleData()) // The style data of the top-left cell in the range
console.log(fRange.getCellStyle()) // The style of the top-left cell in the range
console.log(fRange.getCellStyles()) // The styles of all cells in the range
```

--------------------------------

### Initialize Univer with Advanced Formula Preset

Source: https://docs.univer.ai/guides/sheets/features/advanced-formula

Configure the Univer instance by merging locales and registering the core, drawing, and advanced formula presets.

```typescript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'
import UniverPresetSheetsAdvancedEnUS from '@univerjs/preset-sheets-advanced/locales/en-US'
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'
import UniverPresetSheetsDrawingEnUS from '@univerjs/preset-sheets-drawing/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-drawing/lib/index.css'
import '@univerjs/preset-sheets-advanced/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsDrawingEnUS, 
      UniverPresetSheetsAdvancedEnUS, 
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsDrawingPreset(), 
    UniverSheetsAdvancedPreset(), 
  ],
})
```

--------------------------------

### Get Table Information

Source: https://docs.univer.ai/guides/sheets/features/table

Retrieves specific table details by ID after insertion.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Insert a table in the range B2:F11
const fRange = fWorksheet.getRange('B2:F11')
const success = await fWorksheet.addTable(
  'name-1',
  fRange.getRange(),
  'id-1',
  {
    tableStyleId: 'table-default-4',
  },
)

if (success) {
  const tableInfo = fWorkbook.getTableInfo('id-1')
  console.log('debugger tableInfo', tableInfo)
}
```

--------------------------------

### Get Worksheet Data

Source: https://docs.univer.ai/guides/sheets/features/core/sheets-api

Access the snapshot of the active worksheet's data.

```javascript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const sheetSnapshot = fWorksheet.getSheet().getSnapshot()
```

--------------------------------

### Getting Workbook ID

Source: https://docs.univer.ai/guides/sheets/features/core/sheets-api

Retrieve the unique identifier for the currently active workbook.

```javascript
const fWorkbook = univerAPI.getActiveWorkbook()
fWorkbook?.getId()
```

--------------------------------

### Adapt UMD React for Univer

Source: https://docs.univer.ai/guides/sheets/getting-started/integrations/react

Include this script after loading React via CDN to polyfill createRoot and JSX runtime functions required by Univer.

```html
<script>
  /**
   * With the support for React 19[^1], UMD users may need additional adaptation.
   *
   * [^1]: [support for React 19] https://github.com/dream-num/univer/pull/4247
   */

  /**
   * Fix `Uncaught TypeError: client.createRoot is not a function`
   * If using UMD React < 18, you might need the following code.
   */
  ;(function (global) {
    'use strict'
    if (!global.ReactDOM) {
      throw new Error('ReactDOM must be loaded before ReactCreateRoot.')
    }
    const ReactDOM = global.ReactDOM
    if (!ReactDOM.createRoot) {
      ReactDOM.createRoot = function (container) {
        return {
          render: (element) => {
            ReactDOM.render(element, container)
          },
        }
      }
    }
  })(this)

  /**
   * Fix `Uncaught TypeError: jsxRuntime.jsx is not a function`
   * If using UMD React, you might need the following code.
   * Reference: https://unpkg.com/react@18.3.1/cjs/react-jsx-runtime.production.min.js
   */
  ;(function (global) {
    'use strict'
    if (!global.React) {
      throw new Error('React must be loaded before ReactJSXRuntime.')
    }
    const React = global.React
    if (!React.jsx || !React.jsxs) {
      const REACT_ELEMENT_TYPE = Symbol.for('react.element')
      const hasOwnProperty = Object.prototype.hasOwnProperty
      const RESERVED_PROPS = {
        key: true,
        ref: true,
        __self: true,
        __source: true,
      }
      const ReactCurrentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner
      function createReactElement(type, config, maybeKey) {
        const props = {}
        let key = null
        let ref = null
        if (maybeKey !== undefined) {
          key = `${maybeKey}`
        }
        if (config.key !== undefined) {
          key = `${config.key}`
        }
        if (config.ref !== undefined) {
          ref = config.ref
        }
        for (var propName in config) {
          if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
            props[propName] = config[propName]
          }
        }
        if (type && type.defaultProps) {
          const defaultProps = type.defaultProps
          for (var propName in defaultProps) {
            if (props[propName] === undefined) {
              props[propName] = defaultProps[propName]
            }
          }
        }
        return {
          $$typeof: REACT_ELEMENT_TYPE,
          type,
          key,
          ref,
          props,
          _owner: ReactCurrentOwner.current,
        }
      }
      React.jsx = createReactElement
      React.jsxs = createReactElement
    }
  })(this)
</script>
```

--------------------------------

### Initialize Thread Comment Preset

Source: https://docs.univer.ai/guides/sheets/features/comments

Import the necessary presets and locales, then register them within the createUniver configuration.

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsThreadCommentPreset } from '@univerjs/preset-sheets-thread-comment'
import UniverPresetSheetsThreadCommentEnUS from '@univerjs/preset-sheets-thread-comment/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-thread-comment/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsThreadCommentEnUS, 
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsThreadCommentPreset(), 
  ],
})
```

--------------------------------

### Get Frozen Rows Count

Source: https://docs.univer.ai/guides/sheets/features/core/freeze

Retrieve the number of currently frozen rows.

```javascript
const worksheet = univerAPI.getActiveWorkbook().getActiveSheet()

const frozenRows = worksheet.getFrozenRows()
```

--------------------------------

### Get Frozen Columns Count

Source: https://docs.univer.ai/guides/sheets/features/core/freeze

Retrieve the number of currently frozen columns.

```javascript
const worksheet = univerAPI.getActiveWorkbook().getActiveSheet()

const frozenColumns = worksheet.getFrozenColumns()
```

--------------------------------

### Initialize Data Validation Preset

Source: https://docs.univer.ai/guides/sheets/features/data-validation

Import the necessary presets and locales, then include them in the createUniver configuration.

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsDataValidationPreset } from '@univerjs/preset-sheets-data-validation'
import UniverPresetSheetsDataValidationEnUS from '@univerjs/preset-sheets-data-validation/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-data-validation/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsDataValidationEnUS, 
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsDataValidationPreset(), 
  ],
})
```

--------------------------------

### Sort Worksheet

Source: https://docs.univer.ai/guides/sheets/features/sort

Example of sorting an entire worksheet by a specific column index.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Sorts the worksheet in ascending order based on the first column
fWorksheet.sort(0)

// Sorts the worksheet in descending order based on the first column
fWorksheet.sort(0, false)
```

--------------------------------

### Facade API Creation Methods

Source: https://docs.univer.ai/guides/sheets/features/core/rich-text

Methods available on the univerAPI object to instantiate rich text, style, and decoration objects.

```APIDOC
## univerAPI Rich Text Factory Methods

### Description
Methods to create rich text, paragraph, and text style objects. Builder versions are used for modification, while Value versions are for read-only objects.

### Methods
- `univerAPI.newRichText()`: Creates a new rich text builder.
- `univerAPI.newRichTextValue(data)`: Creates a read-only rich text value object.
- `univerAPI.newParagraphStyle()`: Creates a new paragraph style builder.
- `univerAPI.newParagraphStyleValue()`: Creates a read-only paragraph style value object.
- `univerAPI.newTextStyle()`: Creates a new text style builder.
- `univerAPI.newTextStyleValue()`: Creates a read-only text style value object.
- `univerAPI.newTextDecoration()`: Creates a new text decoration builder.
```

--------------------------------

### Manage Cell Editing Lifecycle

Source: https://docs.univer.ai/guides/sheets/features/core/range-selection

Programmatically start and end cell editing sessions.

```javascript
const fWorkbook = univerAPI.getActiveWorkbook()
fWorkbook.startEditing()
```

```javascript
// Pass true to commit changes, false to cancel editing
// This is an async function, requires await
const fWorkbook = univerAPI.getActiveWorkbook()
await fWorkbook.endEditingAsync(true)
```

--------------------------------

### Get Filtered Out Rows

Source: https://docs.univer.ai/guides/sheets/features/filter

Retrieves the indexes of rows that have been filtered out by the current filter criteria.

```APIDOC
## Get Filtered Out Rows

### Description
Returns an array containing the indexes of the rows that are filtered out.

### Method Signature
`FFilter.getFilteredOutRows()`

### Return Value
An array of numbers, where each number is the index of a filtered-out row.

### Request Example
```javascript
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();

// Set some values of the range C1:F10
const fRange = fWorksheet.getRange('C1:F10');
fRange.setValues([
  [1, 2, 3, 4],
  [2, 3, 4, 5],
  [3, 4, 5, 6],
  [4, 5, 6, 7],
  [5, 6, 7, 8],
  [6, 7, 8, 9],
  [7, 8, 9, 10],
  [8, 9, 10, 11],
  [9, 10, 11, 12],
  [10, 11, 12, 13],
]);

// Create a filter on the range C1:F10
let fFilter = fRange.createFilter();

// If the filter already exists, remove it and create a new one
if (!fFilter) {
  fRange.getFilter().remove();
  fFilter = fRange.createFilter();
}

// Set the filter criteria of the column C, filter out the rows that are not 1, 5, 9
const column = fWorksheet.getRange('C:C').getColumn();
fFilter.setColumnFilterCriteria(column, {
  colId: 0,
  filters: {
    filters: ['1', '5', '9'],
  },
});

// Print the filtered out rows
console.log(fFilter.getFilteredOutRows()); // Expected output: [1, 2, 3, 5, 6, 7, 9]
```
```
Tokens:
Raw