This page covers a non-latest version of Handsontable.
# Binding to data
The following guide provides information on using a data source and manipulating how the data is displayed in the data grid.
# Array of arrays
Array of arrays is the most popular choice for the more grid-like scenarios where you need to provide the end-user with permission to manipulate the grid, e.g., insert columns, delete rows, decorate cells, etc.
# Array of arrays with a selective display of columns
The following example shows how you would use the array of arrays with a selective display of columns. This scenario uses the same data source as in the previous example, this time omitting the Tesla column from the grid.
# Array of objects
An array of objects can be used as a data source as follows:
# Array of objects with column as a function
It is possible to define columns as a function. This is good practice when you want to bind data more dynamically.
# Array of objects with column mapping
In a scenario where you have nested objects, you can use them as the data source by mapping the columns using the columns option.
# Array of objects with custom data schema
When using object data binding, Handsontable needs to know what data structure to create when adding 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 a scenario where you start with an empty data source, you will need to provide the dataSchema option containing the data structure for any new row added to the grid. The example below shows a custom data schema with an empty data source:
# Function data source and schema
If your dataSchema is a constructor of an object that doesn't directly expose its members, you can specify functions for the data member of each columns item.
The example below shows how to use such objects:
# Understand binding as a reference
Note: Handsontable initializes the source data for the table using a reference, but you shouldn't rely on it. For example, you shouldn't change values in the source data using the reference to the input dataset. Some mechanisms for handling data aren't prepared for external changes that are made in this way.
To avoid this scenario, copy the data before you pass it to the grid. To change the data from outside Handsontable, you can use our API methods. For example, a change being made will be displayed immediately on the screen after calling setDataAtCell method.
# Working with a copy of data
When working with a copy of data for Handsontable, it is best practice is to clone the data source before loading it into Handsontable. This can be done with
JSON.parse(JSON.stringify(data)) or another deep-cloning function.