Enterprise Ready React Data Grid | GRUI by Sencha

React is a popular open-source JavaScript library that allows you to build complex UIs using a component model. Those components are expressed using JSX, a React extension to JavaScript language syntax that helps structure component rendering using a familiar syntax.

Fig. 1 Example Sencha grid using JSX

Figure 1 is an example of a Sencha Grid for React being defined using JSX on the left.
On the right, you see the rendered output of that JSX. It is a complex data grid that includes several columns, groupings, filtering, sorting, and various other features. Let us try and understand them in more detail.

1. What is Sencha’s Grid for React (GRUI)? What is new in the 1.1 release?

In 2021, Sencha released version 1.0 of “Sencha Grid for React” (also called GRUI). It has all the power and capabilities of Sencha’s Ext Grid but has been rebuilt from the ground up. GRUI’s modernized code base is optimized for a very small footprint so that applications load quickly and seamlessly fit in with the rest of the npm React ecosystem; essentially, you install and get going.

The idea was to make it as easy as possible to integrate Grid into your React applications. No other plugins or configuration were to be required. In the short amount of time since GRUI’s initial release, a lot of feedback has come in from our customers and early adopters. Hence, we released the second version of GRUI (version 1.1) with additional features. This release includes Tree Grid, a powerful grid capability that allows you to display hierarchical data. GRUI 1.1 can handle grouping, sorting, and filtering and has all the other Tree Grid capabilities that you have come to expect from the Ext version of the Sencha Grid. GRUI 1.1 also includes:

• locking grid,
• spreadsheet selection model,
• multi-level grouping, and
• several other filters and features.

Additionally, an out-of-the-box Dark Theme is available with GRUI 1.1.

2. What is a typical React application with GRUI?

Let’s learn more about GRUI by building a realistic React application. This simple example uses:

• Material UI, a very popular open-source component library for React
• FusionCharts, a commercial enterprise charting library
• GRUI, a commercial enterprise-grade data grid

Fig.2 Example Sencha GRUI for REACT

As shown in the above figure (Fig. 2), on the left-hand side we have the “VS” code, and on the right-hand side we have the sample application running in the browser. The stack used for building this application is:

• React 18
• Material UI 5
• FusionCharts and GRUI Grid 1.1

Fig. 3 – Example of FusionCharts integration to sample React Application

Fig. 4 – Example of Tree Grid’s integration to sample React application

3. How can I recreate the sample?

To briefly introduce the sample application, we created a simplified layout using Material UI with a tab panel. This includes:

• Big Data – a big-data grid from a Storybook example
• FusionCharts – example of a standard FusionCharts visualization
• Tree Grid + FusionCharts – Tree Grid integrated with FusionCharts and having them interact with each other
• Grid Flow Graph – a simpler grid with an interesting custom-column component that has a simple chart for each row

Get access to an on-demand video for a step-by-step guide on how to create a complex React application here:
SenchaCon 2022: Sencha’s Grid for Enterprise React Applications (brighttalk.com)

4. Why choose GRUI for building a React application?

Sencha’s GRUI is:

• A high-performance, ultra-light React Grid with enterprise-ready support that is ideal for any React project.
• A perfect modern enterprise-grade grid solution for React UI that comes with 100+ amazing data grid features.
• With GRUI, we have rebuilt the Ext JS Grid from the ground up to use modern JavaScript, and a whole new architecture will deliver all the same great features and even better performance in an easy-to-use React API.
• Backed by Sencha’s enterprise support and GRUI-ready implementation service partner(s) for seamless adoption.

Summary

GRUI 1.1 builds upon the initial release, with a focus on higher quality and developer productivity. The released features include Tree Grid (including grouping, sorting, and filtering), Locked Grid, spreadsheet style selection, multilevel grouping, grouping panel, advanced filter bar and the dark theme support, among others. Overall developer experience is optimized for ease of use and rapid adoption with a few easy steps.

$ npm install @sencha/sencha-grid

It is a data layer and state management agnostic solution that uses a simple JSX component interface with no custom webpacks or other special build steps required. GRUI fully adopts TypeScript inside the component library to help with the development velocity. One key feature is the Virtual Column support that is built into GRUI and extends virtualized rendering beyond just the rows to also columns—that is, you can configure an unlimited number of columns and the grid will render only the visible ones. This leads to massive performance improvement with a large number of columns and a better user experience.

GRUI is designed for modern JavaScript applications with ES6 classes and modules and “use strict” mode support. Sencha has included rich documentation, including Storybook examples to highlight each feature, config, and columns. These live coding examples are provided both in JS and in TypeScript, making it easier to copy and paste the features that you need.

GRUI 1.1 is ready for you. The free trial – makes it a no-brainer to give it a try. We recommend you give Sencha GRUI a run and let us know what you think, and we are eager to hear any feedback or comments. You can reach us via the support mailing list and our Discord channel. Happy coding!