Reactアプリケーションに高機能、ハイパフォーマンスのグリッドを提供するSencha GRUI

December 2, 2021 157 Views

Sencha GRUIは、100以上のデータグリッド機能を提供する、React UI向けの最新エンタープライズソリューションです。GRUIは、Sencha Ext JSのグリッド機能を最新のJavaScript技術を用いて再構築し、すべての機能を新しいアーキテクチャによって提供するとともに、React APIで使いやすくし、よりよいパフォーマンスを実現しました。

主な機能概要を以下に示します。

何百万行ものレコードを処理可能
大規模な機能セット（フィルタリング、グループ化、無限スクロールなど）
フルカスタマイズ可能
データエクスポート機能（csv、tsv、html、pdf、xls）
広範なプラットフォームおよびブラウザで検証済み
UIコンポーネントを容易にグリッドに統合可能

驚異的なスピードのデータ処理により、大量データの利用でも問題は起きません。クライアントおよびサーバーサイドにバッファされたストアを用いることで、Senchaのデータグリッドは、数ミリ秒以内で大規模データのロードと操作が可能になります。

主な機能

仮想列

行および列の仮想レンダリング
列数無制限の構成のグリッドでも表示されている列のみをレンダリング
多くの列数のグリッドにおけるパフォーマンスを劇的に向上

無限スクロール

必要に応じてページキャッシュから表示される行を更新表示

スライダーページングツールバー

ページングツールバーを用いれば、スライダーボタンと入力フィールドによって、レコードセットを前後にページ分割可能

列のドラッグ＆ドロップ

直感的なドラッグ＆ドロップ操作で列の並べ替えが可能

列エディタ

各列は編集可能。Reactコンポーネントを使用してカスタムエディターの作成も可能

ドキュメント

Sencha GRUIには、チュートリアルドキュメントとAPIドキュメントが用意されています。このドキュメントそのものが、インタラクティブデモとしてSencha GRUIによって構築されているので、その使用方法を学びながら、Sencha GRUIがどのように機能するかを確認することができます。以下は、「はじめに」ページに掲載された簡単な例です。

1. Reactアプリの作成

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

2. ログイン

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

3. 依存関係を追加

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

4. コンポーネントをビルド

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 npm start

価格

Sencha GRUIは、開発者単位のシンプルな価格体系になっています。開発者1名の永続ライセンスで、開発したアプリケーションのエンドユーザーへの無制限配布、1年間の製品アップデートと技術サポートが付属しています。無料で利用できる電子透かし入りバージョンもありますが、製品のすべての機能を試用できる無料のトライアル版も用意されているので、開発プロジェクトにSencha GRUIが適合するかを容易に検証できます。

まとめ

ミッションクリティカルアプリケーションは、データグリッドコンポーネントのパフォーマンスに大きく依存していると言っていいでしょう。カスタムレイアウトとReactとのシンプルな統合を実現したSencha GRUIは、高いパフォーマンスを発揮するエンタープライズアプリケーションの構築を可能します。豊富なドキュメントにより、Senchaのパワーを容易にプロジェクトに適用可能。魅力的な価格設定、無料のトライアルも、導入を容易にします。ぜひ、Sencha GRUIをお試しいただき、フィードバックをお寄せください。