[{"id":"dc3147d7-d3fb-4bc1-b1b3-142c0633e6d3","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ca5ca1be-6d75-4ad1-880e-1589e3d52695","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ea870089-5ea1-499a-bb0c-29cf378ead8d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"d304d34f-f329-4f3b-b45e-2acb478427f8","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"3a79d24d-b853-4a51-a1e4-361feab06c57","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"5d31b3db-69bb-4388-9a57-450a63e44456","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"95e6d892-7bcd-4f6a-a152-504dec37c741","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ec137f4b-3069-487f-bb0c-69f40fe6805d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"9a2b2f20-5f3d-43a4-90d0-6f517fd3eebc","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"8d43dc09-ddd1-4c42-8b02-90765c4c705b","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"a0c3d1e1-4a95-4eaf-808e-93242f2f9aee","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"bd44c5b0-cd6b-443c-95dc-b8d8054fe1d7","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"fd5ccaa1-50b7-4c33-9ec5-c1eb48317119","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"ea61139a-0ecf-45ba-83c3-c2f8b20a4126","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ca986d5e-dfda-46e9-84f3-f44e4248ab94","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]}]
        
(Showing Draft Content)

Data Binding

The following section describes detailed steps to load data from a data source into a table.


You can add the script from the steps below to the HTML page created in Quick Start.

Step 1: Create Sample Data for Data Source

Create  createSampleData function which contains a student's report card data.

//1:- create createSampleData()
function createSampleData() {
    // Create sample report card data
data
    return [
        {
            Course: "Calculus",
            Term: 1,
            Credit: 5,
            Score: 80,
            Teacher: "Nancy.Feehafer",
        },
        {
            Course: "P.E.",
            Term: 1,
            Credit: 3.5,
            Score: 85,
            Teacher: "Andrew.Cencini",
        },
        {
            Course: "Political Economics",
            Term: 1,
            Credit: 3.5,
            Score: 95,
            Teacher: "Jan.Kotas",
        },
        {
            Course: "Basic of Computer",
            Term: 1,
            Credit: 2,
            Score: 85,
            Teacher: "Steven.Thorpe",
        },
        {
            Course: "Micro-Economics",
            Term: 1,
            Credit: 4,
            Score: 62,
            Teacher: "Jan.Kotas",
        },
        {
            Course: "Linear Algebra",
            Term: 2,
            Credit: 5,
            Score: 73,
            Teacher: "Nancy.Feehafer",
        },
        {
            Course: "Accounting",
            Term: 2,
            Credit: 3.5,
            Score: 86,
            Teacher: "Nancy.Feehafer",
        },
        {
            Course: "Statistics",
            Term: 2,
            Credit: 5,
            Score: 85,
            Teacher: "Robert.Zare",
        },
        {
            Course: "Marketing",
            Term: 2,
            Credit: 4,
            Score: 70,
            Teacher: "Laura.Giussani",
        },
    ];
}

Step 2: Add Table with Specified Data Source

  1. Create loadTable function and invoke suspendPaint and resumePaint methods (following best practices) and get the active spreadsheet.

     //2.1: Create table with data from a data source
           function loadTable(ss, data) {
        //suspend paint to repaint all changes at once as best practice
           ss.suspendPaint;
           try {
            //Get the active spreadsheet
            var sheet = ss.getActiveSheet;
              } catch (e) {
            alert(e.message);
           }
          //Resume paint to repaint entire spread instance with all changes at once
          ss.resumePaint;
        }
  2. Use addFromDataSource method within the loadTable function to add a range table with specified data source to the active sheet.

    //2.1: Create table with data from a data source
        function loadTable(ss, data) {
          ss.suspendPaint;
          try {
            var sheet = ss.getActiveSheet;
            //2.2: Add a range table with the specified data source
            var table = sheet.tables.addFromDataSource(
              "Table1",
              0,
              0,
              data,
              GC.Spread.Sheets.Tables.TableThemes.medium2
            );
           } catch (e) {
            alert(e.message);
          }
          ss.resumePaint;
        }

Step 3: Set Table Style

  1. Modify table style by setting highlightFirstColumn and showHeader methods to True.

  2. Set column width by using setColumnWidth method.

    //2: Create table with data from a data source
    //3: Set table styles
        function loadTable(ss, data) {
          //suspend paint to repaint all changes at once as best practice
          ss.suspendPaint();
          try {
            //Get the active spreadsheet
            var sheet = ss.getActiveSheet();
    
            //Add a range table with the specified data source      
            var table = sheet.tables.addFromDataSource(
              "Table1",
              0,
              0,
              data,
              GC.Spread.Sheets.Tables.TableThemes.medium2
            );
            // 3.1) Show header
            table.showHeader(true);
    
            // 3.1) Highlight first column
            table.highlightFirstColumn(true);
    
            // 3.2) Set column widths
            sheet.setColumnWidth(0, 130);
            sheet.setColumnWidth(1, 130);
            sheet.setColumnWidth(2, 70);
            sheet.setColumnWidth(3, 70);
            sheet.setColumnWidth(4, 100);
            sheet.setColumnWidth(5, 260);
    
          } catch (e) {
            alert(e.message);
          }
          //Resume paint to repaint entire spread instance with all changes at once
          ss.resumePaint();
        }

Step 4: Refresh SpreadJS Instance

  1. Create refresh function to refresh the SpreadJS instance and remove the changes that are made using the reset method. This function also the loads the sample data and adds a table using loadTable(ss, data) function.

    //4:- Create refresh function
    function refresh() {
        var ss = GC.Spread.Sheets.findControl(document.getElementById("ss"));
        // Get activesheet
        var sheet = ss.getActiveSheet();
        // Reset the sheet and set the column count
        sheet.reset();
        sheet.setColumnCount(7);
        // Load the table to the Spread instance using the sample data
        var data = createSampleData();
        loadTable(ss, data);
    }
  2. Invoke the refresh function while initializing the spread component.

    $(document).ready(function () {
        // initializing Spread
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        // invoke the refresh function
        refresh();
    });

The output of above code will look like below: