# @univerjs/sheets-ui

> Language fallback: requested `zh-CN`; content is `en-US`.

- Human documentation: [https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/sheets-ui](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/sheets-ui)

- Agent Markdown: [https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/sheets-ui.md](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/sheets-ui.md)

- Requested language: `zh-CN`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [packages/plugins/univerjs/sheets-ui.mdx](https://github.com/dream-num/documentation/blob/dev/content/reference/packages/plugins/univerjs/sheets-ui.mdx)

---

Spreadsheet UI layer for Univer Sheets.

```typescript
// [!code word:UniverSheetsUIPlugin]
// [!code word:IUniverSheetsUIConfig]
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'

univer.registerPlugin(UniverSheetsUIPlugin, IUniverSheetsUIConfig)
```

## Entry Points

* Facade: `@univerjs/sheets-ui/facade`
* Locale: `@univerjs/sheets-ui/locale/*`

The root entry exports `ISheetBarService` and `SheetBarService` for sheet-tab state and interactions.

## IUniverSheetsUIConfig

```ts
import type { DependencyOverride } from '@univerjs/core'
import type { IScrollBarProps } from '@univerjs/engine-render'
import type { ComponentType, MenuConfig } from '@univerjs/ui'
import type { IPermissionDetailUserPartProps } from '../views/permission/panel-detail/PermissionDetailUserPart'

export interface IUniverSheetsUIConfig {
  menu?: MenuConfig
  disableAutoFocus?: true
  override?: DependencyOverride

  /**
   * The maximum count of rows triggering auto height. This is used to avoid performance issue.
   * @default 1000
   */
  maxAutoHeightCount?: number

  /**
   * Whether to show the formula bar.
   */
  formulaBar?: boolean

  /**
   * The config of the footer.
   * @default {}
   */
  footer?:
    | false
    | {
        /**
         * Sheet bar is the manager of sub sheets, including add/switch/delete sub sheets.
         * @default true
         */
        sheetBar?: boolean

        /**
         * statistic bar including statistic info current selections, such as count, sum, average, etc.
         * @default true
         */
        statisticBar?: boolean

        /**
         * Including the menus in the footer. such as highlight, gridlines, etc.
         * @default true
         */
        menus?: boolean

        /**
         * Zoom slider is the zoom slider in the footer.
         * @default true
         */
        zoomSlider?: boolean

        /**
         * The config of the add sheet button in the sheet bar.
         */
        addSheetButtonConfig?: {
          /**
           * Whether to show the add sheet button in the sheet bar.
           * When `footer` or `footer.sheetBar` is false, this config will not work because the sheet bar will not be rendered.
           * @default true
           */
          show?: boolean
          /**
           * The default row count of the new sheet created by the add sheet button.
           * @default 1000
           */
          defaultRowCount?: number
          /**
           * The default column count of the new sheet created by the add sheet button.
           * @default 20
           */
          defaultColumnCount?: number
        }
      }

  /**
   * @deprecated Use `footer.statisticBar` instead.
   */
  statusBarStatistic?: boolean

  clipboardConfig?: {
    hidePasteOptions?: boolean
  }

  /** The config of the scroll bar. */
  scrollConfig?: IScrollBarProps

  /**
   * Strategy for showing the protected range shadow.
   * - true or 'always': Show shadow for all protected ranges (default behavior)
   * - 'non-editable': Only show shadow for ranges that cannot be edited (Edit permission is false)
   * - 'non-viewable': Only show shadow for ranges that cannot be viewed (View permission is false)
   * - false or 'none': Never show shadow for protected ranges
   * @default true
   */
  protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none'

  /**
   * The custom component of the protected range user selector.
   */
  protectedRangeUserSelector?: {
    /**
     * custom component, should implement the `IPermissionDetailUserPartProps` interface.
     */
    component: ComponentType<IPermissionDetailUserPartProps>
    /**
     * The framework of the component. Must be passed correctly.
     */
    framework: string
  }

  /**
   * Whether to disable the force string alert.
   * @default false
   */
  disableForceStringAlert?: boolean
  /**
   * Whether to disable the force string mark.
   * @default false
   */
  disableForceStringMark?: boolean

  /**
   * Whether to disable the edit.
   * @default false
   */
  disableEdit?: boolean
}
```