Getting Started with KendoReact Grid

The KendoReact Data Grid (Table) displays data in a tabular format and provides a full spectrum of configuration options such as paging, sorting, filtering, data editing, grouping, PDF and Excel export.

The KendoReact Grid component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-grid package.

Basic Usage

The following example demonstrates the Grid in action.

Copy Codeimport React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.Component {
    render() {
        return (
            <Grid
                style={{ height: '400px' }}
                data={[ ...products ]}
            >
                <Column field="ProductID" title="ID" width="40px" />
                <Column field="ProductName" title="Name" width="250px" />
                <Column field="Category.CategoryName" title="CategoryName" />
                <Column field="UnitPrice" title="Price" />
                <Column field="UnitsInStock" title="In stock" />
                <Column
                    field="Discontinued"
                    cell={props => (
                        <td>
                            <input disabled type="checkbox" checked={props.dataItem[props.field]} />
                        </td>
                    )}
                />
            </Grid>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Functionality and Features

• Data operations
  • Editing
  • Filtering
  • Grouping
  • Paging
  • Sorting
• Export options
  • PDF export
  • Excel export
• Advanced implementations
  • Hierarchy
  • Detail row
  • Row reordering
• More settings
  • Column features
  • Cell features
  • Scroll modes
  • Selection
  • Integration with ASP.NET Core projects
  • Styling
  • Globalization

For more information on implementing advanced use cases, refer to the advanced scenarios.

Installation

1. Download and install the package. Use Node.js v5.0.0 or later.

   Copy Codenpm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-data-tools @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-drawing

2. Once installed, import the package module.

   Copy Code// ES2015 module syntax
   import { Grid } from '@progress/kendo-react-grid';

   Copy Code// CommonJS format
   const { Grid } = require('@progress/kendo-react-grid');

3. You are required to install one of the Kendo UI themes to style your components. For more information on how to add the styles, refer to the article on getting started.

Dependencies

The Grid package requires the following peer dependencies that have to be installed by your application:

• react 16.8.2*
• react-dom
• @progress/kendo-data-query
• @progress/kendo-react-data-tools
• @progress/kendo-react-dateinputs
• @progress/kendo-react-dropdowns
• @progress/kendo-react-inputs
• @progress/kendo-react-intl
• @progress/kendo-drawing

Suggested Links

• Getting Started with KendoReact
• Working with KendoReact Trial Version and Commercial License
• KendoReact End User License Agreement
• API Reference of the KendoReact Data Grid