Demos
Features
Workbook
Sheet Tab Styles

Sheet Tab Styles

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.

JavaScript
Angular
Vue3
React
Description
app.component.ts
index.html
app.component.html
styles.css
Copy to CodeMine

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;
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:
// @ts-ignore import { Component, NgModule, enableProdMode } from '@angular/core'; // @ts-ignore import { BrowserModule } from '@angular/platform-browser'; // @ts-ignore import { FormsModule } from '@angular/forms'; // @ts-ignore import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; // @ts-ignore import { SpreadSheetsModule } from '@mescius/spread-sheets-angular'; // @ts-ignore import GC from '@mescius/spread-sheets'; import './styles.css'; const spreadNS = GC.Spread.Sheets; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { spread: GC.Spread.Sheets.Workbook; hostStyle = { width: '100%', height: '100%', overflow: 'hidden', float: 'left' }; initSpread($event: any) { const spread = $event.spread; initTabStyles(spread); } } function initTabStyles(spread: any) { spread.suspendPaint(); spread.setSheetCount(4); 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(); }; @NgModule({ imports: [BrowserModule, SpreadSheetsModule, FormsModule], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Polyfills --> <script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.import('@angular/compiler'); System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('$DEMOROOT$/en/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="sample-tutorial"> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> <gc-worksheet></gc-worksheet> </gc-spread-sheets> </div>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; overflow: auto; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; } .sample-options{ z-index: 1000; } .option { padding-bottom: 6px; } .checkbox { padding-right: 12px; display: inline-block; } label { display: inline-block; min-width: 100px; } input, select { width: 100%; padding: 4px 0; margin-top: 4px; box-sizing: border-box; } input[type=checkbox] { width: auto; padding: 0; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/fesm2015/zone.min.js', 'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/fesm2022', '@angular/common': 'npm:@angular/common/fesm2022/common.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': './plugin.js', 'tslib':'npm:tslib/tslib.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, "node_modules/@angular": { defaultExtension: 'mjs' }, "@mescius/spread-sheets-angular": { defaultExtension: 'mjs' }, '@angular/core': { defaultExtension: 'mjs', main: 'core.mjs' } } }); })(this);