You can create a style and set properties for it using code such as the following:
Then you can set the style to a cell, row, column or a range:
The style in each of the different levels has a different precedence, as follows: cell > row > column.
SpreadJS allows you to set a name for a style, and add this named style to the sheet's named styles collection. This makes the style more convenient to use and manage.
You can set a name for a style and add this style to the named style collection of the sheet or the Spread component.
After the named style has been added to the named styles collection, you can get the style by its name or set style name directly:
If a named style will not be used, you can remove it from the named styles collection:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbook-initialized="initSpread">
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<p style="padding:2px 10px;">Spread Styles are useful for consolidating visual properties that are used in a
lot of different cells.</p>
<p style="padding:2px 10px; background-color:#F4F8EB">Select cell C2, E2, E5 or E10 then any other cell to
see difference between the getStyle and getActualStyle api.</p>
<label id="getStyleLabel" for="getStyle">sheet.getStyle({{ rowIndex }}, {{ columnIndex }})</label>
<input id="getStyle" type="text" disabled :style="{ backgroundColor: backgroundColor }" />
<label id="getActualStyleLabel" for="getActualStyle">sheet.getActualStyle({{ rowIndex }}, {{ columnIndex }})</label>
<input id="getActualStyle" type="text" disabled :style="{ backgroundColor: actualBackgroundColor }" />
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import '@mescius/spread-sheets-vue';
import GC from '@mescius/spread-sheets';
const spreadNS = GC.Spread.Sheets;
const data = [
["Month", "Payment", "Principal", "Interest", "Balance"],
[1, 8750.00, 8333.34, 416.67, 91666.67],
[2, 8715.28, 8333.34, 381.94, 83333.33],
[3, 8680.56, 8333.34, 347.22, 75000.00],
[4, 8645.83, 8333.34, 312.50, 66666.67],
[5, 8611.11, 8333.34, 277.78, 58333.33],
[6, 8576.39, 8333.34, 243.06, 50000.00],
[7, 8541.67, 8333.34, 208.33, 41666.67],
[8, 8506.94, 8333.34, 173.61, 33333.33],
[9, 8472.22, 8333.34, 138.89, 25000.00],
[10, 8437.50, 8333.34, 104.17, 16666.67],
[11, 8402.78, 8333.34, 69.44, 8333.33],
[12, 8368.06, 8333.34, 34.72, 0.00],
["Total", 102708.33, 100000.00, 2708.33]
];
const rowIndex = ref(0);
const columnIndex = ref(0);
const backgroundColor = ref('');
const actualBackgroundColor = ref('');
const initSpread = (spread) => {
const sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.name("Basic Usage");
const cellStyle = new spreadNS.Style();
cellStyle.backColor = "#f7a711";
const rowStyle = new spreadNS.Style();
rowStyle.backColor = "#82bc00";
const columnStyle = new spreadNS.Style();
columnStyle.backColor = "#cccccc";
sheet.setText(4, 4, 'cell style', spreadNS.SheetArea.viewport);
sheet.setStyle(4, 4, cellStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(4, -1, rowStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(9, -1, rowStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(-1, 4, columnStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(-1, 6, columnStyle, spreadNS.SheetArea.viewport);
cellStyle.name = 'style1';
rowStyle.name = 'style2';
columnStyle.name = 'style3';
sheet.addNamedStyle(cellStyle);
sheet.addNamedStyle(rowStyle);
sheet.addNamedStyle(columnStyle);
sheet.setText(1, 0, 'style1', spreadNS.SheetArea.viewport);
sheet.setStyle(1, 0, sheet.getNamedStyle('style1'), spreadNS.SheetArea.viewport);
sheet.setText(1, 1, 'style2', spreadNS.SheetArea.viewport);
sheet.setStyle(1, 1, sheet.getNamedStyle('style2'), spreadNS.SheetArea.viewport);
sheet.setText(1, 2, 'style3', spreadNS.SheetArea.viewport);
sheet.setStyle(1, 2, sheet.getNamedStyle('style3'), spreadNS.SheetArea.viewport);
const style5 = new spreadNS.Style();
style5.backColor = "red";
style5.isVerticalText = true;
style5.textIndent = 5;
const style6 = new spreadNS.Style();
style6.backColor = "green";
style6.isVerticalText = true;
style6.wordWrap = true;
const style7 = new spreadNS.Style();
style7.backColor = "yellow";
style7.isVerticalText = true;
style7.shrinkToFit = true;
sheet.resumePaint();
sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, (eventName, args) => {
const { row: rowIndexValue, col: columnIndexValue } = args.newSelections[0];
const style = sheet.getStyle(rowIndexValue, columnIndexValue);
const actualStyle = sheet.getActualStyle(rowIndexValue, columnIndexValue);
rowIndex.value = rowIndexValue;
columnIndex.value = columnIndexValue;
backgroundColor.value = getStyleColor(style);
actualBackgroundColor.value = getStyleColor(actualStyle);
});
const sheet1 = spread.getSheet(1);
sheet1.suspendPaint();
sheet1.name("Loan");
sheet1.setColumnCount(5);
for (let i = 1; i < 5; i++) {
sheet1.setColumnWidth(i, 100);
}
sheet1.setValue(0, 0, "Principal: $100,000.00");
sheet1.setValue(1, 0, "Interest rate: 5.00%");
sheet1.setValue(2, 0, "Payment interval: Monthly");
sheet1.setValue(3, 0, "Number of payments: 12");
sheet1.setArray(5, 0, data);
const summaryStyle = new GC.Spread.Sheets.Style();
summaryStyle.backColor = "#D9EAD3";
sheet1.getRange(0, 0, 4, 3).setStyle(summaryStyle);
const headStyle = new GC.Spread.Sheets.Style();
headStyle.font = "bold 12px sans-serif";
headStyle.backColor = "#cccccc";
const contentStyle = new GC.Spread.Sheets.Style();
contentStyle.backColor = "#81b100";
sheet1.getRange("A6:E6").setStyle(headStyle);
sheet1.getRange(5, 0, 14, 5).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
for (let r = 6; r < 18; r++) {
if (r % 2 === 0) {
sheet1.setStyle(r, -1, contentStyle);
}
}
const currencyStyle = new GC.Spread.Sheets.Style();
currencyStyle.formatter = "[$$-409]#,##0.00";
currencyStyle.name = "currency";
sheet1.addNamedStyle(currencyStyle);
sheet1.getRange(6, 1, 13, 4).setStyleName("currency");
sheet1.getRange(18, 0, 1, 5).font("bold 12px sans-serif");
sheet1.resumePaint();
sheet1.bind(GC.Spread.Sheets.Events.SelectionChanged, (eventName, args) => {
const { row: rowIndexValue, col: columnIndexValue } = args.newSelections[0];
const style = sheet1.getStyle(rowIndexValue, columnIndexValue);
const actualStyle = sheet1.getActualStyle(rowIndexValue, columnIndexValue);
rowIndex.value = rowIndexValue;
columnIndex.value = columnIndexValue;
backgroundColor.value = getStyleColor(style);
actualBackgroundColor.value = getStyleColor(actualStyle);
});
};
const getStyleColor = (style) => {
let color = '';
if (style && style.backColor) {
color = style.backColor;
}
return color;
};
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.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-vue': 'npm:@mescius/spread-sheets-vue/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
