# GanttSheet Designer

A tutorial showing how to work with GanttSheets in the SpreadJS Designer Component, including how to insert, manipulate, and update GanttSheets

## Content

SpreadJS Designer Component provides the option to insert a [GanttSheet](/spreadjs/docs/v18/features/ganttsheet) in a workbook.
The **GanttSheet** button is available in the **INSERT** \> **Sheets** tab group. Clicking on the **GanttSheet** button adds a **GanttSheet1** sheet to the sheets collection of the workbook and opens the **GANTT CHART FORMAT** tab.

![1.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/1.791c23.png?width=800&verticalAlign=middle)

By default, the **GANTT CHART FORMAT** tab displays a blank area on the left and a Gantt Sheet panel on the right.

![2.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/2.eb6d41.png?width=800&verticalAlign=middle)

To add a data source, select the **(New Table)** option from the **Binding Table** drop-down present in the **Gantt Sheet Panel** or by clicking the **DataSource** ribbon button from the **DATA** \> **Data Binding** tab group.
In the **DataSource**, you can add tables and provide the external URL for CRUD operations. You can further fetch the table data using the **Columns** tab.

![3.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/3.01b5de.png?width=800&verticalAlign=middle)

![4.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/4.79b996.png?width=800&verticalAlign=middle)
You can click a column item to view or edit its properties, schema type, and to add a relationship. A calculated column can also be added by clicking the **Add Calculate Column** at the bottom of the list.
After fetching the DataSource using Designer, you can now bind the table DataSource into the GanttSheet through the Gantt Sheet Panel.
The **Binding Table** dropdown allows you to select an existing data source or create a new one. The GanttSheet will now appear on the blank GanttSheet view area.

![5.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/5.ab9aa1.png?width=800&verticalAlign=middle)

SpreadJS enables you to display relationships of a column in the Data Source **Columns** list for both the designer and the runtime Gantt Sheet panel. A linked icon is presented to indicate the related column. To explore the details of the relationship, you can click the arrow button.

![6.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/6.ab6b8a.png?width=800&verticalAlign=middle)
SpreadJS also shows relationships on the Gantt Sheet panel. The **Fields** section displays the name of the connection columns, along with an expand arrow button. You can expand the relationship column nodes and view the child nodes if needed.

![7.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/7.367aa2.png?width=300&verticalAlign=middle)

The Gantt Sheet panel displays a tree-like structure to better depict the relationship between parent-child nodes.
Note that the check/uncheck buttons are also available to check or uncheck the columns in the GanttSheet. When you select the main relationship column, a column with the object will appear in the GanttSheet. However, if a child relationship column is selected, the matching column will be inserted, and the child column names will include the hierarchical relationship with the "." symbol, such as *myTable1\_Id.id*.

![8.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/8.6695e4.png?width=800&verticalAlign=middle)

The SpreadJS Designer Component also enables you to modify column settings. To make modifications to the default settings, select a column in the Gantt Sheet. This will open the **COLUMN SETTING** tab, where you can adjust various parameters such as caption, value, column name, data type, styles, and so on as needed.

![9.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/9.e839c5.png?width=800&verticalAlign=middle)
Additionally, GanttSheet enables you to perform different task-related operations, view data information, change chart formats, etc. To know more, refer to the following topics.

| Topic | Description |
| ----- | ----------- |
| [Task Tab](/spreadjs/docs/v18/spreadjs-designer-component/spdesignerwork/ganttsheet-designer/tasks-related-operations) | Provides options to perform various task operations. |
| [Project Tab](/spreadjs/docs/v18/spreadjs-designer-component/spdesignerwork/ganttsheet-designer/project-management) | Provides options to manage project information. |
| [View Tab](/spreadjs/docs/v18/spreadjs-designer-component/spdesignerwork/ganttsheet-designer/view) | Provides options to sort and zoom a specific timescale. |
| [Gantt Chart Format Tab](/spreadjs/docs/v18/spreadjs-designer-component/spdesignerwork/ganttsheet-designer/gantt-chart-formats) | Provides options to customize the taskbar appearance. |