Ignite UIでReact Excelのようなグリッドを構築する

Ignite UIでReact Excelのようなグリッドを構築する

React Excel のようなグリッドを構築するのは簡単ではありませんが、Ignite UI for React驚くほど簡単になります。並べ替え、フィルター処理、編集、Excel のようなナビゲーション、Excel エクスポートをサポートする、機能豊富な高性能グリッドを数分で統合できます。

6分読書

基本的なデータ表示では、最新のエンタープライズ アプリケーションではもはや手間がかかりません。多くの場合、それ以上のものが必要です。ビジネス ユーザーは、並べ替え、フィルタリング、編集、階層データ構造、シームレスな Excel エクスポートを備えた、Microsoft Excel の機能と使い慣れた機能を模倣した、リッチでインタラクティブなデータ テーブルを期待しています。

React開発者の場合、このタイプのグリッドをゼロから構築するのは困難な場合があります。幸いなことに、Ignite UI for Reactは、パフォーマンスや柔軟性を犠牲にすることなく、これを容易にする包括的なソリューションを提供します。

ReactのExcelのようなグリッドとは何ですか?

Reactの Excel のようなグリッドとは、スプレッドシートの重要な動作とユーザーの期待を再現するデータ テーブルを指します。これにより、開発者は Excel 自体を埋め込む必要がなくなります。Excel スタイルのエクスペリエンスを定義する主なReactグリッド機能には、次のものがあります。

  • Sorting columns 
  • Excel-like keyboard navigation 
  • Filtering using drop-down menus 
  • Inline editing 
  • クリップボードの操作
  • Excel 互換形式へのエクスポート

これらの機能は、管理ダッシュボード、金融アプリ、ERP、分析プラットフォームなどのアプリに不可欠です。ユーザーがビジネス アナリストであろうと SaaS の顧客であろうと、迅速かつ直感的に動作するグリッド コンポーネントを期待しています。

ゼロから構築するという課題

React Excel のようなグリッド エクスペリエンスを手動で再作成することは、特に次のことを考慮する場合、簡単な作業ではありません。

  • 仮想化:行/列の仮想化を行わないと、大規模なデータセット (10,000+ 行) ではパフォーマンスが急速に低下します。
  • Excelエクスポート:データ型、書式設定、構造を保持する実際の Excel ファイル (CSV だけでなく) を生成するには、多くの場合、複雑な外部ライブラリが必要です。
  • 高度な機能:並べ替え、Excel スタイルのフィルタリング、キーボード ナビゲーション、編集、エクスポートを一貫したエクスペリエンスで一緒に実装するには、通常、複数のライブラリをつなぎ合わせるか、ゼロから構築することを意味します。
  • スケーラビリティ:カスタム ソリューションは、機能が成長するにつれて技術的負債になることがよくあります。これにより、ReactExcel のようなグリッドの維持やチームや製品間での拡張が難しくなります。

ほとんどのチームにとって、このアプローチはコストがかかり、エラーが発生しやすく、迅速な出荷のボトルネックとなります。

Ignite UI for Reactを選ぶ理由

Ignite UI for Reactは、高性能React Excel のようなグリッドを備えた包括的な UI ツールキットで、すべての重要なスプレッドシート機能がすぐに含まれています。複雑なデータ表示やエンタープライズのユースケース向けに構築されています。

主な機能は次のとおりです。

  • 大規模なデータセットのための高性能仮想化
  • 階層的なデータの表示とサポート(グループ化、階層グリッド、ツリーグリッドなど)
  • 組み込みのExcelエクスポート(True .xlsx形式またはCSVのみ)
  • セル編集、要約、グループ化
  • Custom cell templates 
  • Excel スタイルのフィルター処理
  • Column pinning, column hiding, summaries, and more 
  • Keyboard navigation support 
  • アクセシビリティとキーボードショートカット(ARIA 準拠)

View Data Grid Documentation 

Excel スタイルのフィルタリング: 有効にする方法

ビジネスユーザーにとって最も便利な機能の1つは、Excelスタイルのフィルタリングで、列ヘッダーにドロップダウンメニューを提供します。

  • 値でフィルタリング (チェックボックス)
  • 条件でフィルタリング (等しい、含む、より大きいなど)
  • Custom filter dialogs 
  • フィルターのクリアオプション
  • その他多数

