Data Import and Export

The KendoReact Spreadsheet allows you to store and load data in a native JSON format. You can also export and import .xlsx files directly in the component.

Binding to JSON data

You can pass the desired JSON data to the sheets of the defaultProps of the Spreadsheet.

The information that must persist when you pass an array to SheetDescriptor includes:

  • Cell formulas, values, formatting, and styling.
  • Row height and column width.
  • Active sheet and selection.

In the following sample, you can see a sample JSON data loaded in the Spreadsheet (the products.ts file) and examine the exact format expected by the component:

Example
View Source
Change Theme:

Using the JSON Serialization API

The Spreadsheet also exposes fromJSON and toJSON methods for loading and storing its state. To load the Spreadsheet with data, pass an object matching the required schema to fromJSON. This resets the component and clears all existing data.

The saveJSON method serializes the workbook. This method does not return the JSON, but a Promise object which will yield the JSON data when it is available. The method is functionally similar to toJSON, but it can also save the embedded images.

Example
View Source
Change Theme:

Export to Excel

The Spreadsheet utilizes the Excel Export component to produce Excel files directly in the browser.

The output files are in the OOXML Spreadsheet format with an .xlsx extension. The legacy XLS binary format is not supported.

The Spreadsheet allows you to export the current document to Excel both through its toolbar and by calling its saveAsExcel method for initiating the export programmatically. The exported file uses the name set to the excel SpreadsheetOption.

Example
View Source
Change Theme: