# TableSheet

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

## Content

SpreadJS Designer provides the ability to add a TableSheet in a workbook.
The **TableSheet** ribbon button can be found in the **INSERT** \> **Sheets** tab group. Clicking on the ribbon button adds a **TableSheet1** tab in the open workbook and activates the **TABLE SHEET DESIGN** tab.
![SpreadJS Designer workflow showing the TableSheet ribbon button in INSERT Sheets adding a TableSheet1 tab and activating TABLE SHEET DESIGN.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/create%20new-20260721.871783.gif?width=800)
You can create a data source by clicking the **DataSource** ribbon button in the **DATA** \> **Data Binding** tab group. The **DataSource** tab appears where you can add a table and set the remote URL for CRUD (create, read, update, and delete) capabilities. You can fetch the table data through the **Columns** tab as well.
![SpreadJS Designer DataSource workflow showing the DATA Data Binding command used to add a table and configure a remote CRUD URL.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/2.84222c.gif?width=800)
You can click a column item to show or edit a column item by setting its properties, and schema type, or to add a relationship. A calculated column can also be added by clicking the **Add Calculate Column** at the end of the list.
![SpreadJS Designer DataSource Columns tab showing column item editing for properties, schema type, relationships, and calculated columns.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/3.2387ea.gif?width=800)
After adding the Data Source in Designer, users can now bind the table data source into TableSheet through the Designer **Table Sheet** Panel. Select the existing table data source or create a new table data source through the **Binding Table** dropdown. The TableSheet view will load up on the previously empty area.
![SpreadJS Designer Table Sheet panel showing the Binding Table dropdown used to bind an existing table data source to a TableSheet.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/bindData-20260721.80b629.gif?width=800)
The TableSheet field area and group area work the same as their runtime counterpart. To know more, refer to [TableSheet Components](/spreadjs/docs/features/tablesheet/tablesheet-components).

>type=note
> **Note:** The DataSource sheet does not export to SSJSON or Excel files, but the DataSource tables with table options are included in SSJSON.

## Display Relationship in DataSource Column

**SpreadJS** allows you to showcase relationships as a column in the **Data Source** Columns list both for the designer and the runtime table sheet panel.
![SpreadJS Data Source Columns list showing relationship columns displayed for Designer and runtime TableSheet panel data binding scenarios.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/5.01dff4.gif?width=800)

## Display Relationship in Designer Panel

SpreadJS also displays relationships in the **Table Sheet** Designer side panel. To make the UI more space-saving, the side panel only shows the name of the relationship column with an expand or collapse button. Hence, it is convenient to expand or collapse the relationship column nodes and view the child nodes, when required.
![SpreadJS Table Sheet Designer side panel showing expandable relationship column nodes for viewing parent and child fields in a tree structure.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/relation-20260721.a80723.gif?width=800)
A tree structure is used in the side panel to better display the relationship between parent column relationship nodes. The check/uncheck buttons are also provided to check or uncheck the columns in the TableSheet. Selecting the main relationship column will add a column with the object in the TableSheet. If a relationship column is selected, the corresponding column will be added, and the child column names will indicate the hierarchical relationship through ".".

## Drag and Drop Relationship Columns

Users can drag and drop relationship nodes in the **Binding Table** Fields, and Groups area on the **Table Sheet** Designer side panel.
You can drag and drop relationship nodes on the side panel in the following ways:

* Drag the relationship node within the Binding Table fields.

![SpreadJS Table Sheet Designer side panel showing a relationship node dragged within the Binding Table fields area.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/7.cbfec5.gif?width=400)

* Drag the relationship to the **Groups** area.

![SpreadJS Table Sheet Designer side panel showing a relationship node dragged from Binding Table fields into the Groups area.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/8.dab31d.gif?width=400)
As observed, the drag tips use the value of the relationship to avoid duplicate names in the Group area.