TableSheet

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.

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.

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.

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.

The TableSheet field area and group area work the same as their runtime counterpart. To know more, refer to TableSheet Components.

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.

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.

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.

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.

As observed, the drag tips use the value of the relationship to avoid duplicate names in the Group area.