# Binding to Datasource

A walkthrough showing how to bind a SpreadJS table to a data source

## Content

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](/spreadjs/docs/v18/getstarted/quick-start).

## Step 1: Create Sample Data for Data Source

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

```javascript
//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](/spreadjs/docs/v18/BestPractices)) and get the active spreadsheet.

    ```javascript
     //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.

    ```javascript
    //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.

    ```javascript
    //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.

    ```javascript
    //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.

    ```javascript
    $(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:
![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/data-binding-spreadjs.PNG)