You can control whether to show the table's header or footer, whether to display an alternating row style or column style, and whether to highlight the first column or the last column. For example:
SpreadJS supports built-in table styles or you can customize the table style. For example:
SpreadJS supports customize the style of the table header, data or footer, the table column header, data or footer. Using code such as the following:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
import Panel from './panel.jsx';
function setStyles(sheet) {
let table = sheet.tables.all()[0];
sheet.suspendPaint();
let tableHeaderStyle = new GC.Spread.Sheets.Style();
tableHeaderStyle.backColor = "Accent 1 80";
let tableDataStyle = new GC.Spread.Sheets.Style();
tableDataStyle.backColor = "Accent 4 80";
let tableFooterStyle = new GC.Spread.Sheets.Style();
tableFooterStyle.backColor = "Accent 6 80";
table.layoutStyle({
header: tableHeaderStyle,
data: tableDataStyle,
footer: tableFooterStyle
});
let tableColumnHeaderStyle = new GC.Spread.Sheets.Style();
tableColumnHeaderStyle.backColor = "Accent 1 40";
let tableColumnDataStyle = new GC.Spread.Sheets.Style();
tableColumnDataStyle.backColor = "Accent 4 40";
let tableColumnFooterStyle = new GC.Spread.Sheets.Style();
tableColumnFooterStyle.backColor = "Accent 6 40";
table.columnLayoutStyle(1, {
header: tableColumnHeaderStyle,
data: tableColumnDataStyle,
footer: tableColumnFooterStyle
});
let tableColumn3DataStyle = new GC.Spread.Sheets.Style();
tableColumn3DataStyle.formatter = "0%";
table.columnLayoutStyle(3, {
data: tableColumn3DataStyle
});
sheet.resumePaint();
}
function initCustomThemes(spread) {
const theme1 = new GC.Spread.Sheets.Tables.TableTheme();
theme1.name('custom1');
theme1.wholeTableStyle(new GC.Spread.Sheets.Tables.TableStyle('#e0f2f1'));
theme1.headerRowStyle(new GC.Spread.Sheets.Tables.TableStyle('#26a69a', '#fff'));
theme1.firstRowStripStyle(new GC.Spread.Sheets.Tables.TableStyle('#b2dfdb'));
theme1.firstColumnStripStyle(new GC.Spread.Sheets.Tables.TableStyle('#b2dfdb'));
theme1.footerRowStyle(new GC.Spread.Sheets.Tables.TableStyle('#26a69a', '#fff'));
theme1.highlightFirstColumnStyle(new GC.Spread.Sheets.Tables.TableStyle('#26a69a', '#fff'));
theme1.highlightLastColumnStyle(new GC.Spread.Sheets.Tables.TableStyle('#26a69a', '#fff'));
const theme2 = new GC.Spread.Sheets.Tables.TableTheme();
theme2.name('custom2');
theme2.wholeTableStyle(new GC.Spread.Sheets.Tables.TableStyle('#ede7f6'));
theme2.headerRowStyle(new GC.Spread.Sheets.Tables.TableStyle('#ede7f6', '#000'));
theme2.firstRowStripStyle(new GC.Spread.Sheets.Tables.TableStyle('#e1bee7'));
theme2.firstColumnStripStyle(new GC.Spread.Sheets.Tables.TableStyle('#e1bee7'));
theme2.footerRowStyle(new GC.Spread.Sheets.Tables.TableStyle('#ede7f6', '#000'));
spread.customTableThemes.add(theme1);
spread.customTableThemes.add(theme2);
}
const tableStylesList = {
0: "Light1",
1: "Light2",
2: "Light3",
3: "Light4",
4: "Light5",
5: "Light6",
6: "Light7",
7: "Light8",
8: "Light9",
9: "Light10",
10: "Light11",
11: "Light12",
12: "Light13",
13: "Light14",
14: "Light15",
15: "Light16",
16: "Light17",
17: "Light18",
18: "Light19",
19: "Light20",
20: "Light21",
21: "Medium1",
22: "Medium2",
23: "Medium3",
24: "Medium4",
25: "Medium5",
26: "Medium6",
27: "Medium7",
28: "Medium8",
29: "Medium9",
30: "Medium10",
31: "Medium11",
32: "Medium12",
33: "Medium13",
34: "Medium14",
35: "Medium15",
36: "Medium16",
37: "Medium17",
38: "Medium18",
39: "Medium19",
40: "Medium20",
41: "Medium21",
42: "Medium22",
43: "Medium23",
44: "Medium24",
45: "Medium25",
46: "Medium26",
47: "Medium27",
48: "Medium28",
49: "Dark1",
50: "Dark2",
51: "Dark3",
52: "Dark4",
53: "Dark5",
54: "Dark6",
55: "Dark7",
56: "Dark8",
57: "Dark9",
58: "Dark10",
59: "Dark11",
60: "None",
61: "Custom1",
62: "Custom2",
};
let spread = null;
export function AppFunc() {
const [styleOption, setStyleOption] = React.useState({
isShowHeader: true,
isHighlightFirstColumn: false,
isShowFooter: false,
isHighlightLastColumn: false,
isBandColumns: false,
isBandRows: true,
styleType: 'None'
});
const initSpread = (currSpread) => {
spread = currSpread;
spread.fromJSON(jsonData);
initCustomThemes(spread);
let sheet = spread.getActiveSheet();
setStyles(sheet);
spread.bind(GC.Spread.Sheets.Events.EnterCell, (eventType, data) => {
if (data) {
let activeSheet = spread.getActiveSheet();
let activeTable = activeSheet.tables.find(activeSheet.getActiveRowIndex(), activeSheet.getActiveColumnIndex());
if (activeTable) {
let style = activeTable.style(), name = 'None';
if (style) {
name = style.name();
}
setStyleOption({ ...styleOption, styleType: name });
}
}
});
}
const getActiveSheetTable = () => {
let sheet = spread.getActiveSheet();
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()) || sheet.tables.all()[0];
return { sheet, table };
}
const onShowHeader = (e) => {
let { sheet, table } = getActiveSheetTable();
if (table) {
let checked = !styleOption.isShowHeader;
setStyleOption({ ...styleOption, isShowHeader: checked });
table.showHeader(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
const onShowFooter = (e) => {
let { sheet, table } = getActiveSheetTable();
if (table) {
let checked = !styleOption.isShowFooter;
setStyleOption({ ...styleOption, isShowFooter: checked });
table.showFooter(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
const onHighlightFirstColumn = (e) => {
let { sheet, table } = getActiveSheetTable();
if (table) {
let checked = !styleOption.isHighlightFirstColumn;
setStyleOption({ ...styleOption, isHighlightFirstColumn: checked });
table.highlightFirstColumn(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
const onHighlightLastColumn = (e) => {
let { sheet, table } = getActiveSheetTable();
if (table) {
let checked = !styleOption.isHighlightLastColumn;
setStyleOption({ ...styleOption, isHighlightLastColumn: checked });
table.highlightLastColumn(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
const onBandRows = (e) => {
let { sheet, table } = getActiveSheetTable();
if (table) {
let checked = !styleOption.isBandRows;
setStyleOption({ ...styleOption, isBandRows: checked });
table.bandRows(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
const onBandColumns = (e) => {
let { sheet, table } = getActiveSheetTable();
if (table) {
let checked = !styleOption.isBandColumns;
setStyleOption({ ...styleOption, isBandColumns: checked });
table.bandColumns(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
const onStyleTypeChange = (e) => {
let { sheet, table } = getActiveSheetTable();
if (table) {
let value = e.target.value;
setStyleOption({ ...styleOption, styleType: value });
table.style(value);
sheet.repaint();
}
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
</SpreadSheets>
</div>
<Panel
tableStylesList={tableStylesList}
isShowHeader={styleOption.isShowHeader}
isHighlightFirstColumn={styleOption.isHighlightFirstColumn}
isShowFooter={styleOption.isShowFooter}
isHighlightLastColumn={styleOption.isHighlightLastColumn}
isBandColumns={styleOption.isBandColumns}
isBandRows={styleOption.isBandRows}
styleType={styleOption.styleType}
onShowHeader={(e) => { onShowHeader(e) }}
onHighlightFirstColumn={(e) => { onHighlightFirstColumn(e) }}
onShowFooter={(e) => { onShowFooter(e) }}
onHighlightLastColumn={(e) => { onHighlightLastColumn(e) }}
onBandColumns={(e) => { onBandColumns(e) }}
onBandRows={(e) => { onBandRows(e) }}
onStyleTypeChange={(e) => { onStyleTypeChange(e) }}
/>
</div>
);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
import Panel from './panel.jsx';
const Component = React.Component;
function setStyles(sheet) {
let table = sheet.tables.all()[0];
sheet.suspendPaint();
let tableHeaderStyle = new GC.Spread.Sheets.Style();
tableHeaderStyle.backColor = "Accent 1 80";
let tableDataStyle = new GC.Spread.Sheets.Style();
tableDataStyle.backColor = "Accent 4 80";
let tableFooterStyle = new GC.Spread.Sheets.Style();
tableFooterStyle.backColor = "Accent 6 80";
table.layoutStyle({
header: tableHeaderStyle,
data: tableDataStyle,
footer: tableFooterStyle
});
let tableColumnHeaderStyle = new GC.Spread.Sheets.Style();
tableColumnHeaderStyle.backColor = "Accent 1 40";
let tableColumnDataStyle = new GC.Spread.Sheets.Style();
tableColumnDataStyle.backColor = "Accent 4 40";
let tableColumnFooterStyle = new GC.Spread.Sheets.Style();
tableColumnFooterStyle.backColor = "Accent 6 40";
table.columnLayoutStyle(1, {
header: tableColumnHeaderStyle,
data: tableColumnDataStyle,
footer: tableColumnFooterStyle
});
let tableColumn3DataStyle = new GC.Spread.Sheets.Style();
tableColumn3DataStyle.formatter = "0%";
table.columnLayoutStyle(3, {
data: tableColumn3DataStyle
});
sheet.resumePaint();
}
function initCustomThemes(spread) {
const theme1 = new GC.Spread.Sheets.Tables.TableTheme();
theme1.name('custom1');
theme1.wholeTableStyle(new GC.Spread.Sheets.Tables.TableStyle('#e0f2f1'));
theme1.headerRowStyle(new GC.Spread.Sheets.Tables.TableStyle('#26a69a', '#fff'));
theme1.firstRowStripStyle(new GC.Spread.Sheets.Tables.TableStyle('#b2dfdb'));
theme1.firstColumnStripStyle(new GC.Spread.Sheets.Tables.TableStyle('#b2dfdb'));
theme1.footerRowStyle(new GC.Spread.Sheets.Tables.TableStyle('#26a69a', '#fff'));
theme1.highlightFirstColumnStyle(new GC.Spread.Sheets.Tables.TableStyle('#26a69a', '#fff'));
theme1.highlightLastColumnStyle(new GC.Spread.Sheets.Tables.TableStyle('#26a69a', '#fff'));
const theme2 = new GC.Spread.Sheets.Tables.TableTheme();
theme2.name('custom2');
theme2.wholeTableStyle(new GC.Spread.Sheets.Tables.TableStyle('#ede7f6'));
theme2.headerRowStyle(new GC.Spread.Sheets.Tables.TableStyle('#ede7f6', '#000'));
theme2.firstRowStripStyle(new GC.Spread.Sheets.Tables.TableStyle('#e1bee7'));
theme2.firstColumnStripStyle(new GC.Spread.Sheets.Tables.TableStyle('#e1bee7'));
theme2.footerRowStyle(new GC.Spread.Sheets.Tables.TableStyle('#ede7f6', '#000'));
spread.customTableThemes.add(theme1);
spread.customTableThemes.add(theme2);
}
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.tableStylesList = {
0: "Light1",
1: "Light2",
2: "Light3",
3: "Light4",
4: "Light5",
5: "Light6",
6: "Light7",
7: "Light8",
8: "Light9",
9: "Light10",
10: "Light11",
11: "Light12",
12: "Light13",
13: "Light14",
14: "Light15",
15: "Light16",
16: "Light17",
17: "Light18",
18: "Light19",
19: "Light20",
20: "Light21",
21: "Medium1",
22: "Medium2",
23: "Medium3",
24: "Medium4",
25: "Medium5",
26: "Medium6",
27: "Medium7",
28: "Medium8",
29: "Medium9",
30: "Medium10",
31: "Medium11",
32: "Medium12",
33: "Medium13",
34: "Medium14",
35: "Medium15",
36: "Medium16",
37: "Medium17",
38: "Medium18",
39: "Medium19",
40: "Medium20",
41: "Medium21",
42: "Medium22",
43: "Medium23",
44: "Medium24",
45: "Medium25",
46: "Medium26",
47: "Medium27",
48: "Medium28",
49: "Dark1",
50: "Dark2",
51: "Dark3",
52: "Dark4",
53: "Dark5",
54: "Dark6",
55: "Dark7",
56: "Dark8",
57: "Dark9",
58: "Dark10",
59: "Dark11",
60: "None",
61: "Custom1",
62: "Custom2",
};
this.state = {
isShowHeader: true,
isHighlightFirstColumn: false,
isShowFooter: false,
isHighlightLastColumn: false,
isBandColumns: false,
isBandRows: true,
styleType: 'None'
};
}
render() {
const {
isShowHeader,
isHighlightFirstColumn,
isShowFooter,
isHighlightLastColumn,
isBandColumns,
isBandRows,
styleType
} = this.state;
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>
</div>
<Panel
tableStylesList={this.tableStylesList}
isShowHeader={isShowHeader}
isHighlightFirstColumn={isHighlightFirstColumn}
isShowFooter={isShowFooter}
isHighlightLastColumn={isHighlightLastColumn}
isBandColumns={isBandColumns}
isBandRows={isBandRows}
styleType={styleType}
onShowHeader={(e) => { this.onShowHeader(e) }}
onHighlightFirstColumn={(e) => { this.onHighlightFirstColumn(e) }}
onShowFooter={(e) => { this.onShowFooter(e) }}
onHighlightLastColumn={(e) => { this.onHighlightLastColumn(e) }}
onBandColumns={(e) => { this.onBandColumns(e) }}
onBandRows={(e) => { this.onBandRows(e) }}
onStyleTypeChange={(e) => { this.onStyleTypeChange(e) }}
/>
</div>
);
}
initSpread(spread) {
let self = this;
self.spread = spread;
spread.fromJSON(jsonData);
initCustomThemes(spread);
let sheet = spread.getActiveSheet();
setStyles(sheet);
spread.bind(GC.Spread.Sheets.Events.EnterCell, (eventType, data) => {
if (data) {
let activeSheet = spread.getActiveSheet();
let activeTable = activeSheet.tables.find(activeSheet.getActiveRowIndex(), activeSheet.getActiveColumnIndex());
if (activeTable) {
let style = activeTable.style(), name = 'None';
if (style) {
name = style.name();
}
self.setState({ styleType: name });
}
}
});
}
getActiveSheetTable() {
let sheet = this.spread.getActiveSheet();
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()) || sheet.tables.all()[0];
return { sheet, table };
}
onShowHeader(e) {
let { sheet, table } = this.getActiveSheetTable();
if (table) {
let checked = !this.state.isShowHeader;
this.setState({ isShowHeader: checked });
table.showHeader(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
onShowFooter(e) {
let { sheet, table } = this.getActiveSheetTable();
if (table) {
let checked = !this.state.isShowFooter;
this.setState({ isShowFooter: checked });
table.showFooter(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
onHighlightFirstColumn(e) {
let { sheet, table } = this.getActiveSheetTable();
if (table) {
let checked = !this.state.isHighlightFirstColumn;
this.setState({ isHighlightFirstColumn: checked });
table.highlightFirstColumn(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
onHighlightLastColumn(e) {
let { sheet, table } = this.getActiveSheetTable();
if (table) {
let checked = !this.state.isHighlightLastColumn;
this.setState({ isHighlightLastColumn: checked });
table.highlightLastColumn(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
onBandRows(e) {
let { sheet, table } = this.getActiveSheetTable();
if (table) {
let checked = !this.state.isBandRows;
this.setState({ isBandRows: checked });
table.bandRows(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
onBandColumns(e) {
let { sheet, table } = this.getActiveSheetTable();
if (table) {
let checked = !this.state.isBandColumns;
this.setState({ isBandColumns: checked });
table.bandColumns(checked);
sheet.invalidateLayout();
sheet.repaint();
}
}
onStyleTypeChange(e) {
let { sheet, table } = this.getActiveSheetTable();
if (table) {
let value = e.target.value;
this.setState({ styleType: value });
table.style(value);
sheet.repaint();
}
}
}
import * as React from 'react';
export default function Panel(props){
const {
tableStylesList,
isShowHeader,
isHighlightFirstColumn,
isShowFooter,
isHighlightLastColumn,
isBandColumns,
isBandRows,
styleType,
onShowHeader,
onHighlightFirstColumn,
onShowFooter,
onHighlightLastColumn,
onBandColumns,
onBandRows,
onStyleTypeChange
} = props;
return (
<div class="options-container">
<p>Select the table in the Spread instance and change the style and properties using the checkboxes and drop-down menu.</p>
<div class="option-group">
<input type="checkbox" id="showHeader" checked={isShowHeader} onChange={(e)=>{onShowHeader(e)}} />
<label for="showHeader">Header Row</label>
</div>
<div class="option-group">
<input type="checkbox" id="highlightFirstColumn" checked={isHighlightFirstColumn} onChange={(e)=>{onHighlightFirstColumn(e)}} />
<label for="highlightFirstColumn">First Column</label>
</div>
<div class="option-group">
<input type="checkbox" id="showFooter" checked={isShowFooter} onChange={(e)=>{onShowFooter(e)}} />
<label for="showFooter">Total Row</label>
</div>
<div class="option-group">
<input type="checkbox" id="highlightLastColumn" checked={isHighlightLastColumn} onChange={(e)=>{onHighlightLastColumn(e)}} />
<label for="highlightLastColumn">Last Column</label>
</div>
<div class="option-group">
<input type="checkbox" id="bandColumns" checked={isBandColumns} onChange={(e)=>{onBandColumns(e)}} />
<label for="bandColumns">Banded Column</label>
</div>
<div class="option-group">
<input type="checkbox" id="bandRows" checked={isBandRows} onChange={(e)=>{onBandRows(e)}} />
<label for="bandRows">Banded Row</label>
</div>
<div class="option-group">
<label for="tableStyles">Styles:</label>
<select id="tableStyles" value={styleType} onChange={(e)=>{onStyleTypeChange(e)}}>
{
Object.keys(tableStylesList).map((key) => {
return <option value={tableStylesList[key]} key={key}>{tableStylesList[key]}</option>
})
}
</select>
</div>
</div>
);
}
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="data.js" type="text/javascript"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.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;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.option-group {
margin-bottom: 6px;
}
label {
display: inline-block;
min-width: 90px;
margin-bottom: 6px;
}
select {
padding: 4px 6px;
}
p {
padding: 0 0 12px;
margin: 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.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'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
