This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# Binding to data

# Overview

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

                Handsontable binds to your data source by reference, not by values. We don't copy the input dataset, and we rely on JavaScript to handle the objects. Any data entered into the grid will alter the original data source.

                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.