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

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 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.

MESCIUS inc.

comments powered by Disqus