SpreadJS Documentation
Setting Table Styles
SpreadJS Documentation > Developer's Guide > Managing the User Interface > Using Tables > 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 firstColumnStripSizefirstColumnStripStylesecondColumnStripSizesecondColumnStripStyle
bandRows firstRowStripSizefirstRowStripStylesecondRowStripSizesecondRowStripStyle
highlightFirstColumn highlightFirstColumnStyle
highlightLastColumn highlightLastColumnStyle
showHeader firstHeaderCellStylelastHeaderCellStyleheaderRowStyle
showFooter footerRowStylefirstFooterCellStylelastFooterCellStyle

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