Get Started

Start Free Trial (If You Haven’t Already)

KendoReact is a commercial UI library, which means that a KendoReact license has to be purchased in order to develop applications with KendoReact. Since we believe in trying before you buy to ensure that KendoReact is a good fit, we offer a free 30-day trial that is fully functional and also grants access to our legendary technical support during the trial duration.

Setting Up the React Project

The easiest way to start with React is to use the create-react-app. To scaffold your project structure, follow its installation instructions.

npx create-react-app my-app
cd my-app
npm start

Adding the KendoReact Components

KendoReact is distributed as multiple NPM packages, scoped to @progress. For example, the name of the Grid package is @progress/kendo-react-grid.

  1. Let's start and add the Grid package and its dependencies:

    npm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs
  2. Next, import the components into your source code. Change the code in src/App.js to:

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    // Import the Grid component.
    import { Grid, GridColumn } from '@progress/kendo-react-grid';
    
    class App extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          data: [
            {ProductName: "Chai", Price: 10},
            {ProductName: "Chang", Price: 20}
          ],
          title: "Hello from KendoReact!"
        }
      }
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">{this.state.title}</h1>
            </header>
              <Grid data={this.state.data}>
                <GridColumn field="ProductName" title="Product name"/>
                <GridColumn field="Price"/>
              </Grid>
          </div>
        );
      }
    }
    
    export default App;
  3. Run the application in the browser by using the npm start command.

We are done! The Grid is now visible, but it looks plain. Let's add the theme.

Adding the Styles

The KendoReact themes are distributed as separate NPM packages. At the time, the available theme packages are @progress/kendo-theme-default, @progress/kendo-theme-bootstrap and @progress/kendo-theme-material.

  1. We'll take the Default theme and install it just like the Grid package:

    npm install --save @progress/kendo-theme-default
  2. Now, import the CSS file from the package in src/App.js:

    // You can import style files in ./App.js and add global styles in ./App.css
    import '@progress/kendo-theme-default/dist/all.css';
  3. With the stylesheet in place, you should see something like this in the browser:

The Grid is rendered and looks splendid! Now you can add many features to it like paging, sorting, filtering, grouping, editing etc. Explore all of them in the Grid documentation.

Demo App

If you want to see the components in action, follow this tutorial demonstrating how to build a sales dashboard app using the KendoReact Data Grid, Charts, Material Theme and more. You will also learn how to wrap them in containers and provide data to them.

Next Steps

We are sure that you are looking for more—browse the components section and discover the amazing features that KendoReact brings to the table.

Happy coding!

Not finding the help you need?