---
title: Data Binding
page_title: Data Binding - Spreadsheet - Kendo UI for React
description: "Bind the Kendo UI Spreadsheet wrapper for React to local data arrays or remote data services."
slug: databinding_spreadsheet
position: 1
---
# Data Binding
The Spreadsheet provides support for binding it to local data arrays and remote data services.
* [Binding to Local Data Arrays](#toc-binding-to-local-data-arrays), or
* [Binding to Remote Data Services](#toc-binding-to-remote-data-services).
## Binding to Local Data Arrays
The Spreadsheet enables you to pass an array with predefined rows and cells.
The following example demonstrates how to initialize the Spreadsheet and bind it to a local data array. The cells data is passed to the Spreadsheet by using its [`sheets`](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#configuration-sheets), [`rows`](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#configuration-sheets.rows) and [`cells`](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#configuration-sheets.rows.cells) properties.
{% meta height:650 %}
```jsx-preview
class SpreadsheetContainer extends React.Component {
constructor(props) {
super(props);
this.sheets = [
{
name: "Food Order",
mergedCells: [
"A1:G1",
"C15:E15"
],
rows: [
{
height: 70,
cells: [
{
index: 0, value: "Invoice #52 - 06/23/2015", fontSize: 32, background: "rgb(96,181,255)",
textAlign: "center", color: "white"
}
]
},
{
height: 25,
cells: [
{
value: "ID", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
},
{
value: "Product", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
},
{
value: "Quantity", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
},
{
value: "Price", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
},
{
value: "Tax", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
},
{
value: "Amount", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
},
{
background: "rgb(167,214,255)", color: "rgb(0,62,117)"
}
]
},
{
cells: [
{
value: 216321, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: "Calzone", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: 1, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: 12.39, format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
formula: "C3*D3*0.2", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
formula: "C3*D3+E3", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
}
]
},
{
cells: [
{
value: 546897, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: "Margarita", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: 2, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: 8.79, format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
formula: "C4*D4*0.2", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
formula: "C4*D4+E4", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(229,243,255)", color: "rgb(0,62,117)"
}
]
},
{
cells: [
{
value: 456231, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: "Pollo Formaggio", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: 1, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: 13.99, format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
formula: "C5*D5*0.2", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
formula: "C5*D5+E5", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
}
]
},
{
cells: [
{
value: 455873, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: "Greek Salad", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: 1, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: 9.49, format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
formula: "C6*D6*0.2", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
formula: "C6*D6+E6", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(229,243,255)", color: "rgb(0,62,117)"
}
]
},
{
cells: [
{
value: 456892, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: "Spinach and Blue Cheese", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: 3, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: 11.49, format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
formula: "C7*D7*0.2", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
formula: "C7*D7+E7", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
}
]
},
{
cells: [
{
value: 546564, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: "Rigoletto", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: 1, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: 10.99, format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
formula: "C8*D8*0.2", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
formula: "C8*D8+E8", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(229,243,255)", color: "rgb(0,62,117)"
}
]
},
{
cells: [
{
value: 789455, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: "Creme Brulee", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: 5, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: 6.99, format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
formula: "C9*D9*0.2", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
formula: "C9*D9+E9", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
}
]
},
{
cells: [
{
value: 123002, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: "Radeberger Beer", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: 4, textAlign: "center", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
value: 4.99, format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
formula: "C10*D10*0.2", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
formula: "C10*D10+E10", format: "$#,##0.00", background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(229,243,255)", color: "rgb(0,62,117)"
}
]
},
{
cells: [
{
value: 564896, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: "Budweiser Beer", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: 3, textAlign: "center", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
value: 4.49, format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
formula: "C11*D11*0.2", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
formula: "C11*D11+E11", format: "$#,##0.00", background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
}
]
},
{
index: 11,
cells: [
{
background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(229,243,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(229,243,255)", color: "rgb(0,62,117)"
}
]
},
{
index: 12,
cells: [
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(255,255,255)", color: "rgb(0,62,117)"
}
]
},
{
height: 25,
index: 13,
cells: [
{
background: "rgb(193,226,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(193,226,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(193,226,255)", color: "rgb(0,62,117)"
},
{
background: "rgb(193,226,255)", color: "rgb(0,62,117)"
},
{
value: "Tip:", background: "rgb(193,226,255)", color: "rgb(0,62,117)", textAlign: "right", verticalAlign: "bottom"
},
{
formula: "SUM(F3:F11)*0.1", background: "rgb(193,226,255)", color: "rgb(0,62,117)", format: "$#,##0.00", bold: "true", verticalAlign: "bottom"
},
{
background: "rgb(193,226,255)", color: "rgb(0,62,117)"
}
]
},
{
height: 50,
index: 14,
cells: [
{
index: 0, background: "rgb(193,226,255)", color: "rgb(0,62,117)",
},
{
index: 1, background: "rgb(193,226,255)", color: "rgb(0,62,117)",
},
{
index: 2, fontSize: 20, value: "Total Amount:",
background: "rgb(193,226,255)", color: "rgb(0,62,117)", textAlign: "right"
},
{
index: 5, fontSize: 20, formula: "SUM(F3:F14)", background: "rgb(193,226,255)", color: "rgb(0,62,117)",
format: "$#,##0.00", bold: "true"
},
{
index: 6, background: "rgb(193,226,255)", color: "rgb(0,62,117)"
}
]
}
],
columns: [
{
width: 100
},
{
width: 215
},
{
width: 115
},
{
width: 115
},
{
width: 115
},
{
width: 155
}
]
}
]
}
componentDidMount() {
window.JSZip = jszip.default
}
render() {
return (
);
}
}
ReactDOM.render(
,
document.querySelector('my-app')
);
```
{% endmeta %}
## Binding to Remote Data Services
The Spreadsheet enables you to bind its individual sheets to a Data Source instance. This approach allows you to quickly bring data from external data sources into the Spreadsheet and, optionally, edit it.
The Data Source binding switches the sheet to a special data-bound mode which differs from the standard behavior in the following ways:
* Column headers are inferred from the data item fields. To configure the column headers and the order, use the [`setDataSource`](https://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/sheet#methods-setDataSource) method of the sheet.
* Cell styles, formulas, and formats are not persisted in the data source.
* Row height and column width are not persisted in the data source.
* Sorting and filtering are applied locally.
CRUD operations are also handled in the following specific way:
* Regardless of the actual row index, inserted rows are always appended at the end.
* Updating cell content translates into update operations.
* Deleting rows translates into destroy operations.
* Inserting and removing columns is not supported.
The following example demonstrates how to use the Spreadsheet with a Data Source:
```jsx
class SpreadsheetContainer extends React.Component {
constructor(props) {
super(props);
this.dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/Products/Update",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/Products/Destroy",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number" }
}
}
}
});
this.sheets = [{
name: "Products",
dataSource: this.dataSource,
rows: [{
height: 40,
cells: [
{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
},{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
},{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
},{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
},{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
}]
}],
columns: [
{ width: 100 },
{ width: 415 },
{ width: 145 },
{ width: 145 },
{ width: 145 }
]
}]
}
render() {
return (
);
}
}
ReactDOM.render(
,
document.querySelector('my-app')
);
```
## Known Issues
* Records cannot be edited after sorting the sheet.
* The data of the DataSource to which the Spreadsheet will be bound has to contain data items. Binding the component to a DataSource with empty data leads to undesired side effects.
## Suggested Links
* [Kendo UI Spreadsheet for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/overview)
* [API Reference of the Spreadsheet Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet)