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

# Grid Overview

The Kendo UI Grid wrapper for React displays data in a tabular format and provides a full spectrum of configuration options.

It supports the implementation of data operations and can be bound to local or remote data.

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

## Basic Usage

The following example demonstrates the Grid in action.

{% meta height:380 %}
```jsx-preview
class GridContainer extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
                products: [
                    { ProductID: 1,ProductName: "Chai",SupplierID: 1,CategoryID: 1,QuantityPerUnit: "10 boxes x 20 bags",UnitPrice: 18.0000,UnitsInStock: 39,UnitsOnOrder: 0,ReorderLevel: 10,Discontinued: false,Category: { CategoryID: 1,CategoryName: "Beverages",Description: "Soft drinks, coffees, teas, beers, and ales"}},
                    { ProductID: 2,ProductName: "Chang",SupplierID: 1,CategoryID: 1,QuantityPerUnit: "24 - 12 oz bottles",UnitPrice: 19.0000,UnitsInStock: 17,UnitsOnOrder: 40,ReorderLevel: 25,Discontinued: false,Category: {CategoryID: 1,CategoryName: "Beverages",Description: "Soft drinks, coffees, teas, beers, and ales"}},
                    {ProductID: 3,ProductName: "Aniseed Syrup",SupplierID: 1,CategoryID: 2,QuantityPerUnit: "12 - 550 ml bottles",UnitPrice: 10.0000,UnitsInStock: 13,UnitsOnOrder: 35,ReorderLevel: 25,Discontinued: false,Category: {CategoryID: 2,CategoryName: "Condiments",Description: "Sweet and savory sauces, relishes, spreads, and seasonings"}},
                    {ProductID: 4,ProductName: "Chef Anton's Cajun Seasoning",SupplierID: 2,CategoryID: 2,QuantityPerUnit: "48 - 6 oz jars",UnitPrice: 22.0000,UnitsInStock: 53,UnitsOnOrder: 0,ReorderLevel: 0,Discontinued: false,Category: {CategoryID: 2,CategoryName: "Condiments",Description: "Sweet and savory sauces, relishes, spreads,  seasonings"}},
                    {ProductID: 5,ProductName: "Chef Anton's Gumbo Mix",SupplierID: 2,CategoryID: 2,QuantityPerUnit: "36 boxes",UnitPrice: 21.3500,UnitsInStock: 0,UnitsOnOrder: 0,ReorderLevel: 0,Discontinued: true,Category: {CategoryID: 2,CategoryName: "Condiments",Description: "Sweet and savory sauces, relishes, spreads, and seasonings"}},
                    {ProductID: 6,ProductName: "Grandma's Boysenberry Spread",SupplierID: 3,CategoryID: 2,QuantityPerUnit: "12 - 8 oz jars",UnitPrice: 25.0000,UnitsInStock: 120,UnitsOnOrder: 0,ReorderLevel: 25,Discontinued: false,Category: {CategoryID: 2,CategoryName: "Condiments",Description: "Sweet and savory sauces, relishes, spreads, seasonings"}},
                    {ProductID: 7,ProductName: "Uncle Bob's Organic Dried Pears",SupplierID: 3,CategoryID: 7,QuantityPerUnit: "12 - 1 lb pkgs.",UnitPrice: 30.0000,UnitsInStock: 15,UnitsOnOrder: 0,ReorderLevel: 10,Discontinued: false,Category: {CategoryID: 7,CategoryName: "Produce",Description: "Dried fruit and bean curd"}},
                    {ProductID: 8,ProductName: "Northwoods Cranberry Sauce",SupplierID: 3,CategoryID: 2,QuantityPerUnit: "12 - 12 oz jars",UnitPrice: 40.0000,UnitsInStock: 6,UnitsOnOrder: 0,ReorderLevel: 0,Discontinued: false,Category: {CategoryID: 2,CategoryName: "Condiments",Description: "Sweet and savory sauces, relishes, spreads,  seasonings"}},
                    {ProductID: 9,ProductName: "Mishi Kobe Niku",SupplierID: 4,CategoryID: 6,QuantityPerUnit: "18 - 500 g pkgs.",UnitPrice: 97.0000,UnitsInStock: 29,UnitsOnOrder: 0,ReorderLevel: 0,Discontinued: true,Category: {CategoryID: 6,CategoryName: "Meat/Poultry",Description: "Prepared meats"}},
                    {ProductID: 10,ProductName: "Ikura",SupplierID: 4,CategoryID: 8,QuantityPerUnit: "12 - 200 ml jars",UnitPrice: 31.0000,UnitsInStock: 31,UnitsOnOrder: 0,ReorderLevel: 0,Discontinued: false,Category: {CategoryID: 8,CategoryName: "Seafood",Description: "Seaweed and fish"}}
                ]
         };


        this.dataSource = new kendo.data.DataSource({
            data: this.state.products,
            pageSize: 5
        });

    }

    render() {
        return (
            <div>
            <Grid dataSource={this.dataSource}
                filterable={true}
                sortable={true}
                height={320}
                groupable={true}
                pageable={true}>
                <GridColumn field="ProductName" title="Product Name" />
                <GridColumn field="UnitPrice" title="Unit Price" />
                <GridColumn field="UnitsInStock" title="Units in Stock" />
            </Grid>
            </div>
        );
    }
}

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

## Installation

1. Download and install the package.

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

1. Once installed, import the Grid wrapper component from the package.

    ```sh
        import { Grid } from '@progress/kendo-grid-react-wrapper';
    ```

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

## Dependencies

The Grid 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 operations
    * [Data binding]({% slug databinding_grid %})
    * [Editing]({% slug editing_grid %})
    * [Grouping]({% slug grouping_grid %})
    * [Paging]({% slug paging_grid %})
    * [Sorting]({% slug sorting_grid %})
* More settings
    * [Column templates]({% slug columntemplates_grid %})
    * [Selection]({% slug selection_grid %})

## Events

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

```sh
<Grid dataBound={(e=> console.log("The data is bound"))} // Other configuration.
/>
```

## Suggested Links

* [Kendo UI Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/grid/overview)
* [API Reference of the Grid Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)