Data Grid with NodeJS Express Server

You can use the KendoReact Data Grid with NodeJS and Express servers. In this way, you can enable CRUD and server data operations like paging, sorting, filtering, and grouping.

How to Run the Demo

Whether you are looking for examples of how to use KendoReact in applications, or for a starting point for your CRUD Data Grid with server operations, head over to 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. Go to the server folder via cd server.
3. Install the required dependencies for the server via npm install --save.
4. Make sure you have activated your license
5. Use node index.js command to start the server application.
6. Open a second terminal for the client.
7. Go to the client folder via cd client.
8. Install the required dependencies via npm install --save.
9. Use npm start or yarn start command to start the client application.
10. Open http://localhost:3000 to view it in the browser.

About the App

The new React Data Grid with NodeJS Express Server is a sample application that developers can use as a demo of how to implement CRUD and server data operations in their Data Tables. The sample application is built using the KendoReact Data Grid and the Kendo Data Query packages. We are using the Data Query methods on the server to help with all operations like filtering, sorting, paging, and grouping.

The sample application also shows how to use the KendoReact DropDownList component as an editor for complex fields in the Data Grid.

The application uses inline editing for the CRUD operations. This method allows local editing of the data while the user types and saves it on the server only after the user has finished editing the entire row.

Styling KendoReact Components with Ease

To make styling as easy as possible, you can use the KendoReact Themes that come out-of-the-box with this React UI components library. In this demo, we use the KendoReact Default Theme to make our components stand out and look great.

For more information on how to add one of the themes to your project, refer to the article on using the KendoReact themes in React projects.

If you're interested in further customizing the theme, check the Customization article in our Progress Design System documentation.

Suggested Links

• KendoReact Data Grid
• KendoReact DropDownList
• Kendo Data Query