SpreadJS 15
Features / TableSheet / Create TableSheet
In This Topic
    Create TableSheet
    In This Topic

    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.

     

    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 method.
      JavaScript
      Copy Code
      //init a table sheet
      var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
      

    2. Initialize the data manager using the DataManager method.
      JavaScript
      Copy Code
      //init a data manager
      var dataManager = spread.dataManager();
      

    3. Add a table in the Data Manager using the addTable method. This method accepts the table name as 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.

      You can know more about the data operations in the "Data Operations" topic.

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

    4. Add a view to the table of the Data Manager using the addView method and define column info.

      By default, the view has all default columns. Refer to TableSheet Views to know more about column properties and other view options.

      JavaScript
      Copy Code
      var view = myTable.addView("myView"); //the View has all default columns of the Table
      

    5. Fetch using the fetch method of the Data Manager table and then bind the fetched view to the tablesheet using the setDataView method.

      The fetch method can be performed on table and view to return their respective data.

      JavaScript
      Copy Code
      //bind a view to the table sheet
      myTable.fetch().then(function () {
          var view = myTable.addView("myView");
          sheet.setDataView(view);
      });