Skip to main content Skip to footer

Setting Table Styles in SpreadJS

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


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


firstColumnStripStyle, firstColumnStripSize, secondColumnStripSize, secondColumnStripStyle


firstRowStripSize, firstRowStripStyle, secondRowStripSize, secondRowStripStyle






lastFooterCellStyle, firstFooterCellStyle, footerRowStyle


firstHeaderCellStyle, lastHeaderCellStyle, headerRowStyle

The following example displays a style for the table footer. image002


$(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)"); }) ...

Note: SpreadJS requires a browser that supports HTML5.


comments powered by Disqus