You can set styles for many areas of a table with the current version of SpreadJS. You can use a built-in style for the entire table or you can set styles for specific areas.

The TableStyles class has a complete list of the built-in table styles.

The following example creates a table and sets the table style using a built-in style.
image001

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");


 Some style methods apply to areas that are not visible or do not have a style setting by default. For example, the lastFooterCellStyle is not displayed unless showFooter is true. The following table lists the SheetTable method that must be true so that the associated table style is displayed in the table.



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


The following example displays a style for the table footer.

image002

JavaScript

 

$(function () {var spread = new GcSpread.Sheets.Spread($("#ss")[0]);var sheet = spread.getActiveSheet();//Add datafor (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 valuesTable.setColumnValue(0, "Total");//set footer formulasTable.setColumnFormula(4, "SUM(F3:F11)");})...<div id="ss" style="width:500px;height:500px"></div>


Note: SpreadJS requires a browser that supports HTML5.