Ignite UIで有効にするには:

<IgrGrid
    data={nwindData}  
    autoGenerate={true}  
    allowFiltering={true}  
    filterMode="excelStyleFilter">  
</IgrGrid>

これにより、独自のドロップダウンやロジックを接続することなく、フィルタリング用の各列に使い慣れたExcelのようなインターフェイスが提供されます。

​Ignite UIグリッド Excel スタイル フィルタリングの完全なドキュメントは、こちらで確認してください。

Excel 構成へのエクスポート

Excel エクスポートは、特にユーザーがアプリ外でデータを共有、アーカイブ、または分析する必要がある場合に、エンタープライズ グリッドに不可欠な機能です。Ignite UI for React、グリッド データを完全にフォーマットされた .xlsx ファイルまたは単純な .csv ファイルに簡単にエクスポートできます。

Excel エクスポートを有効にするには:

<IgrGrid autoGenerate={true} data={nwindData}>
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarExporter exportCSV={true} exportExcel={true}>
            </IgrGridToolbarExporter>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrGrid>

これにより、ヘッダー、データ型、グループ化 (該当する場合) を含む、現在のデータセットを含む実際の Excel ファイルが生成されます。外部のExcelライブラリは必要ありません。

Excel Service へのIgnite UIグリッド エクスポートの完全なドキュメントについては、こちらをご覧ください。

Excel-Style Keyboard Navigation Setup 

Excel ユーザーは、スムーズで直感的なキーボード操作を期待しています。ただし、これをWebグリッドで複製するには、いくつかのカスタム設定が必要です。そのため、Ignite UI for Reactでは、イベント フックとターゲット ロジックを使用して、完全な Excel スタイルのキーボード ナビゲーションを柔軟に実装できます。

これを実現するために、次の 3 つの関数を導入します。

  • cancelGridKeydown, bound to onGridKeydown.
  • handleArrowKeydown, bound to onKeyDownCapture.
  • handleKeydown、ネイティブの keydown イベントにアタッチされます。

各関数は、Excel スタイルのエクスペリエンスの特定の部分を処理します。

  • handleKeydown は、文字入力と Enter ベースのナビゲーションを管理します。
  • cancelGridKeydown prevents the grid’s default Enter behavior.
  • and handleArrowKeydown enables arrow key navigation between editable cells. 

Key behaviors this setup enables: 

  • A–Zまたは0–9を入力すると、編集モードになり、すぐに入力が開始されます。
  • EnterまたはShift + Enterを押すと、編集のコミット中に上下に移動します。
  • 矢印キーは、編集モードを維持しながら、編集可能なセル間を移動します。
  • ナビゲーションでは、グループ ヘッダー、サマリー、編集不可能なセルがスキップされます。

このセットアップは、Excel のようなスムーズなナビゲーション エクスペリエンスを提供し、主にキーボードで作業するユーザーや、データ入力とレビューにキーボード優先の UI を好むユーザーにとって重要です。

なぜIgnite UIグリッドが優れているのですか?

軽量なReactグリッドコンポーネントやReactテーブルライブラリ、カスタムDIYセットアップとは異なり、Ignite UIはスケーラブルなエンタープライズアプリケーション向けに作られています。この作品の特徴は以下の通りです:

  • パフォーマンス: 仮想化レンダリングにより、100k+ 行でも超高速の対話が可能になります
  • 機能e: Excel のエクスポート、グループ化、概要、フィルター、並べ替え、ページング、カスタム テンプレート。すべてが組み込まれています。
  • 高度にカスタマイズ可能: テーマのサポート、CSS オーバーライド、列テンプレート、ローカリゼーションにより、セルレベルに至るまで、アプリのルック アンド フィールに合わせるために必要なすべてのスタイリングおよび構成ツールを利用できます。
  • 開発者ファースト: TypeScript のサポート、完全な API ドキュメント、エンタープライズ グレードのサポート オプション。
  • 安全でサポートされている:専用のサポートと頻繁なアップデートにより、現場で実戦テストされています。

まとめ...

React Excel のようなグリッドを構築するのは簡単ではありませんが、Ignite UI for React驚くほど簡単になります。並べ替え、フィルター処理、編集、Excel のようなナビゲーション、Excel エクスポートをサポートする、機能豊富な高性能グリッドを数分で統合できます。

React How To
デモを予約