# Create TableSheet

## Content

This topic explains the creation of a tablesheet in a spreadsheet by taking a use case scenario, as explained below.

## Use Case Scenario

Consider a scenario where a goods importer and distributor company wants to handle a large amount of data relating to customer information from their backend database. A tablesheet helps display and manage the vast amount of data and enables the user to perform analytics on their data through sorting, filtering, and grouping.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-basic.png)

In order to create a tablesheet, follow the below steps:

1. Initialize a tablesheet by adding a sheet of SheetType "tableSheet" using the [Workbook.addSheetTab](/spreadjs/api/v17/classes/GC.Spread.Sheets.Workbook#addSheetTab) method.
    
    ```javascript
        //init a tablesheet
        var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
    ```
2. Initialize the data manager using the [DataManager](/spreadjs/api/v17/classes/GC.Data.DataManager#_ctor) method.
    
    ```javascript
        //init a data manager
        var dataManager = spread.dataManager();
    ```
3. Add a table in the Data Manager using the [addTable](/spreadjs/api/v17/classes/GC.Data.DataManager#addTable) method. This method accepts the table name as a string and the **IDataSourceOption** interface options.
    
    The IDataSourceOption interface lets you set up two types of data sources:
    * data - Local data source which could be an object array for JSON, a string for CSV, or XML.
    * remote - Remote data source which supports REST API, OData, GraphQL.
        

    ```javascript
        //add table in data manager
        var myTable = dataManager.addTable("myTable", {
            remote: {
                read: {
                    url: 'https://demodata.grapecity.com/wwi/api/v1/customers'
                }
            }
        });
    ```

    You can know more about the data operations in the "Data Operations" topic.
4. Add a view to the table of the Data Manager using the [addView](/spreadjs/api/v17/classes/GC.Data.Table#addView) method and define column info.
    
    By default, the view has all default columns. Refer to [TableSheet Views](/spreadjs/docs/v17/features/tablesheet/tablesheet-views) to know more about column properties and other view options.
    
    ```javascript
    var view = myTable.addView("myView"); //the View has all default columns of the Table
    ```
5. Fetch using the [fetch](/spreadjs/api/v17/classes/GC.Data.Table#fetch) method of the Data Manager table and then bind the fetched view to the tablesheet using the [setDataView](/spreadjs/api/v17/classes/GC.Spread.Sheets.TableSheet.TableSheet#setDataView) method.
    
    The fetch method can be performed on table and view to return their respective data.
    
    ```javascript
    //bind a view to the tablesheet
    myTable.fetch().then(function () {
        var view = myTable.addView("myView");
        sheet.setDataView(view);
    });
    ```