# Create GanttSheet

A tutorial showing how to create a GanttSheet in SpreadJS, including code examples

## Content

To create a GanttSheet, follow the below steps:

1. Add the following script files to use the GanttSheet.

    ```auto
    <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
    <script src='.../spreadjs/plugins/gc.spread.sheets.tablesheet.x.x.x.min.js' type='text/javascript'></script>
    <script src='.../spreadjs/plugins/gc.spread.sheets.ganttsheet.x.x.x.min.js' type='text/javascript'></script>
    ```
2. Create an instance of the spread and add a sheet tab of type ganttSheet.

    ```javascript
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spread");
    var ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
    ```
3. Initialize the data manager using the [DataManager](/spreadjs/api/classes/GC.Data.DataManager) method.

    ```javascript
    var dataManager = spread.dataManager();
    ```
4. Add a table in the Data Manager using the [addTable](/spreadjs/api/classes/GC.Data.DataManager#addTable) method. This method accepts the table name as a string and the [IDataSourceOption](/spreadjs/api/modules/GC.Data#idatasourceoption) interface options.

    ```javascript
    var myTable1 = dataManager.addTable("myTable1", {
        batch: true,
        remote: {
            read: {
                    url: apiUrl
                  }
    },
    ```

    > **Note**: Since the data has a relation to the GanttSheet, you should use batch mode to save them.
5. Define the required hierarchy schema based on your data source structure.

    ```javascript
    schema: {
        hierarchy: {
            type: "Parent",
                column: "parentId"
                },
                columns: {
                    id: { isPrimaryKey: true },
                    taskNumber: { dataType: "rowOrder" }
                }
    }
    ```

    To know more about different hierarchy types, please refer to the [Add Hierarchy Types](/spreadjs/docs/features/ganttsheet/add-hierarchy-types) page.
<br>
6. Add a view to the table of the Data Manager using the [addView ](/spreadjs/api/classes/GC.Data.Table#addView)method and define column info to initialize a GanttSheet.

    ```javascript
    ganttSheet = spread.addSheetTab(0, "GanttSheet1", 
    GC.Spread.Sheets.SheetType.ganttSheet);
    var view = myTable1.addView("myView1", [
        { value: "taskNumber", caption: "NO.", width: 60 },
        { value: "name", caption: "Task Name", width: 200 },
        { value: "duration", caption: "Duration", width: 90 },
        { value: "predecessors", caption: "Predecessors", width: 120 , visible: false}
    ]);
    ```
7. Use the [fetch](/spreadjs/api/classes/GC.Data.Table#fetch) method of the Data Manager view to retrieve the view, and then bind it to the GanttSheet using the bindGanttView method.

    ```javascript
    view.fetch().then(function () {
    ganttSheet.bindGanttView(view);
    });
    ```