Set Table Styles

SpreadJS allows users to customize tables by configuring and applying different styles to the table while working with spreadsheets.

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 styles are 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,useFooterDropDownList

Set Table Style

Users can use a built-in style for the entire table or can also set styles for specific areas of the table such as rows or columns. You can refer to the TableThemes class for a list of built-in styles and the TableTheme class for styles that can be set for specific areas.

The following image shows a built-in style (with Dark Theme) applied to the table.

The following code sample creates a table and sets the table style using a built-in style.

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");

Set Table Layout Styles

Users can also configure the table layout style for the specified table area by defining different table ranges. You can use the layoutStyle method to implement the following layout styles:

Layout Styles	Implementation
Table Header Style
Table Data Style
Table Footer Style
Table Column Header Style
Table Column Data Style
Table Column Footer Style

The following image shows that the column’s data and footer are styled using the columnLayoutStyle method.

table-layout-style

The following code sample styles the column’s data and footer by specifying the column range.

// Sets the layout style to the table column.
var table = activeSheet.tables.find(1, 1);
var dataStyle = new GC.Spread.Sheets.Style();
dataStyle.backColor = "red";
var footerStyle = new GC.Spread.Sheets.Style();
footerStyle.backColor = "green";
var layoutStyle = {};
layoutStyle.data = dataStyle;
layoutStyle.footer = footerStyle;

// Sets column layout style for the first column.
table.columnLayoutStyle(1, layoutStyle);

Table layouts prioritize the styling of table areas as Cell Style > Table Style > Row Style > Column Style, whereas in the table style, they are prioritized as Table Column Layout Style > Table Layout Style > Table Theme.

Note: The instance of the TableColumn allows you to get or set the formatter and cellType by constructor or directly. The formatter and cellType are stored in the table column’s data style.

Users can configure a custom table footer style easily and quickly by defining a new table style and then setting different properties for the background color, foreground color, borders, and fonts.

The following image depicts a custom style for the table footer along with the table styling.

The following code sample displays a spreadsheet with a custom style applied to the table footer.

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)");
}

Apart from setting the table footer style, users can also display a dropdown list in the table footer using the useFooterDropDownList method. This method shows a complete dropdown list (with several options -"None", "Average", "Count", "Count Numbers", "Max", "Min", "Sum", "StdDev' and Var, etc.) when the dropdown indicator in the footer cell is clicked, as depicted in the image shared below:

The following code sample shows how to display a table footer dropdown list in the spreadsheet.

// Initializing Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// Get the activesheet
var activeSheet = spread.getActiveSheet();
// Add Table
var table = activeSheet.tables.add("table1", 1, 1, 4, 4, GC.Spread.Sheets.Tables.TableThemes.light1);

// Enable table's footer using showFooter method
table.showFooter(true);

// Enable table's useFooterDropDownList to true
table.useFooterDropDownList(true);
activeSheet.getCell(1, 1).text("First Name");
activeSheet.getCell(1, 2).text("Last Name");
activeSheet.getCell(1, 3).text("Score");
activeSheet.getCell(1, 4).text("Position");
activeSheet.getCell(2, 1).text("Alexa");
activeSheet.getCell(2, 2).text("Wilder");
activeSheet.getCell(2, 3).text("90");
activeSheet.getCell(2, 4).text("Web Developer");
activeSheet.getCell(3, 1).text("Victor");
activeSheet.getCell(3, 2).text("Wooten");
activeSheet.getCell(3, 3).text("70");
activeSheet.getCell(3, 4).text(".NET Developer");
activeSheet.getCell(4, 1).text("Ifeoma");
activeSheet.getCell(4, 2).text("Mays");
activeSheet.getCell(4, 3).text("85");
activeSheet.getCell(4, 4).text("Sales Manager");
for (var i = 0; i < 3; i++)
activeSheet.setColumnWidth(i, 90.0, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setColumnWidth(4, 120);

Set Table Styles

Set Table Style

Set Table Layout Styles

Set Table Footer Style

Display Table Footer Dropdown