JavaScript Data GridBinding to data

Fill your data grid with various data structures, including an array of arrays or an array of objects.

Compatible data types

Array of arrays

Array of arrays is a good 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.

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example1');
const data = [
  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
  ['2017', 10, 11, 12, 13, 15, 16],
  ['2018', 10, 11, 12, 13, 15, 16],
  ['2019', 10, 11, 12, 13, 15, 16],
  ['2020', 10, 11, 12, 13, 15, 16],
  ['2021', 10, 11, 12, 13, 15, 16],
];

new Handsontable(container, {
  data,
  startRows: 5,
  startCols: 5,
  height: 'auto',
  width: 'auto',
  colHeaders: true,
  minSpareRows: 1,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

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.

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example2');
const data = [
  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
  ['2017', 10, 11, 12, 13, 15, 16],
  ['2018', 10, 11, 12, 13, 15, 16],
  ['2019', 10, 11, 12, 13, 15, 16],
  ['2020', 10, 11, 12, 13, 15, 16],
  ['2021', 10, 11, 12, 13, 15, 16],
];

new Handsontable(container, {
  data,
  colHeaders: true,
  minSpareRows: 1,
  height: 'auto',
  width: 'auto',
  columns: [
    { data: 0 },
    // skip the second column
    { data: 2 },
    { data: 3 },
    { data: 4 },
    { data: 5 },
    { data: 6 },
  ],
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

Array of objects

An array of objects can be used as a data source as follows:

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example3');
const data = [
  { id: 1, name: 'Ted Right', address: '' },
  { id: 2, name: 'Frank Honest', address: '' },
  { id: 3, name: 'Joan Well', address: '' },
  { id: 4, name: 'Gail Polite', address: '' },
  { id: 5, name: 'Michael Fair', address: '' },
];

new Handsontable(container, {
  data,
  colHeaders: true,
  height: 'auto',
  width: 'auto',
  minSpareRows: 1,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

Array of objects with column as a function

You can set the columns configuration option to a function. This is good practice when you want to bind data more dynamically.

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example4');
const data = [
  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },
  { id: 2, address: '' },
  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },
];

new Handsontable(container, {
  data,
  colHeaders: true,
  height: 'auto',
  width: 'auto',
  columns(column) {
    switch (column) {
      case 0:
        return { data: 'id' };
      case 1:
        return { data: 'name.first' };
      case 2:
        return { data: 'name.last' };
      case 3:
        return { data: 'address' };
      default:
        return {};
    }
  },
  minSpareRows: 1,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

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.

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example5');
const data = [
  { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },
  { id: 2, address: '' },
  { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },
];

new Handsontable(container, {
  data,
  colHeaders: true,
  height: 'auto',
  width: 'auto',
  columns: [
    { data: 'id' },
    { data: 'name.first' },
    { data: 'name.last' },
    { data: 'address' },
  ],
  minSpareRows: 1,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

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:

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example6');

new Handsontable(container, {
  data: [],
  dataSchema: { id: null, name: { first: null, last: null }, address: null },
  startRows: 5,
  startCols: 4,
  colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],
  height: 'auto',
  width: 'auto',
  columns: [
    { data: 'id' },
    { data: 'name.first' },
    { data: 'name.last' },
    { data: 'address' },
  ],
  minSpareRows: 1,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

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:

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example7');

new Handsontable(container, {
  data: [
    model({ id: 1, name: 'Ted Right', address: '' }),
    model({ id: 2, name: 'Frank Honest', address: '' }),
    model({ id: 3, name: 'Joan Well', address: '' }),
    model({ id: 4, name: 'Gail Polite', address: '' }),
    model({ id: 5, name: 'Michael Fair', address: '' }),
  ],
  dataSchema: model,
  height: 'auto',
  width: 'auto',
  colHeaders: ['ID', 'Name', 'Address'],
  columns: [
    { data: property('id') },
    { data: property('name') },
    { data: property('address') },
  ],
  minSpareRows: 1,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

function model(person) {
  const _pub = {
    id: undefined,
    name: undefined,
    address: undefined,
    attr: () => _pub,
  };

  const _priv = {};

  for (const prop in person) {
    if (person.hasOwnProperty(prop)) {
      _priv[prop] = person[prop];
    }
  }

  _pub.attr = (attr, val) => {
    if (typeof val === 'undefined') {
      window.console && console.log('GET the', attr, 'value of', _pub);

      return _priv[attr];
    }

    window.console && console.log('SET the', attr, 'value of', _pub);
    _priv[attr] = val;

    return _pub;
  };

  return _pub;
}

function property(attr) {
  return (row, value) => row.attr(attr, value);
}

No data

By default, if you don't provide any data, Handsontable renders as an empty 5x5 grid.

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example9');

new Handsontable(container, {
  autoWrapRow: true,
  autoWrapCol: true,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation',
});

To change the number of rows or columns rendered by default, use the startRows and startCols options.

Data-manipulating API methods

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.

TIP

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 the setDataAtCell() method.

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example10');
const data = [
  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
  ['2017', 10, 11, 12, 13, 15, 16],
  ['2018', 10, 11, 12, 13, 15, 16],
  ['2019', 10, 11, 12, 13, 15, 16],
  ['2020', 10, 11, 12, 13, 15, 16],
  ['2021', 10, 11, 12, 13, 15, 16],
];

const settings = {
  data,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
};

const hot = new Handsontable(container, settings);

hot.setDataAtCell(0, 1, 'Ford');

There are multiple ways you can insert your data into Handsontable. Let's go through the most useful ones:

The data configuration option

You will probably want to initialize the table with some data (if you don't, the table will render an empty 5x5 grid for you). The easiest way to do it is passing your data array as data option in the initial config object:

const hot = new Handsontable(container, {
  data: newDataset,
  // ... other config options
});

The data-loading API methods

To replace the entire data in an already-initialized Handsontable instance, you can use one of the data-loading API methods:

  • loadData()
    Replaces the data used in Handsontable with the dataset provided as the method argument.
    Note: Since version 12.0.0 this method causes the table to reset its configuration options and index mapper information, so some of the work done on the table since its initialization might be lost.
    hot.loadData(newDataset);
    
  • updateData()
    Replaces the data used in Handsontable with the dataset provided as the method argument. Unlike loadData(), updateData() does NOT reset the configuration options and/or index mapper information, so it can be safely used to replace just the data, leaving the rest of the table intact.
    hot.updateData(newDataset);
    
  • updateSettings()
    Updates the configuration of the table, updateSettings() can be also used to replace the data being used. Since version 12.0.0, under the hood it utilizes the updateData() method to perform the data replacement (apart from the one automatic call done during the initialization, where it uses loadData()).
    hot.updateSettings({
      data: newDataset,
      // ... other config options
    });
    

The data-modifying API methods

To modify just a subset of data passed to Handsontable, these are the methods you might want to check out:

  • setDataAtCell()
    Replaces data in a single cell or to perform a series of single-cell data replacements:

    // Replaces the cell contents at the (0, 2) visual coordinates (0 being the visual row index, 2 - the visual column index) with the supplied value.
    hot.setDataAtCell(0, 2, 'New Value');
    
    // Replaces the cells at `(0,2)`, `(1,2)` and `(2,2)` with the provided values.
    const changes = [
      [0, 2, 'New Value'],
      [1, 2, 'Different Value'],
      [2, 2, 'Third Replaced Value'],
    ];
    hot.setDataAtCell(changes);
    
  • setDataAtRowProp()
    Replaces data in a single cell or to perform a series of single-cell data replacements, analogously to setDataAtCell(), but allows targeting the cells by the visual row index and data row property. Useful for the Array of objects data type.

    // Replaces the cell contents at the (0, 'title') coordinates (0 being the visual row index, 'title' - the data row object property) with the supplied value.
    hot.setDataAtRowProp(0, 'title', 'New Value');
    
    // Replaces the cells with the props of 'id', 'firstName' and 'lastName' in the first row with the provided values.
    const changes = [
      [0, 'id', '22'],
      [0, 'firstName', 'John'],
      [0, 'lastName', 'Doe'],
    ];
    hot.setDataAtRowProp(changes);
    
  • setSourceDataAtCell()
    As the displayed data coordinates can differ from the way it's stored internally, sometimes you might need to target the cells more directly - that's when setSourceDataAtCell() comes in handy. The row and columns/prop arguments represent the physical indexes.

    // Replaces the cell contents at the (0, 2) coordinates (0 being the physical row index, 2 - the physical column index) with the supplied value.
    hot.setSourceDataAtCell(0, 2, 'New Value');
    
    // Replaces the cell contents at the (0, 'title') coordinates (0 being the physical row index, 'title' - the data row property) with the supplied value.
    hot.setSourceDataAtCell(0, 'title', 'New Value');
    
    // Replaces the cells with the props of 'id', 'firstName' and 'lastName' in the first physical row with the provided values.
    const changes = [
      [0, 'id', '22'],
      [0, 'firstName', 'John'],
      [0, 'lastName', 'Doe'],
    ];
    hot.setSourceDataAtCell(changes);
    
  • populateFromArray()
    Replaces a chunk of the dataset by provided the start (and optionally end) coordinates and a two-dimensional data array of new values.

    TIP

    The populateFromArray() method can't change read-only cells.

    const newValues = [
      ['A', 'B', 'C'],
      ['D', 'E', 'F']
    ];
    
    // Replaces the values from (1, 1) to (2, 3) visual cell coordinates with the values from the `newValues` array.
    hot.populateFromArray(1, 1, newValues);
    
    // Replaces the values from (1, 1) to (2, 2) visual cell coordinates with the values from the `newValues` array, ommiting the values that would fall outside of the defined range.
    hot.populateFromArray(1, 1, newValues, 2, 2);
    

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.

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example11');
const data = [
  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
  ['2017', 10, 11, 12, 13, 15, 16],
  ['2018', 10, 11, 12, 13, 15, 16],
  ['2019', 10, 11, 12, 13, 15, 16],
  ['2020', 10, 11, 12, 13, 15, 16],
  ['2021', 10, 11, 12, 13, 15, 16],
];

new Handsontable(container, {
  data: JSON.parse(JSON.stringify(data)),
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

There is a newer version of Handsontable available. Switch to the latest version ⟶