This page shows how to use Handsontable with various data sources:
- Array data source
- Array data source with a selective display of columns
- Object data source
- Object data source with column as a function
- Object data source with column mapping (nested)
- Object data source with custom data schema
- Function data source and schema
Please note that Handsontable will change the original data source.
Array data source
The most popular way of binding data with Handsontable is to use an array of arrays.
Array data source with a selective display of columns
Let's say, you want the same data source, but without the Tesla column:
Object data source
You can use an array of objects as a data source.
Object data source with column as a function
You can define columns as a function. That can be a good choice when you want to bind data more dynamically.
Object data source with column mapping (nested)
Some people have nested objects. They can also be used at the data source with a little bit of column mapping. The mapping is done using the columns option.
Object data source with custom data schema
When you use object data binding, Handsontable needs to know the data structure to create when you add a new row. If your data source contains at least one row, Handsontable will figure out the data structure based on the first row.
In case you want to start with an empty data source, you will need to provide the dataSchema option that contains the data structure for any new row added to the grid. The below example shows custom data schema with an empty data source:
Function data source and schema
If your dataSchema is actually a constructor of an object that doesn't directly expose its members, like a Backbone.js model, you can specify functions for the data member of each columns item.
The below example shows a small example of using such objects: