React Data Grid – An Ultimate Guide for Beginners in 2024

The purpose of the three functionalities defined in the above code is as below.

• randomizeData – accepts a collection of data and randomly selects values that need to be updated.
• updateStock – accepts the selected values from randomized data and calculates the amount to add or subtract from UnitsInStock. It also helps identify the updated fields by setting their isChanged property to true.
• updateStockValue – updateStock function uses this function to add or subtract a value between 0 – 4.

After defining the above functions, we have used the setInterval() and clearInterval() JS functions to randomly update data. We can use them inside two separate functions, as shown below.

// Kicks off when we click on the "Start" button and updates data randomly every second


const  startDataChange = () => {


  clearInterval(changeIntervalRef.current);


  changeIntervalRef.current = setInterval(() => {


  let  newData = randomizeData(data);


  setData(newData);


  }, 1000);


};


// Pauses the data being updated


const  pauseDataChange = () => {


  clearInterval(changeIntervalRef.current);


};

The above startDataChange function will call the randomizeData function each second. It will update values in several rows randomly resulting in an increase or decrease in UnitsInStock.

Updating Cell Styles

Now we have a functional data grid with live data streaming and updated at random intervals. So let’s move on to see how to update the UI of the data grid to reflect the data changes.

In the previous example, we are updating the field “UnitsInStock” with a positive or negative value. So let’s see how to style cells to differentiate these two states, which are positive updates and negative updates.

We can use the green color (#bffdbc3) to highlight a positive update, while using the red color (#ffd1d1) to mark a negative update.

const  InStockCell = (props) => {


const  checkChange = props.dataItem.isChanged || false;


const  field = props.field || '';


const  value = props.dataItem;


if (checkChange === true) {


      let  changeType = props.dataItem.changeType;


  let  cellColors = {};


  changeType === 'positive' ? ((cellColors.color = 'green'), (cellColors.backgroundColor = '#bfdbc3')) : ((cellColors.color = 'red'), (cellColors.backgroundColor = '#ffd1d1'));


      


      return (


        <td


          style={{


            color: cellColors.color,


            background: cellColors.backgroundColor,


          }}


         colSpan={props.colSpan}


         role={'gridcell'}


         aria-colindex={props.ariaColumnIndex}


         aria-selected={props.isSelected}


        >


          {value === null ? '' : props.dataItem.toString()}


        </td>


      );


      } else { // Handles our initial rendering of the cells and can be used to restore cells that have not been updated in a while.


        return (


          <td


            colSpan={props.colSpan}


            role={'gridcell'}


            aria-colindex={props.ariaColumnIndex}


            aria-selected={props.isSelected}


          >


            {value === null ? '' : props.dataItem.toString()}


          </td>


        );


    }


};

While React is a great front-end library, we recommend you to learn the differences of Extjs vs React vs Angular.

Why Choose Sencha For Your React Data Grid?

ReExt, from Sencha, is an easy way to add a Data Grid to your React code. The implementation is simple, involving a single component with five properties. X events make handling events like onClick easy, allowing you to track user activity smoothly.

Component reusability is a major benefit. ReExt lets you use existing Sencha Ext JS code and custom components in React. This preserves uniformity and speeds up development by reducing rework. 

ReExt works directly within React without needing separation from D3.js-driven components. It functions ‘out of the box’ with no extra configuration to your React or Ext JS setup. You can just plug it in and start building your application.

ReExt supports future releases of React and Sencha Ext JS 7.x. It is available as an NPM package and works with build systems like Vite or create-react-app. 

You can also use ReExt with other React components. This flexibility allows you to use Sencha’s themes and toolkits to enhance application performance and user experience.

Creating a React Responsive Grid by Using ReExt by Sencha

Check out this video to create a powerful grid by using Sencha ReExt.

https://www.youtube.com/watch?v=ZnVgOP3GDZQ 

To get started, navigate to the Sencha website and click on the products tab. From there, you should choose ReExt:

Next, you should click on “Try React Grid.”

You will see the below screen where there are three types of Grids:

1. Grid
2. Treegrouped Grid
3. Pivot Grid

This section gives you an idea of how the ReExt grid works. Next, you should navigate to the documentation:

In the documentation, you should navigate to the components section and then choose your desired grid:

Let’s suppose I choose the Pivot Grid. We will get the below documentation:

This documentation comes with a complete solution to implement the pivot grid within your applications. 

Here is the code example of pivot grid:

{

    xtype: 'pivotgrid',


    matrix: {


        leftAxis: [{


            width: 80,


            dataIndex: 'salesperson',


            header: 'Salesperson'


        }],


        topAxis: [{


            dataIndex: 'year',


            header: 'Year',


            direction: 'ASC'


        }]


        // ... more configs

    }

}   


It will give you results like the one given below:

You can learn more details by clicking here. 

Conclusion

React Re Ext Grids address challenges faced when working with large data sets in React grid layout applications. They help developers design complex and interactive UIs with minimal coding. The grids are easy to install and offer numerous customization options, making them ideal for dynamic, data-driven applications.

Real-time data updates, infinite scrolling, and column editors are some of the features supported by React Data Grids. These grids also offer frozen columns, which are essential for keeping key data in view while scrolling through large datasets.

Features like the column scrollbar allow users to navigate through multiple columns with ease. A summary row type can be used to display aggregated data, providing clear insights at a glance. The column resize handle further enhances usability by enabling users to adjust column widths dynamically.

React Data Grids also offer flexibility through optional arrays, allowing developers to pass an array describing additional configuration options or other untouched rows that don’t need to be processed in real-time. Developers can choose to implement either a static or memoized component to optimize rendering and performance in their applications.

FAQs

How to Handle Large Data in React Grid?

Use pagination, infinite scrolling, and lazy loading for efficient data handling.

What Is the Best Datagrid Component for React?

React Data Grid and AG Grid are popular for their features and performance.

What Is the Use of Data Grid in React?

Data grids display, edit, and manage large datasets in React applications.

What Are the Advantages of a Data Grid?

Data grids offer sorting, filtering, and real-time data updates for better user experience.

What Is the Concept of Data Grid Control?

Data Grid Control manages large datasets with features like pagination and sorting.

Worried about the performance of the data grid as your data grows? Try ExtJS and understand the difference!