Setting Table Styles

You can use a built-in style for the entire table or you can set styles for specific areas of the table such as rows or columns.

Refer to the TableThemes class for a list of built-in styles. Refer to the TableTheme class for styles that can be set for specific areas.

Some style properties 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 Table method that must be true so that the associated table style is displayed in the table.

Table	TableTheme
bandColumns	firstColumnStripSize, firstColumnStripStyle, secondColumnStripSize, secondColumnStripStyle
bandRows	firstRowStripSize, firstRowStripStyle, secondRowStripSize, secondRowStripStyle
highlightFirstColumn	highlightFirstColumnStyle
highlightLastColumn	highlightLastColumnStyle
showHeader	firstHeaderCellStyle, lastHeaderCellStyle, headerRowStyle
showFooter	footerRowStyle, firstFooterCellStyle, lastFooterCellStyle

Using Code

This example creates a table and sets the table style using a built-in style.

JavaScript	Copy Code
activeSheet.tables.add("Table1", 0, 0, 3, 3, GC.Spread.Sheets.Tables.TableThemes.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");

Using Code

This example displays a style for the table footer.

JavaScript	Copy Code
window.onload = function(){ var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3}); var activeSheet = spread.getActiveSheet(); //Add data for (var col = 1; col < 6; col++) { for (var row = 2; row < 11; row++) { activeSheet.setValue(row, col, row + col); } } var tableStyle = new GC.Spread.Sheets.Tables.TableTheme(); var thinBorder = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.dotted); tableStyle.wholeTableStyle(new GC.Spread.Sheets.Tables.TableStyle("aliceblue", "green", "bold 10pt arial", thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, thinBorder, GC.Spread.Sheets.TextDecorationType.none)); var tStyleInfo = new GC.Spread.Sheets.Tables.TableStyle(); tStyleInfo.backColor = "green"; tStyleInfo.foreColor = "red"; tStyleInfo.borderBottom = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin); tStyleInfo.borderLeft = new GC.Spread.Sheets.LineBorder("yellow", GC.Spread.Sheets.LineStyle.medium); tStyleInfo.borderTop = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin); tStyleInfo.borderRight = new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.thin); tStyleInfo.font = "bold 11pt arial"; tableStyle.footerRowStyle(tStyleInfo); var sTable = activeSheet.tables.add("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="height: 500px; width: 800px"></div>

JavaScript

Copy Code