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!
Developing software without an architecture pattern may have been an option back then. However, that’s…
As a web developer, you know how popular JavaScript is in the web app development…
2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript…