How To Add A Data Grid To A React Application

As a developer, when building a data-driven application, a data table with columns and rows can be what you need to display data to users of your application. 

However, if you need users to scroll or drag and drop plus other functionalities when interacting with the data, a data table wouldn’t be enough.

A data grid is the best thing to use if your data-driven application needs functionality such as filtering and pagination. A data grid is the best thing to use. 

A data grid is a component that can render rows and columns of data and allow the user to interact with the data.

If your application is built with React, you can use React data grid such as GRUI by Sencha. GRUI is a modern enterprise-grade React UI solution with 100+ unique data grid features.

This article will teach you how to add a GRUI to your data-driven React application. But first, let us see some advantages of using GRUI as a data grid for your application.

Benefits of using GRUI by Sencha

• Quick integration.
• Easy customization.
• Custom data loading.
• Handling massive amounts of data.
• No additional plugins are required.

GRUI Features

• Virtual columns
• Infinite scrolling
• Column editors
• Slider paging toolbar
• Column drag and drop

Installing GRUI

If you have not created React application yet, you will need NodeJS installed in your system.

Let me now show you how to add GRUI to your React Application. If you already have a React App created, you can skip to Step 2.

Step 1: Create React App

On your computer terminal or command line, run the command below.

npx create-react-app --template minimal data-app

Then navigate into data-app

cd data-app

Step 2: Add GRUI

After the React App is created, let us now add GRUI. To add GRUI, run the command below.

npm add @sencha/sencha-grid

Step 3: Create GRUI component

Open data-app using your preferred text editor. In my case, we are using Visual Studio Code. Then navigate to the src folder and open the App.js file.

On the App.js file, clear the source that is already there and remain with a blank file. After that, add the following lines of code at the top.

import React from "react";
import { SenchaGrid, Column } from "@sencha/sencha-grid";
import "@sencha/sencha-grid/dist/themes/grui.css";

The first line is straightforward. We are importing React into our file to create a React Component.

The second line imports SenchaGrid so that we can be able to add a grid to our component. The third line imports styling that will make our grid look nice.

Let us now create a component by adding the code below.

export default class App extends React.Component {
}

Next, we will add an array with values displayed on our grid.

export default class App extends React.Component {
  render() {
    const data = [
      { col1: "value1", col2: "data1", col3: 1.01 },
      { col1: "value2", col2: "data2", col3: 1.02 },
      { col1: "value3", col2: "data3", col3: 1.03 },
    ];
  }
}

Let us now add SenchaGrid that will display values from the array that we created above.

export default class App extends React.Component {
  render() {
    const data = [
      { col1: "value1", col2: "data1", col3: 1.01 },
      { col1: "value2", col2: "data2", col3: 1.02 },
      { col1: "value3", col2: "data3", col3: 1.03 },
    ];

    return (
      <SenchaGrid data={data} style={{ width: "500px", height:"300px"}}>
        <Column field="col1" text="Column 1" flex="1" />
        <Column field="col2" text="Column 2" />
        <Column field="col3" text="Column 3" align="right" />
      </SenchaGrid>
    );
  }
}

Your App.js file should be looking as shown below.

Step 4: Run App

To see GRUI in action, run the command below on your command line.

npm start

Once it is done compiling, the App will open on your browser, and you should be able to see the grid as shown below.

Step 5: Set License

To remove the watermark, you must purchase a license by visiting GRUI. Once you have procured the license, then add the line below to your code.

SenchaGrid.setLicense("<Your_procured_license_key>")

Conclusion

Mission-critical apps rely on the performance of their data grid components. 

With custom layouts and simple integration with React, GRUI by Sencha renders unparalleled performance to enterprise applications.