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 TableStyles class for a list of built-in styles. Refer to the TableStyle 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 SheetTable method that must be true so that the associated table style is displayed in the table.

SheetTable	TableStyle
bandColumns	firstColumnStripSize, firstColumnStripStyle, secondColumnStripSize, secondColumnStripStyle
bandRows	firstRowStripSize, firstRowStripStyle, secondRowStripSize Method, secondRowStripStyle
highlightFirstColumn	highlightFirstColumnStyle
highlightLastColumn	highlightLastColumnStyle
showHeader	firstHeaderCellStyle, lastHeaderCellStyle, footerRowStyle
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.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");

Using Code

This example displays a style for the table footer.

JavaScript	Copy Code
$(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)"); }) ... <div id="ss" style="width:500px;height:500px"></div>

JavaScript

Copy Code

$(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)");
        })
...
<div id="ss" style="width:500px;height:500px"></div>