---
type: tutorial
title: Binding to data
metaTitle: Binding to data - JavaScript Data Grid | Handsontable
description: Use Handsontable's configuration options or API methods to fill your data grid with various data structures, including an array of arrays or an array of objects.
permalink: /binding-to-data
canonicalUrl: /binding-to-data
tags:
  - data binding
  - data connect
  - data sources
react:
  metaTitle: Binding to data - React Data Grid | Handsontable
angular:
  metaTitle: Binding to data - Angular Data Grid | Handsontable
vue:
  metaTitle: Binding to data - Vue Data Grid | Handsontable
searchCategory: Guides
category: Getting started
---
Fill your data grid with various data structures, including an array of arrays or an array of objects.

[[toc]]

## 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.

::: only-for javascript

::: example #example1 --js 1 --ts 2

@[code collapse={9-14}](@/content/guides/getting-started/binding-to-data/javascript/example1.js)
@[code collapse={9-14}](@/content/guides/getting-started/binding-to-data/javascript/example1.ts)

:::

:::

::: only-for react

::: example #example1 :react --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/react/example1.jsx)
@[code](@/content/guides/getting-started/binding-to-data/react/example1.tsx)

:::

<!--  -->
[//]: # (The empty HTML comment above is a workaround for the `example` container error.)
[//]: # (DON'T REMOVE IT!)

:::

::: only-for angular

::: example #example1 :angular --ts 1 --html 2

@[code](@/content/guides/getting-started/binding-to-data/angular/example1.ts)
@[code](@/content/guides/getting-started/binding-to-data/angular/example1.html)

:::

:::

::: only-for vue

::: example #example1 :vue --js 1

@[code](@/content/guides/getting-started/binding-to-data/vue/example1.vue)

:::

:::

### 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.

::: only-for javascript

::: example #example2 --js 1 --ts 2

@[code collapse={9-14}](@/content/guides/getting-started/binding-to-data/javascript/example2.js)
@[code collapse={9-14}](@/content/guides/getting-started/binding-to-data/javascript/example2.ts)

:::

:::

::: only-for react

::: example #example2 :react --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/react/example2.jsx)
@[code](@/content/guides/getting-started/binding-to-data/react/example2.tsx)

:::

:::

::: only-for angular

::: example #example2 :angular --ts 1 --html 2

@[code](@/content/guides/getting-started/binding-to-data/angular/example2.ts)
@[code](@/content/guides/getting-started/binding-to-data/angular/example2.html)

:::

:::

::: only-for vue

::: example #example2 :vue --js 1

@[code](@/content/guides/getting-started/binding-to-data/vue/example2.vue)

:::

:::

### Array of objects

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

::: only-for javascript

::: example #example3 --js 1 --ts 2

@[code collapse={9-13}](@/content/guides/getting-started/binding-to-data/javascript/example3.js)
@[code collapse={16-20}](@/content/guides/getting-started/binding-to-data/javascript/example3.ts)

:::

:::

::: only-for react

::: example #example3 :react --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/react/example3.jsx)
@[code](@/content/guides/getting-started/binding-to-data/react/example3.tsx)

:::

:::

::: only-for angular

::: example #example3 :angular --ts 1 --html 2

@[code](@/content/guides/getting-started/binding-to-data/angular/example3.ts)
@[code](@/content/guides/getting-started/binding-to-data/angular/example3.html)

:::

:::

::: only-for vue

::: example #example3 :vue --js 1

@[code](@/content/guides/getting-started/binding-to-data/vue/example3.vue)

:::

:::

### Array of objects with column as a function

You can set the [`columns`](@/api/options.md#columns) configuration option to a function. This is good practice when you want to bind data more dynamically.

::: only-for javascript

::: example #example4 .custom-class --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/javascript/example4.js)
@[code](@/content/guides/getting-started/binding-to-data/javascript/example4.ts)

:::

:::

::: only-for react

::: example #example4 .custom-class :react --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/react/example4.jsx)
@[code](@/content/guides/getting-started/binding-to-data/react/example4.tsx)

:::

:::

::: only-for angular

::: example #example4 :angular --ts 1 --html 2

@[code](@/content/guides/getting-started/binding-to-data/angular/example4.ts)
@[code](@/content/guides/getting-started/binding-to-data/angular/example4.html)

:::

:::

::: only-for vue

::: example #example4 .custom-class :vue --js 1

@[code](@/content/guides/getting-started/binding-to-data/vue/example4.vue)

:::

:::

### 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`](@/api/options.md#columns) option.

::: only-for javascript

::: example #example5 --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/javascript/example5.js)
@[code](@/content/guides/getting-started/binding-to-data/javascript/example5.ts)

:::

:::

::: only-for react

::: example #example5 :react --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/react/example5.jsx)
@[code](@/content/guides/getting-started/binding-to-data/react/example5.tsx)

:::

:::

::: only-for angular

::: example #example5 :angular --ts 1 --html 2

@[code](@/content/guides/getting-started/binding-to-data/angular/example5.ts)
@[code](@/content/guides/getting-started/binding-to-data/angular/example5.html)

:::

:::

::: only-for vue

::: example #example5 :vue --js 1

@[code](@/content/guides/getting-started/binding-to-data/vue/example5.vue)

:::

:::

### 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`](@/api/options.md#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:

::: only-for javascript

::: example #example6 --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/javascript/example6.js)
@[code](@/content/guides/getting-started/binding-to-data/javascript/example6.ts)

:::

:::

::: only-for react

::: example #example6 :react --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/react/example6.jsx)
@[code](@/content/guides/getting-started/binding-to-data/react/example6.tsx)

:::

:::

::: only-for angular

::: example #example6 :angular --ts 1 --html 2

@[code](@/content/guides/getting-started/binding-to-data/angular/example6.ts)
@[code](@/content/guides/getting-started/binding-to-data/angular/example6.html)

:::

:::

::: only-for vue

::: example #example6 :vue --js 1

@[code](@/content/guides/getting-started/binding-to-data/vue/example6.vue)

:::

:::

### Function data source and schema

If your [`dataSchema`](@/api/options.md#dataschema) is a constructor of an object that doesn't directly expose its members, you can specify functions for the [`data`](@/api/options.md#data) member of each [`columns`](@/api/options.md#columns) item.

The example below shows how to use such objects:

::: only-for javascript

::: example #example7 --js 1 --ts 2

@[code collapse={11-15}](@/content/guides/getting-started/binding-to-data/javascript/example7.js)
@[code collapse={18-22}](@/content/guides/getting-started/binding-to-data/javascript/example7.ts)

:::

:::

::: only-for react

::: example #example7 :react --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/react/example7.jsx)
@[code](@/content/guides/getting-started/binding-to-data/react/example7.tsx)

:::

:::

::: only-for angular

::: example #example7 :angular --ts 1 --html 2

@[code](@/content/guides/getting-started/binding-to-data/angular/example7.ts)
@[code](@/content/guides/getting-started/binding-to-data/angular/example7.html)

:::

:::

::: only-for vue

::: example #example7 :vue --js 1

@[code](@/content/guides/getting-started/binding-to-data/vue/example7.vue)

:::

:::

### No data

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

::: only-for javascript

::: example #example9 --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/javascript/example9.js)
@[code](@/content/guides/getting-started/binding-to-data/javascript/example9.ts)

:::

:::

::: only-for react

::: example #example9 :react --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/react/example9.jsx)
@[code](@/content/guides/getting-started/binding-to-data/react/example9.tsx)

:::

:::

::: only-for angular

::: example #example9 :angular --ts 1 --html 2

@[code](@/content/guides/getting-started/binding-to-data/angular/example9.ts)
@[code](@/content/guides/getting-started/binding-to-data/angular/example9.html)

:::

:::

::: only-for vue

::: example #example9 :vue --js 1

@[code](@/content/guides/getting-started/binding-to-data/vue/example9.vue)

:::

:::

To change the number of rows or columns rendered by default, use the [`startRows`](@/api/options.md#startrows) and [`startCols`](@/api/options.md#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()`](@/api/core.md#setdataatcell) method.

::: only-for javascript

::: example #example10 --js 1 --ts 2

@[code collapse={9-14}](@/content/guides/getting-started/binding-to-data/javascript/example10.js)
@[code collapse={9-14}](@/content/guides/getting-started/binding-to-data/javascript/example10.ts)

:::

:::

::: only-for react

::: example #example10 :react --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/react/example10.jsx)
@[code](@/content/guides/getting-started/binding-to-data/react/example10.tsx)

:::

:::

::: only-for angular

::: example #example10 :angular --ts 1 --html 2

@[code](@/content/guides/getting-started/binding-to-data/angular/example10.ts)
@[code](@/content/guides/getting-started/binding-to-data/angular/example10.html)

:::

:::

::: only-for vue

::: example #example10 :vue --js 1

@[code](@/content/guides/getting-started/binding-to-data/vue/example10.vue)

:::

:::

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

### The [`data`](@/api/options.md#data) configuration option

::: only-for javascript

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`](@/api/options.md#data) option in the initial config object:

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

:::

::: only-for react

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 by passing your data array as the value of `HotTable`'s [`data`](@/api/options.md#data) prop:

```jsx
<HotTable data={newDataset} />
```

:::

::: only-for angular
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 by passing your data array as the value of `HotTable`'s [`data`](@/api/options.md#data) `@Input()`:

```ts
import { GridSettings } from "@handsontable/angular-wrapper";

data = newDataset,
gridSettings: GridSettings = {};
```

```html
<hot-table [data]="data" [settings]="gridSettings" />
```

:::

::: only-for vue

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 by passing your data array inside the `hotSettings` ref bound to `HotTable`:

```vue
<script setup>
import { ref } from 'vue';
import { HotTable } from '@handsontable/vue3';

const hotSettings = ref({
  data: newDataset,
  // ... other config options
});
</script>

<template>
  <HotTable :settings="hotSettings" />
</template>
```

:::

### The data-loading API methods

::: only-for react

::: tip

To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by utilizing a reference
to the `HotTable` component, and reading its `hotInstance` property.

For more information, see the [Instance methods](@/guides/getting-started/react-methods/react-methods.md) page.
:::

:::

::: only-for angular

::: tip

To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by utilizing a reference
to the `HotTableComponent`, and reading its `hotInstance` property.

For more information, see the [Instance access](@/guides/getting-started/angular-hot-instance/angular-hot-instance.md) page.
:::

:::

::: only-for vue

::: tip

To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by adding a template `ref` to the `HotTable` component and reading its `hotInstance` property.

:::

:::

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

<ol class="sl-steps">
<li>

**[`loadData()`](@/api/core.md#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.

```js
hot.loadData(newDataset);
```

</li>
<li>

**[`updateData()`](@/api/core.md#updatedata)**

Replaces the data used in Handsontable with the dataset provided as the method argument. Unlike [`loadData()`](@/api/core.md#loaddata), [`updateData()`](@/api/core.md#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.

```js
hot.updateData(newDataset);
```

</li>
<li>

**[`updateSettings()`](@/api/core.md#updatesettings)**

Updates the configuration of the table, [`updateSettings()`](@/api/core.md#updatesettings) can be also used to replace the data being used. Since version `12.0.0`, under the hood it utilizes the [`updateData()`](@/api/core.md#updatedata) method to perform the data replacement (apart from the one automatic call done during the initialization, where it uses [`loadData()`](@/api/core.md#loaddata)).

```js
hot.updateSettings({
  data: newDataset,
  // ... other config options
});
```

</li>
</ol>

::: only-for angular

You can also use the built-in mechanism of the Angular wrapper to update data. When a change in the `@Input data` is detected by `ngOnChanges`, the wrapper will call `hot.updateData(newDataset);` with the data provided in the `@Input`.

:::

### 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:

<ol class="sl-steps">
<li>

**[`setDataAtCell()`](@/api/core.md#setdataatcell)**

Replaces data in a single cell or to perform a series of single-cell data replacements:

```js
// 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);
```

</li>
<li>

**[`setDataAtRowProp()`](@/api/core.md#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](#array-of-objects).

```js
// 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);
```

</li>
<li>

**[`setSourceDataAtCell()`](@/api/core.md#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()`](@/api/core.md#setsourcedataatcell) comes in handy. The `row` and `columns`/`prop` arguments represent the *physical* indexes.

```js
// 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);
```

</li>
<li>

**[`populateFromArray()`](@/api/core.md#populatefromarray)**

Replaces a chunk of the dataset by provided the start (and optionally end) coordinates and a two-dimensional data array of new values.

<aside class="starlight-aside starlight-aside--tip"><p class="starlight-aside__content">The <code>populateFromArray()</code> method can't change <a href="/docs/javascript-data-grid/disabled-cells/">read-only</a> cells.</p></aside>

```js
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);
```

</li>
</ol>

## 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 `structuredClone(data)` or legacy `JSON.parse(JSON.stringify(data))` or another deep-cloning function.

::: only-for javascript

::: example #example11 --js 1 --ts 2

@[code collapse={9-14}](@/content/guides/getting-started/binding-to-data/javascript/example11.js)
@[code collapse={9-14}](@/content/guides/getting-started/binding-to-data/javascript/example11.ts)

:::

:::

::: only-for react
::: example #example11 :react --js 1 --ts 2

@[code](@/content/guides/getting-started/binding-to-data/react/example11.jsx)
@[code](@/content/guides/getting-started/binding-to-data/react/example11.tsx)

:::

:::

::: only-for angular

::: example #example11 :angular --ts 1 --html 2

@[code](@/content/guides/getting-started/binding-to-data/angular/example11.ts)
@[code](@/content/guides/getting-started/binding-to-data/angular/example11.html)

:::

:::

::: only-for vue

::: example #example11 :vue --js 1

@[code](@/content/guides/getting-started/binding-to-data/vue/example11.vue)

:::

:::

## Server-side loading

When the full dataset lives on a server, use [`dataProvider`](@/api/options.md#dataprovider) instead of binding a large local array. See [Server-side data](@/guides/getting-started/server-side-data/server-side-data.md).

## Related API reference

**Configuration options**

<div class="boxes-list">

- [data](@/api/options.md#data)
- [dataProvider](@/api/options.md#dataprovider)
- [dataSchema](@/api/options.md#dataschema)

</div>

**Core methods**

<div class="boxes-list">

- [alter()](@/api/core.md#alter)
- [clear()](@/api/core.md#clear)
- [getData()](@/api/core.md#getdata)
- [getDataAtCell()](@/api/core.md#getdataatcell)
- [getDataAtCol()](@/api/core.md#getdataatcol)
- [getDataAtProp()](@/api/core.md#getdataatprop)
- [getDataAtRow()](@/api/core.md#getdataatrow)
- [getDataAtRowProp()](@/api/core.md#getdataatrowprop)
- [getSchema()](@/api/core.md#getschema)
- [getSourceData()](@/api/core.md#getsourcedata)
- [getSourceDataArray()](@/api/core.md#getsourcedataarray)
- [getSourceDataAtCell()](@/api/core.md#getsourcedataatcell)
- [getSourceDataAtCol()](@/api/core.md#getsourcedataatcol)
- [getSourceDataAtRow()](@/api/core.md#getsourcedataatrow)
- [loadData()](@/api/core.md#loaddata)
- [populateFromArray()](@/api/core.md#populatefromarray)
- [setDataAtCell()](@/api/core.md#setdataatcell)
- [setDataAtRowProp()](@/api/core.md#setdataatrowprop)
- [setSourceDataAtCell()](@/api/core.md#setsourcedataatcell)
- [updateData()](@/api/core.md#updatedata)
- [updateSettings()](@/api/core.md#updatesettings)

</div>

**Hooks**

<div class="boxes-list">

- [afterCellMetaReset](@/api/hooks.md#aftercellmetareset)
- [afterChange](@/api/hooks.md#afterchange)
- [afterLoadData](@/api/hooks.md#afterloaddata)
- [afterSetDataAtCell](@/api/hooks.md#aftersetdataatcell)
- [afterSetDataAtRowProp](@/api/hooks.md#aftersetdataatrowprop)
- [afterSetSourceDataAtCell](@/api/hooks.md#aftersetsourcedataatcell)
- [afterUpdateData](@/api/hooks.md#afterupdatedata)
- [afterUpdateSettings](@/api/hooks.md#afterupdatesettings)
- [beforeLoadData](@/api/hooks.md#beforeloaddata)
- [beforeUpdateData](@/api/hooks.md#beforeupdatedata)
- [modifyData](@/api/hooks.md#modifydata)
- [modifyRowData](@/api/hooks.md#modifyrowdata)
- [modifySourceData](@/api/hooks.md#modifysourcedata)

</div>

## What you learned

- Handsontable accepts three main data structures: arrays of arrays, arrays of objects, and function-based data sources.
- You can pass an initial dataset through the `data` option or via the `HotTable` component's props.
- Use `loadData()` to replace data and reset configuration, `updateData()` to replace data without resetting settings, and `updateSettings({ data })` to update data alongside other options.
- Handsontable binds to your data by reference. Copy the dataset before passing it in to avoid unintended mutations.
- For large datasets that live on a server, use `dataProvider` instead of a local array.

## Next steps

- [Configuration options](@/guides/getting-started/configuration-options/configuration-options.md) -- learn how to configure every aspect of your grid.
- [Saving data](@/guides/getting-started/saving-data/saving-data.md) -- persist changes to a backend or local storage.
