@progress/kendo-spreadsheet-react-wrapper/docs/index.md

Kendo UI Spreadsheet wrapper for React

---
title: Overview
page_title: Spreadsheet Overview - Components - Kendo UI for React
description: "Get an overview of the features the Kendo UI Spreadsheet wrapper for React delivers and use the component in React projects."
slug: overview_spreadsheet
position: 0
---

# Spreadsheet Overview

The Spreadsheet enables you to edit and visualize tabular data by using cell formatting options, styles, and themes.

The Spreadsheet wrapper for React is a client-side wrapper for the [Kendo UI Spreadsheet](http://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet) widget.

## Basic Usage

The following example demonstrates the Spreadsheet in action.

{% meta height:650 %}
```jsx-preview
class SpreadsheetContainer extends React.Component {

    constructor(props) {
            super(props);
    }

    componentDidMount() {
        window.JSZip = jszip.default
    }

    render() {
        return (
            <div>
                <Spreadsheet/>
            </div>
        );
     }
    }
ReactDOM.render(
    <SpreadsheetContainer/>,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Installation

1. Download and install the package.

    ```sh
        npm install --save @progress/kendo-spreadsheet-react-wrapper
    ```

2. Once installed, import the Spreadsheet component from the package.

    ```sh
        import { Spreadsheet } from '@progress/kendo-spreadsheet-react-wrapper';
    ```

3. You are required to install one of the Kendo UI themes to style your components.

## Dependencies

The Spreadsheet package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

* @progress/kendo-ui

## Features and Functionalities

* [Data binding]({% slug databinding_spreadsheet %})
* [Import and export]({% slug import_and_export_spreadsheet %})
* [Cell formatting]({% slug cell_formatting_spreadsheet %})
* [Custom cell editors]({% slug custom_cell_editors_spreadsheet %})

## Events

The following example demonstrates basic Spreadsheet events. You can subscribe to [all Spreadsheet events](http://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#events) by the handler name.

```jsx
class SpreadsheetContainer extends React.Component {

    constructor(props) {
        super(props);
        this.onSelect = this.onSelect.bind(this);
        this.onChange = this.onChange.bind(this);
        this.onRender = this.onRender.bind(this);
    }

    onSelect = (e) => {
         console.log("event :: select");
         console.log(e);
    }

    onChange = (e) => {
         console.log("event :: change");
         console.log(e);
    }

    onRender= (e) => {
         console.log("event :: render");
         console.log(e);
    }

    componentDidMount() {
        window.JSZip = jszip.default
    }

    render() {
        return (
            <div>
                <Spreadsheet change={this.onChange}
                    select={this.onSelect}
                    render={this.onRender}/>
            </div>
        );
    }
}
ReactDOM.render(
    <SpreadsheetContainer/>,
    document.querySelector('my-app')
);
```

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