Binding to Datasource

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
    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: