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>
|
See Also