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.

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 @progress/kendo-react-animation @progress/kendo-licensing

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 KendoReact themes to style your components. For more information on how to add the styles, refer to the article on getting started.

4. Follow the instructions on the KendoReact My License page to activate your license. You can skip this step if your application already contains a KendoReact license file.

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-licensing
• @progress/kendo-react-animation
• @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
• Video Introduction to the KendoReact Grid