Modify Custom Table Styles

SpreadJS allows users to add, delete, and modify the custom table styles, and apply these styles to your tables. To apply these table styles, you need to set a style name for the table.

To manage table styles, use the customTableThemes property of the GC.Spread.Sheets.WorkBook class.

The CustomTableThemesManager class provides the following methods to manage custom table themes:

• all: Get all custom table themes.

• get: Get a specific custom table theme by name.

• add: Add a new custom table theme using a style object or name.

• remove: Remove a custom table theme by name.

• update: Update an existing custom table theme by name or style object.

Additionally, the defaultTableTheme method of GC.Spread.Sheets.WorkBook class enables you to effectively manage default table styles to ensure a consistent look and feel across all tables.

Note:

• Table style names must be unique.

  For example, if you already have a custom table style named "TEST", you cannot create another table style with the same name.

• Table style names are case insensitive.

• The defaultTableTheme should be a string representing the style name of the table.

  If a table is created without explicitly specifying a style and a style with this default name exists, then the style will be applied to that table.

• Modifying an existing table style will automatically update all tables that previously applied that style.

• When you delete a table style, all tables that use the deleted style will use the default style.

Using Code

The following code samples demonstrate different methods necessary to manage custom table themes.

1. Add a new table theme.

   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   
   // Add a new table style named “custom0”.
   let tableStyle = spread.customTableThemes.add("custom0");
   const firstColumnStripStyle = new GC.Spread.Sheets.Tables.TableStyle();
   firstColumnStripStyle.backColor = "#0C66E4";
   tableStyle.firstColumnStripStyle(firstColumnStripStyle);

2. Get the table theme.

   // Get table style.
   tableStyle = spread.customTableThemes.get("custom0");

3. Apply table theme.

   // Apply table style to table.
   let table = activeSheet.tables.add("table1", 1, 1, 10, 5);
   table.styleName("custom0");

   When you set a style name for a table, the table gets the style by its name. If the style name matches an internal style, it will be applied directly. If not, it will search for the corresponding style in the customStyles collection. If found, that style will be applied. Otherwise, the default style will be used.

4. Modify table theme.

   // Modify table style.
   const tableStyle = spread.customTableThemes.get("custom0");
   tableStyle.firstColumnStripStyle().backColor = "red";
   
   // Update table theme.
   spread.customTableThemes.update("custom0", new GC.Spread.Sheets.Tables.TableTheme());

5. Delete table theme.

   // Delete table style.
   spread.customTableThemes.remove("custom0");

6. Set default theme.

   // Set default table style.
   spread.defaultTableTheme("custom0");

Using Designer

You can also format custom table styles using the SpreadJS Designer Component by following the steps below:

1. Click the Format Table button available in the TABLE DESIGN > Table Styles group.

   
   

   
   

   
   

2. Click the dropdown arrow and select the New Table Style.. option to add a new table style by setting your required style elements.

   
   

   
   

   
   

3. All the user-created table styles are displayed under the Custom section of the table styles collection list.

   
   

   
   

   
   

4. Right-click on the custom table style and perform actions such as apply, modify, duplicate, delete, and set as default actions, as per your requirement.

   
   

   
   

   
   

Note: You cannot modify or delete built-in table styles.