# Set Table Styles

A tutorial showing how to customize tables by configuring and applying different styles to tables in SpreadJS, including UI and code examples

## Content

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](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#lastFooterCellStyle) is not displayed unless [showFooter](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.Table#showFooter) is true.
The following table lists the [Table](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.Table) method that must be true so that the associated table styles are displayed in the table.

| **Table** | **TableTheme** |
| ----- | ---------- |
| [bandColumns](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.Table#bandColumns) | [firstColumnStripSize](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#firstColumnStripSize),[firstColumnStripStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#firstColumnStripStyle),[secondColumnStripSize](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#secondColumnStripSize),[secondColumnStripStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#secondColumnStripStyle) |
| [bandRows](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.Table#bandRows) | [firstRowStripSize](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#firstRowStripSize),[firstRowStripStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#firstRowStripStyle),[secondRowStripSize](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#secondRowStripSize),[secondRowStripStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#secondRowStripStyle) |
| [highlightFirstColumn](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.Table#highlightFirstColumn) | [highlightFirstColumnStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#highlightFirstColumnStyle) |
| [highlightLastColumn](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.Table#highlightLastColumn) | [highlightLastColumnStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#highlightLastColumnStyle) |
| [showHeader](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.Table#showHeader) | [firstHeaderCellStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#firstHeaderCellStyle),[lastHeaderCellStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#lastHeaderCellStyle),[headerRowStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#headerRowStyle) |
| [showFooter](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.Table#showFooter) | [footerRowStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#headerRowStyle),[firstFooterCellStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#firstFooterCellStyle),[lastFooterCellStyle](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableTheme#lastFooterCellStyle),[useFooterDropDownList](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.Table#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](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.TableThemes) class for a list of built-in styles and the [TableTheme](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.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.

![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/spreadjsv13images/table1.png)

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

```javascript
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-header](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/table-header.c55245.png?width=285) |
| Table Data Style | ![table-data](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/table-data.7018f1.png?width=285) |
| Table Footer Style | ![table-footer](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/table-footer.b3d35e.png?width=285) |
| Table Column Header Style | ![table-column-header](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/table-column-header.2983ce.png?width=285) |
| Table Column Data Style | ![table-column-data](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/table-column-data.5d4f87.png?width=285) |
| Table Column Footer Style | ![table-column-footer](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/table-column-footer.f19dbd.png?width=285) |

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

![table-layout-style](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/table-layout-style.0d06f6.png?width=403)

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.

## Set Table Footer 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.

![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/spreadjsv13images/table2.png)

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

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

## Display Table Footer Dropdown

Apart from setting the table footer style, users can also display a dropdown list in the table footer using the [useFooterDropDownList](/spreadjs/api/v18/classes/GC.Spread.Sheets.Tables.Table#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:

![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/spreadjsv13images/table3.png)

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

```javascript
// 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);
```