Sheet Tab Styles

Theme:

In SpreadJS, sheet tabs can be styled differently based on different states. Currently supported styles include fonts, background colors, foreground colors, and icons. Status includes Normal, Hover, Selected, Active, and Protected.

Sheet Tab State Styles

SpreadJS supports the following sheet tab states:

Type	Comments
normal	Sheet tab is normal state.
hover	Mouse hovers over the sheet tab.
protected	Sheet is protected.
active	Sheet tab has focus.
selected	Sheet tab(s) is in the selection range.

Here is an example of setting the sheet tab state styles:

/**
 * @description Add a state style to a sheet tab that will have the style of that state applied to the sheet tab when its state matches.
 * @param sheetNames {string[]} The range of sheet tabs to which the cell state style will be applied.
 * @param state {GC.Spread.Sheets.SheetTabState} Which state will use style.
 * @param style {GC.Spread.Sheets.ISheetTabStyle} Which style when the state is matched.
 */
    const style = {
      backColor: 'blue',
      foreColor: 'red',
      font: 'bold 11pt Calibri'
      icons: [{ src: 'demo.jpg' }]
    };
    const state = GC.Spread.Sheets.SheetTabState.active;
    const sheetNames = ['Sheet1'];
    spread.sheetTabStyles.add(state, style, sheetNames);

Here is an example of setting the default sheet tab state styles:

/**
 * @description Add a default state style to the sheet tab that will have the style of that state applied to the sheet tab when its state matches.
 * @description If a sheet tab sets its own status style, it will override the default status style.
 * @param stateStyles {GC.Spread.Sheet.SheetTabStyles} Key-value pairs for status and status style of the sheet tab.
 */
    const activeStyle = {
      backColor: 'blue',
      foreColor: 'red',
      font: 'bold 11pt Calibri',
      icons: [{ src: 'demo.jpg' }]
    };
    const activeState = GC.Spread.Sheets.SheetTabState.active;

    const protectedStyle = {
      icons: [{ src: 'lock.jpg' }];
    };
    const protectedState = GC.Spread.Sheets.SheetTabState.protected;

    const stateStyles = { [activeState]: activeStyle, [protectedState]: protectedStyle };
    spread.options.defaultSheetTabStyles = stateStyles;

Feedback

Submit and view feedback for

This Product This Page

Sheet Tab State Styles SpreadJS supports the following sheet tab states: Type Comments normal Sheet tab is normal state. hover Mouse hovers over the sheet tab. protected Sheet is protected. active Sheet tab has focus. selected Sheet tab(s) is in the selection range. Here is an example of setting the sheet tab state styles: Here is an example of setting the default sheet tab state styles:

var spreadNS = GC.Spread.Sheets;
window.onload = function () {
const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 4, font: '16px Calibri' });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
const sheet1 = spread.getSheet(0);
const sheet2 = spread.getSheet(1);
const sheet3 = spread.getSheet(2);
const sheet4 = spread.getSheet(3);
sheet3.options.isProtected = true;
sheet4.options.isProtected = true;
// Set sheet tab state style
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(223, 181, 139)',
foreColor: 'rgb(68, 68, 68)',
font: '16px Calibri',
}, [sheet1.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(239, 218, 198)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet1.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(125, 137, 37)',
foreColor: 'rgb(255, 255, 255)',
font: '16px Calibri',
}, [sheet2.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(190, 196, 149)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet2.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(140, 36, 30)',
foreColor: 'rgb(255, 255, 255)',
font: '16px Calibri',
}, [sheet3.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(197, 147, 143)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet3.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(243, 157, 0)',
foreColor: 'rgb(68, 68, 68)',
font: '16px Calibri',
}, [sheet4.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(249, 206, 140)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet4.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.protected, {
icons: [
{
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAStJREFUWEftllFuwjAMhn/TiwSpkQKn4CbQkwAn6XaS7RZESiVyEJindGGqEImc8oA2JS99qJ3/yx/HMuHFi16sjwrw9xwwbbtZEG0Z2ABQsYY+w5ebprPW+pK6KnLAtO2eiA4TgVE4gowwzHyww3CUQogBwsmJ6AOAZ+bODsNNfNSK//sAw0BnnXuTQIgBVlpztHmZstkYo+h6DZDq5Jxob1FQ3PgssXetdc/AjpsmCTp1Rgag9Y6AXgJgbrHCaygDEGz6TwGMUbhc1H3lP6ryUC/S2JCfvYL4tPaS5/QohgD/xfyeA88CrLQ+T7rdXA5/cm6ZSk4CTBrPXOHfvFxPqADVgepAdSDtwM9wETrh02tWI4pj1v0MWArjGTjmxjPRPFCqWhJfAaoD3xM7riFdKnShAAAAAElFTkSuQmCC',
position: GC.Spread.Sheets.IconPosition.right
}
]
}, [sheet4.name()]);
// Set default sheet tab state styles
spread.options.defaultSheetTabStyles = {
[spreadNS.SheetTabState.protected]: {
icons: [{ src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAStJREFUWEftllFuwjAMhn/TiwSpkQKn4CbQkwAn6XaS7RZESiVyEJindGGqEImc8oA2JS99qJ3/yx/HMuHFi16sjwrw9xwwbbtZEG0Z2ABQsYY+w5ebprPW+pK6KnLAtO2eiA4TgVE4gowwzHyww3CUQogBwsmJ6AOAZ+bODsNNfNSK//sAw0BnnXuTQIgBVlpztHmZstkYo+h6DZDq5Jxob1FQ3PgssXetdc/AjpsmCTp1Rgag9Y6AXgJgbrHCaygDEGz6TwGMUbhc1H3lP6ryUC/S2JCfvYL4tPaS5/QohgD/xfyeA88CrLQ+T7rdXA5/cm6ZSk4CTBrPXOHfvFxPqADVgepAdSDtwM9wETrh02tWI4pj1v0MWArjGTjmxjPRPFCqWhJfAaoD3xM7riFdKnShAAAAAElFTkSuQmCC' }]
}
};
// Description
sheet1.setColumnWidth(0, 500);
sheet1.setRowHeight(0, 50);
sheet1.setRowHeight(1, 50);
sheet1.setRowHeight(2, 50);
sheet1.setRowHeight(3, 50);
sheet1.setDefaultValue(0, 0, 'Set normal state styles and active state styles for the first four sheet tabs.');
sheet1.setDefaultValue(1, 0, 'Set protection state for Sheet3 and Sheet4.');
sheet1.setDefaultValue(2, 0, 'A separate protection state style is set for Sheet4.');
sheet1.setDefaultValue(3, 0, 'The default styles of protected state and active state are set for all sheet tabs.');
const style = new spreadNS.Style();
style.font = '18px Calibri';
style.vAlign = spreadNS.VerticalAlign.center;
sheet1.getRange(-1, 0, -1, 1).setStyle(style);
spread.resumePaint();
};

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width:100%; height: 100%"></div>
</div>
</body>
</html>

.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}