@progress/kendo-grid-react-wrapper
Version:
Kendo UI Grid wrapper for React
119 lines (89 loc) • 6.45 kB
Markdown
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)