@univerjs/sheets-ui
Spreadsheet UI layer for Univer Sheets.
TypeScript
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
TypeScript
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}How is this guide?