Carter Harris
In this webinar, Syncfusion’s Senior Product Manager, Shriram Shankaran, demonstrates how to elevate your React applications using the powerful Syncfusion® React Data Grid component. You’ll learn how to implement real-time data updates, enable dynamic user controls, and fine-tune the visual presentation of data-heavy interfaces. You can find it on our YouTube channel and embedded here:
Highlights
- Seamless integration of real-time data into React apps
- Step-by-step setup of the Syncfusion® React Data Grid
- Implementing Start/Stop controls for data flow
- Using query cell info for conditional cell styling
- Supporting high performance and mobile responsiveness
Whether you’re building a financial tracker or a monitoring system, this session equips you to create efficient and professional-looking UIs with ease.
Time Stamps
[00:00] Introduction
[01:14] Agenda
[01:30] Why use the Syncfusion® React Data Grid
[02:07] Live demo overview
[03:00] Create a new React app
[05:00] Install Syncfusion® packages
[08:07] Add Syncfusion® license and import packages
[08:56] Integrate React Data Grid
[11:08] Grid customization and virtualization
[17:37] Add columns and services
[18:45] Add live data update controls
[23:32] Start/Stop update functionality
[25:31] Add conditional cell styling
[28:02] Real-world use cases
[28:30] Key takeaways and recap
Q&A
Q1: Is it possible to get the same performance as React with the Syncfusion® Angular library?
A: Yes, it is very possible to get the same performance with our Angular library.
Q2: How would you add search or filter functionality to display select data points?
A: Sorting and filtering in the grid are based on the full dataset to ensure accurate results and proper pagination. These actions aren’t available for selected records alone. Details related to searching and filtering can be found in the links below.
Q3: Is it possible to use Axios-Redux to get data form API?
A: Yes, it is possible. The details related to it can be found in the link below.
Q4: Can the grid be subscribed to receive real-time data and render as we saw in the demo?
A: Yes, the Syncfusion® React Data Grid fully supports subscribing to and receiving data updates in real time.
Q5: When you start the refresh, is the data coming from the API?
A: Yes. In React, when the Grid is refreshed, it fetches data again from the API. Syncfusion’s Grid component supports dynamic data binding, so a refresh call, like using the dataSource or invoking grid.refresh() will re-trigger the API request to ensure the latest data is displayed.
Q6: Is filtering implemented in the back-end API, or is it handled by the front?
A: Syncfusion® React Data Grid supports both front-end and back-end filtering approaches, giving you flexibility based on your requirements.
Q7: Does the Data Grid support WebSocket?
A: Yes, you can integrate WebSocket with Syncfusion® React Grid to support live data updates. While the Grid doesn’t have built-in WebSocket support, you can listen to real-time events through WebSocket and update the Grid’s dataSource dynamically in response.
