# GanttSheet Designer

## Content

SpreadJS Designer Component provides the option to insert a [GanttSheet](/spreadjs/docs/v17/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.

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.4df8dd.png?width=600)

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

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.e2d26d.png?width=700)

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.

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.1006a8.png?width=700)
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.ba0200.png?width=700)

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.

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.ad0ae0.png?width=1190)

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.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.09f24a.png?width=800)

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.

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.dbc642.png?width=300)

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 *taskId.id*.

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.9697b7.png?width=900)

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.

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.3dea24.png?width=800)
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/v17/) | Provides options to perform various task operations. |
| [Project Tab](/spreadjs/docs/v17/) | Provides options to manage project information. |
| [View Tab](/spreadjs/docs/v17/) | Provides options to sort and zoom a specific timescale. |
| [Gantt Chart Format Tab](/spreadjs/docs/v17/) | Provides options to customize the taskbar appearance. |