Sencha GRUI: High-performance, Feature-rich Grid For React Applications

When it comes to displaying a large amount of data, you have to make sure your application renders the data very fast, has a great UI, and is reliable. Grids are the most popular way to display a large amount of data in a web application, whether they are used to render a large spreadsheet or a map with dozens of markers. GRUI by Sencha is a high-performance grid solution for React apps. It can efficiently deal with a massive amount of data. Also, it is very easy to integrate with React. In this article, we will tell you why you should consider using Sencha GRUI in your application.

What is a Grid?

In web development, a grid is a collection of rows and columns containing multiple elements. A perfect grid should have features such as sorting, filtering, and even virtualization data that make representing complex data straightforward.

What Is GRUI By Sencha?

Sencha GRUI is a powerful enterprise-grade grid solution for React applications. It not only can efficiently handle millions of records, but also it loads huge amounts of data with incredible speed. It has all the power and capabilities of Sencha’s Ext Grid but has been rebuilt from the ground up with a focus on higher quality and developer productivity. GRUI is designed for modern JavaScript applications with ES6 classes and modules and “use strict” mode support.

Why Should You Use GRUI By Sencha?

100+ amazing data grid features

Besides filtering and grouping features, Sencha GRUI supports many advanced grid features such as:

• Virtual Columns:

Only render the data that will be visible on the screen. This positively impacts your application performance by not wasting any resources loading information that is not displayed. For example, let’s say you have a list that has 50000 items on it but you only want to display 20 of them on screen at a time. Using the virtual column feature your application will render only the 20 items and the other items will be rendered when you scroll to display them.

• Infinite scroll

Sencha GRUI infinite scroll is another key feature that will improve your application performance. Unlike default scrolling, infinite scrolling uses a virtual store to create and manage active range records. This will monitor the scrolling in the grid, refreshing the views rows from the page cache as needed.

• Column/rows Drag and Drop

Easily rearrange the data making the most important ones appear first. reordering columns and rows with drag and drop involve fewer clicks. Therefore, it boosts productivity as a whole.

There are a lot of features to be included in a single blog post. Explore them here.

Easy integration:

Sencha GRUI can simply integrate with React. To get you started quickly, GRUI has included rich documentation, including Storybook examples to highlight each feature and configuration. These live coding examples are provided both in JS and in TypeScript, making it easier to copy and paste the features that you need.

Fully customizable

Sencha GRUI offers complete customizing options. To tailor the view to your needs, you can select from the pre-made themes or design a custom theme.

Take your data with you

You can export data from Sencha GRUI in a number of formats, including CSV, XLS, PDF, etc. You can always show your data in a way that works best for your team.

Why Not Just Use a Custom Grid Solution?

Using Sencha GRUI saves your team many months of planning, development, and testing. Furthermore, Sencha GRUI offers the best long-term support from professional data grid developers, eliminating the need to maintain your own data grid team. Sencha GRUI allows you to scale for a growing business without worrying about whether your code can keep up. Benefit from all of these features at a fee that is affordable and transparent.

How Can You Create A Grid In Sencha GRUI?

First, create a react application using the create-react-app command

Run npx create–react–app my-grid-app

Run cd my–grid–app

Next, you must install the sencha sencha-grid component package using the following command.

Run npm add @sencha/sencha–grid

Then, after importing the React component from the beginning, you need to import the SenchaGrid and Column Components, the main components you can use to create the grid layout.

import React from “react”;
import { SenchaGrid, Column } from “@sencha/sencha-grid”;

After importing them, extend the React component class and create a default component class to start using SenchaGrid. Note that you can use the components in a React app differently, but in our example, we will create a class-based component. Next, define some values to include in the grid. Use the data property of the SenchaGrid Component to load the data to the grid.

export default class App extends React.Component {

render() {

const data = [

{ col1: “val1”, col2: “data1”, col3: 1.01 },

{ col1: “val2”, col2: “data2”, col3: 1.02 },

{ col1: “val2”, col2: “data3”, col3: 1.03 },

];

return (

<SenchaGrid data={data}>

<Column field=“col1” text=“Column 1” flex=“1” />

<Column field=“col2” text=“Column 2” />

<Column field=“col3” text=“Column 3” align=“right” />

</SenchaGrid>

);

}

}

This code will create a grid with three columns containing data. As you can see, creating a React grid in Sencha is pretty straightforward, and it is easier to understand what you are designing. Take a look at GRUI demos.

Conclusion

With Sencha GRUI you can load large amounts of data while providing responsive and ultimate performance. It offers the customization and configuration that your consumers demand and is packed with more than 100 fantastic data grid capabilities. Features data binding, sorting, grouping, and more. Overall, it possesses all the essential components of a high-performance, robust grid.