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!
User experience matters just as much as the services a company offers. To meet this…
The latest industry reports show that around 60% of web applications rely on data grids.…
In the current age where data is wealth, almost 2.5 quintillion bytes of data are…