Sencha GRUI Delivers Rich and High Performance Grids For React Applications

Sencha GRUI is a perfect modern enterprise solution for React UI that includes 100+ data grid features. Sencha has rebuilt the Ext JS Javascript Grid from the ground up to use modern JavaScript and a whole new architecture that will deliver all the same great features and even better performance in an easy-to-use React API. The Ext React includes 140+ pre-built UI components that are fully supported and designed to work together seamlessly over the lifetime of the application. ExtReact supports React 15 and React 16, which can be useful when combined with Sencha GRUI to build React applications.

• Here is a quick overview of some of the features:
• Ability to handle millions of records.
• Large feature set (filtering, grouping, infinite scrolling, and more).
• Full customization control.
• Data Export capabilities (CSV, tsv, HTML, pdf, xls).
• Pre-tested across a wide range of platforms and browsers.
• Easy UI component integration to the grid.

With incredibly fast data processing, massive amounts of data are never a problem. Utilizing client and server-side buffered stores, the Sencha DataGrid is able to load and manipulate large data sets within milliseconds!

Key Features

Virtual Columns

• Virtual rendering of rows AND columns
• Rendering of visible columns even when configuring an unlimited number of columns
• Huge performance increase for large numbers of columns

Infinite Scrolling

• Refreshes the viewed rows from the page cache as needed

Slider Paging Toolbar

• The paging toolbar allows you to paginate forwards and backwards in the record sets with the slider buttons and input field

Column Drag and Drop

• Reorder columns with the intuitive drag and drop interface

Column Editors

• Each column can be edited, and you can create custom editors using React components.

Documentation

Sencha GRUI has robust documentation and API docs to help you get started quickly, and the documentation is built with Sencha-GRUI as an interactive demo so you can see how it works while you learn how to use it. Here’s an example of how straightforward it is from their “Getting Started” page:

1. Create React App

Run npx create-react-app --template minimal my-app

2. Login

Run npm login --registry=https://sencha.myget.org/F/grui/npm/ --scope=@sencha

3. Add Dependencies

Run cd my-app
Run npm add @sencha/sencha-grid material-design-icons

4. Build your Component

import React from "react";
import { SenchaGrid, Column } from "@sencha/sencha-grid";
import "@sencha/sencha-grid/dist/themes/material.css";
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}>
        <Column field="col1" text="Column 1" />
        <Column field="col2" text="Column 2" />
        <Column field="col3" text="Column 3" align="right" />
      </SenchaGrid>
    );
  }
}

5. Run App

Run npm start

Pricing

The pricing for Sencha GRUI is simple and transparent, on a per developer basis. $499 per developer gives you a perpetual license, unlimited end users and products, and a year of updates and technical support. There is also a Free plan that offers all of the same features and benefits, but it requires an attribution watermark. However, you can sign up for a free 30-day trial to see if Sencha GRUI will work for you and your projects, so that makes it very easy to get to know the product and determine the route you will take.

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. The extensive documentation should make this easy to get acquainted with and utilize in your projects, and the pricing – especially 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!