# TableSheet Design Mode

A tutorial showing how to work with TableSheets in Design Mode in the SpreadJS Designer Component with UI

## Content

SpreadJS provides a design mode to create and edit the free header area and multiple headers in a tablesheet view. You can enter the design mode by accessing the **Design Mode** ribbon button from the **TABLE SHEET DESIGN** tab.
![SpreadJS Designer TABLE SHEET DESIGN tab showing the Design Mode ribbon button for editing free header areas and multiple TableSheet headers.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260721.4986de.png?width=800)
To add new rows before the selected row, click the row header “+” button. Similarly, click the row header “-” button to remove the selected row.
![SpreadJS TableSheet design mode showing row header plus and minus buttons used to add or remove header rows.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/10.3d9919.png?width=800)
To apply the changes and exit the design mode, click the “Design Mode” ribbon button again.

## Free Header Area

You can enter the editing state of a free header area by double-clicking the cell. The values can be edited at any time, and it supports styling as well as grouping columns.
![SpreadJS TableSheet free header area editing workflow showing a cell entering edit state for values, styling, and grouped columns.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/11.be4772.gif?width=800)

## Multiple Column Header

You can add a caption header for multiple columns by inputting the same value in every column cell and triggering auto-merge for the cells. The values can only be edited in the design mode and do not support styles. If the only row in the multiple header section is empty, it will use the default caption.
![SpreadJS TableSheet multiple column header workflow showing repeated caption values triggering auto-merge across column header cells.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/tablessheet-header-20260709.56f297.gif?width=800)

## Grouping Layout Settings

You can switch between the grouping layout modes to optimize the presentation of your grouped data by selecting desired layouts from the ‘**Group Layout**’ dropdown available in the ‘**Groups**’ section of ‘**TABLE SHEET DESIGN**’ tab.
![SpreadJS Designer TABLE SHEET DESIGN tab showing the Group Layout dropdown with Tabular, Outline, and Condensed layout options for grouped TableSheet data.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260721.44e758.png?width=800)
![SpreadJS Designer TABLE SHEET DESIGN tab showing the Group Layout Position dropdown with Header and Footer options for grouped TableSheet data.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260721.44361e.png?width=800)
SpreadJS Designer Component enables you to set the aggregation formula, caption, or other grouping fields using TableSheet panel available on the right-side of the tablesheet.

![SpreadJS Designer TableSheet side panel showing settings for aggregation formula, caption, and grouping fields on the right side.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/15.3705c5.png?width=350)

To know how to apply multiple caption headers, free header areas, and other group layout settings in runtime, refer to [TableSheet Views](/spreadjs/docs/v19/features/tablesheet/tablesheet-views).

## Trigger Formula

You can define the trigger formula on the **Columns** tab of the DataSource by selecting a column that needs a trigger formula and scrolling down to the **Trigger Formula** section.
![SpreadJS Designer DataSource Columns tab showing the Trigger Formula section for configuring formulas on selected data source columns.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/16.084085.png?width=400)
Select the relevant option from **When**, input a trigger formula in the **Formula** textbox, and check the **“Any Field”** checkbox to watch for any change in the fields triggering the formula. You can alternatively select individual fields from the drop down menu.
![SpreadJS Designer Trigger Formula settings showing When options, Formula textbox, Any Field checkbox, and field selection dropdown.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/17.9be3c1.png?width=400)