Setting Table Styles in SpreadJS

JavaScript

activeSheet.addTable(“Table1″, 0, 0, 3, 3, GcSpread.Sheets.TableStyles.dark1());
activeSheet.getCell(0,0).text(“Name”);
activeSheet.getCell(0,1).text(“Value”);
activeSheet.getCell(0,2).text(“T/F”);
activeSheet.getCell(1,0).text(“AW”);
activeSheet.getCell(1,1).text(“5″);
activeSheet.getCell(1,2).text(“T”);

SheetTable method

TableStyle method

bandColumns

firstColumnStripStyle, firstColumnStripSize,
secondColumnStripSize, secondColumnStripStyle

bandRows

firstRowStripSize, firstRowStripStyle, secondRowStripSize, secondRowStripStyle

highlightFirstColumn

highlightFirstColumnStyle

highlightLastColumn

highlightLastColumnStyle

showFooter

lastFooterCellStyle, firstFooterCellStyle, footerRowStyle

showHeader

firstHeaderCellStyle, lastHeaderCellStyle, headerRowStyle

JavaScript

$(function () {
var spread = new GcSpread.Sheets.Spread($(“#ss”)[0]);
var sheet = spread.getActiveSheet();//Add data
for (var col = 1; col < 6; col++) {
for (var row = 2; row < 11; row++) {
sheet.setValue(row, col, row + col);
}
}var tableStyle = new GcSpread.Sheets.TableStyle();
var thinBorder = new GcSpread.Sheets.LineBorder(“black”, GcSpread.Sheets.LineStyle.dotted);
tableStyle.wholeTableStyle(new GcSpread.Sheets.TableStyleInfo(“aliceblue”, “green”, “bold 10pt arial”, thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, thinBorder));
var tStyleInfo = new GcSpread.Sheets.TableStyleInfo();
tStyleInfo.backColor = “green”;
tStyleInfo.foreColor = “red”;
tStyleInfo.borderBottom = new GcSpread.Sheets.LineBorder(“green”, GcSpread.Sheets.LineStyle.thin);
tStyleInfo.borderLeft = new GcSpread.Sheets.LineBorder(“yellow”, GcSpread.Sheets.LineStyle.medium);
tStyleInfo.borderTop = new GcSpread.Sheets.LineBorder(“green”, GcSpread.Sheets.LineStyle.thin);
tStyleInfo.borderRight = new GcSpread.Sheets.LineBorder(“green”, GcSpread.Sheets.LineStyle.thin);
tStyleInfo.font = “bold 11pt arial”;
tableStyle.footerRowStyle(tStyleInfo);
var sTable = sheet.addTable(“Custom”, 1, 1, 10, 5, tableStyle);
sTable.showFooter(true);
//set footer value
sTable.setColumnValue(0, “Total”);
//set footer formula
sTable.setColumnFormula(4, “SUM(F3:F11)”);
})
…
<div id=”ss” style=”width:500px;height:500px”></div>