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 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 application. But first, let us see some advantages of using GRUI as a data grid for your application. GRUI by Sencha React 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 installed in your system. NodeJS 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 . Once you have procured the license, then add the line below to your code. GRUI 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.

Why Are UI Components Important For Web-Based Development

How To Add A Data Grid To A React Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Reasons to Choose Sencha Ext JS for Your Data Driven Web Applications

10 Data Table Libraries for JavaScript

Fixing Oracle RAC Node Problems With Addnode: GRID and DB Binaries

Getting started with CSS Grid Layout

Getting The Perfect Layout in CSS: Grid + Flexbox

Grid vs. Flexbox: An Introduction to the Useless Battle

10 Reasons to Choose Sencha Ext JS for Your Data Driven Web Applications

10 Data Table Libraries for JavaScript

Fixing Oracle RAC Node Problems With Addnode: GRID and DB Binaries

Getting started with CSS Grid Layout

Getting The Perfect Layout in CSS: Grid + Flexbox

Grid vs. Flexbox: An Introduction to the Useless Battle

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps