Can't find what you're looking for?

Contact us or post in our forums and we'll help you find an answer.

Add a table from a data source in pure JavaScript


To add a range table from a data source, utilize the addFromDataSource method and specify the row and column index and a data source.

Steps to Complete:

1. Initialize SpreadJS

2. Create sample data array

3. Add a table from data source

Getting Started:

Step 1: Initialize SpreadJS

Initialize SpreadJS using new GC.Spread.Sheets.Workbook and targeting an HTML DOM


Get the active sheet using getActiveSheet method.


Step 2: Create sample data array

For this example, we will add the following data array and store it in the variable dataArray.

{ Name: "Mike", Age: 23, Position: "Point Guard" },

{ Name: "Dave", Age: 22, Position: "Shoot Guard" },

{ Name: "Michael", Age: 21, Position: "Small Forward" },

{ Name: "Trey", Age: 22, Position: "Power Forward" },

{ Name: "Steve", Age: 21, Position: "Center" }

Here is an example:


Step 3: Add a table from data source

Add a range table from the data source using SpreadJS’s addFromDataSource method and store it in the variable called table.

Use the following parameters to create the table:

  • Table Name: table

  • row:0

  • col:0,

  • data source: dataArray

  • style: dark1

The final script tag should appear as so:



A table is now created from the data source dataArray and should appear with the dark1 table theme: