Grid Live Data Application

KendoReact enables you to create a beautiful and fast Grid with live data. The Grid Live Data App uses one of the most powerful KendoReact components such as the KendoReact Chart, React Badge, Grid, and more.

How to Run the Demo

If you are looking for examples how to integrate the KendoReact components in large applications, or for ideas for your own app that shows real-time data updates, please visit the live Grid Live Data Application. You can find the application's source code on GitHub. 

To play with the demo and see how it’s built, you may want to run it locally:

1. Clone or download the source code from GitHub.
2. Install the required dependencies via npm install --save.
3. Make sure you have activated your license
4. Use npm start or yarn start command to start the application.
5. Open http://localhost:3000 to view it in the browser.

About the App

This application shows how to use the KendoReact Grid to render multiple live updates in a short time (also referred to as streaming updates). The Data Grid will only re-renderer (not re-mount) the updated rows when it receives the new data real-time. That makes each streaming update very efficient. In this application, we use the KendoReact Data Grid and Charts to visualize the data and to show both the data trends in the Chart and the details in the Grid. The application also uses the KendoReact Badge and Cards to display different data.

Full List of the Used KendoReact Components

You can see the following five KendoReact components implemented in this sample application:

• KendoReact Charts
• Area Chart
• KendoReact Data Grid
• KendoReact Badge
• KendoReact Card
• KendoReact Avatar

Suggested Links

• Getting Started with KendoReact
• KendoReact Coffee Warehouse App
• KendoReact Dashboard sample application