Fork me on GitHub

Handsontable

a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery

Array and object data sources

This page shows how to use Handsontable with various data sources:

Please take note that Handsontable will change the original data source. More about this here: Understanding binding as reference.

Array data source

Most of the people use array of arrays data source with Handsontable.

Edit in jsFiddle

Array data source (with hidden columns)

Let's say, you want the same data source, but without the Kia column.

Edit in jsFiddle

Object data source

With version 0.7.0, comes possibility to use array of objects data source.

Edit in jsFiddle

Nested object data source (with column mapping)

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.

Edit in jsFiddle

Automatic and 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:

Edit in jsFiddle

For more examples, head back to the main page.

Handsontable © 2012 Marcin Warpechowski and contributors.
Code and documentation licensed under the The MIT License.