Default Style
We provide two levels of default styles:
- The default style of the worksheet
- The default style of the column or row
Both can be set through the IWorksheetData interface or the Facade API.
Background style priority
B2 has both a row default and a column default. Change the winner, then add a cell style.
A1
Worksheet
B1
Column
C1
Worksheet
A2
Row
B2
Column
C2
Row
A3
Worksheet
B3
Column
C3
Worksheet
B2 uses: Column
isRowStylePrecedeColumnStyle: false
This illustration compares background colors; other style properties are merged independently.
Configuration
By default, the column style takes precedence over the row style. You can change this behavior by setting isRowStylePrecedeColumnStyle during registration.
Choose your integration mode and merge these options into the existing initialization. Keep your other plugins, locale, theme, and container settings; do not register the same plugin twice.
import { UniverSheetsPlugin } from '@univerjs/sheets'univer.registerPlugin(UniverSheetsPlugin, { isRowStylePrecedeColumnStyle: true,})import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import { createUniver } from '@univerjs/presets'const { univerAPI } = createUniver({ presets: [ UniverSheetsCorePreset({ sheets: { isRowStylePrecedeColumnStyle: true, }, }), ],})Set Default Style
There are two ways to set the default style of a worksheet:
- Through the
IWorksheetDatainterface
interface IWorksheetData { // other /** * @property {Nullable<IStyleData>} [defaultStyle] - Default style data of Worksheet. */ defaultStyle?: Nullable<IStyleData>}interface IRowData { // other /** * style data */ s?: Nullable<IStyleData>}interface IColumnData { // other /** * style data */ s?: Nullable<IStyleData>}- Set through the Facade API
const fworkbook = univerAPI.getActiveWorkbook()const fworksheet = fworkbook.getActiveSheet()const defaultStyle = { bg: { rgb: 'red', },}const defaultColumnStyle = { bg: { rgb: 'blue', },}const defaultRowStyle = { bg: { rgb: 'green', },}// set default stylefworksheet.setDefaultStyle(defaultStyle)// set column D default stylefworksheet.setColumnDefaultStyle(3, defaultColumnStyle)// reset column D the default stylefworksheet.setColumnDefaultStyle(3, undefined)// set row default stylefworksheet.setRowDefaultStyle(1, defaultRowStyle)Shrink text to fit
Use FRange to shrink text when it is wider than its cell. The setting applies to every cell in the range; getShrinkToFit() reads the top-left cell.
const range = univerAPI.getActiveWorkbook().getActiveSheet().getRange('A1:C3')range.setShrinkToFit(true)const enabled = range.getShrinkToFit()Shrink-to-fit and text wrapping are mutually exclusive. Enabling wrap clears shrink-to-fit; enabling shrink-to-fit clears wrapping on cells that currently wrap.
Cell text line spacing
textLineGap adds space in pixels between lines of cell text, including rich text and cell editors. Set it during initialization; it applies to all workbooks in the Univer instance. The default is 0, and the value must be finite and non-negative.
Fixed row height
Auto-sized row
import { UniverSheetsPlugin } from '@univerjs/sheets'univer.registerPlugin(UniverSheetsPlugin, { textLineGap: 6 })import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import { createUniver } from '@univerjs/presets'const { univerAPI } = createUniver({ presets: [UniverSheetsCorePreset({ sheets: { textLineGap: 6 } })],})Increasing the gap does not resize existing rows. Recalculate automatic row heights when needed; fixed-height cells can clip text. This is an instance-level setting, not a per-cell paragraph style.
How is this guide?