高速 React データ グリッド
Angular データ グリッド/データ テーブルは、一連の行と列で表データを表示するために使用されるコンポーネントです。テーブルとも呼ばれるデータ グリッドは、Microsoft Excel などの一般的なソフトウェアでデスクトップの世界でよく知られています。グリッドはデスクトップ プラットフォームで長い間利用されてきますが、最近 React UI などの Web アプリ UI の一部になりました。最新のグリッドは複雑で、データ バインディング、編集、Excel のようなフィルタリング、カスタム ソート、グループ化、行の並べ替え、行と列の固定、行の集計、Excel、CSV、PDF 形式のエクスポートなど、さまざまな機能および機能が含まれる場合があります。
React Grid 例
この React グリッドの例では、検索およびフィルタリング、列のソート、サイズ変更、ピン固定と非表示、行のグループ化、グリッド集計、水平および垂直方向のスクロール、セルに組み込まれたリニア プログレス バー インジケーター コンポーネントとスパークライン コンポーネントを含むセル スタイリングなどのグリッドの機能を使用して、ユーザーがデータのビューをカスタマイズする方法を確認できます。
このサンプルが気に入りましたか? 完全な React ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
React Data Grid の利点
React データ グリッドは、大量のデータをすばやく保存してソートされる必要がある場合に重要です。これには、大量の高速データ頻繁を使用する財務サービス、銀行および保険などの業界が含まれます。これらの企業の成功は、データ グリッドの機能とパフォーマンスに依存します。たとえば、在庫をマイクロ秒単位で決定する場合、データグ リッドが遅延時間やちらつきのない状態で実行する必要があります。
React Data Grid 機能
Ignite UI for React のデータ グリッドは、大量のリアルタイム データのみにとどまるものではありません。これは機能豊富な React グリッドであり、ごくわずかなコードだけでは実現できない機能を提供します。 この例は、データ グリッドの主な機能のいくつかを示しています:
- 数百万のレコードをロードできる仮想化された行と列
- セル、行、および一括更新オプションを使用したインライン編集
- Excel スタイル フィルタリングと Excel キーボード ナビゲーション機能
- インタラクティブな Outlook スタイルのようなグループ化
- グリッド セルまたは列のデータに基づいた列集計
- Excel へのエクスポート (データ可視化を含む)
- 単一および複数選択のセルと行の選択
- モバイル アプリケーション開発の完全なタッチ操作サポート
高速 React データ グリッド例
Demo
データの仮想化とパフォーマンス
データの仮想化とパフォーマンス
データ グリッドの列と行レベルの仮想化により、React グリッド内の無制限の行と列をシームレスにスクロールします。ローカルまたはリモートのデータ ソースのサポートにより、データがどこにあっても最高のパフォーマンスを得ることができます。ユーザーは Excel のようなスクロールを体験し、エンタープライズ スピード (ラグ、画面のちらつき、視覚的な遅延) なしで、パフォーマンスを損なうことなく最高のユーザー エクスペリエンス (UX) を提供します。
すばやく簡単に React テーブルをカスタマイズ、構築および実装
Ignite UI for React データ グリッドは、データの無制限の行と列を処理できると同時に、カスタム テンプレートとリアルタイムのデータ更新へのアクセスを提供します。簡単なテーマ設定とブランディングのための直感的な API を備えており、最小限のコードでデータにすばやくバインドできます。
React Grid セルおよび行選択
React データグリッドには、SingleCell、SingleRow、MultipleCell、MultipleRow、RangeCell などのモードを含む、セルおよび行レベルごとのマウスおよびタッチ操作選択のすべてのオプションが含まれています。
React Grid フィルタリング
React データ グリッドには、フィルタリングされる列のデータ型に基づいた列フィルタリングが含まれています。たとえば、列が DateTime フィールドの場合、Last Month、This Quarter、Next Week などのフィルターを使用できます。
React Grid 列移動
列の順序の再配置は、React データ グリッドでクリックアンドドラッグするのと同じくらい簡単です。完全なアニメーション エンジンも含まれているため、このインタラクションの UX を制御できます。
React Grid 列ピン固定
React データグリッドの左右の列ピン固定を使用すると、ユーザーは 1 つの列または複数の任意の順序でロックできるため、水平方向にスクロールしながら列の位置を維持できます。
React Grid 列サイズ変更
React データグリッドは、列のサイズ変更機能をサポートし、テーブル内の他の列に関して、データ グリッド列の表示方法を柔軟に変更できるようにします。
React Grid 列ソート
React データ グリッドは、単一、複数、またはトリステート列のソート構成で、昇順および降順の列ソートをサポートします。ソートは、ヘッダーをクリックするか、列オプションのドロップダウンを使用してトリガーされます。
React Grid 列集計
React データ グリッドは、データ グリッドのフッター領域またはグループ ヘッダー列集計をサポートします。これは、Count、Sum、Min、Max、Avg などの値を表示するのに最適です。
React Grid 列タイプ
React データ グリッドは、さまざまな列タイプに加えて、テンプレート列タイプとスパークライン テンプレート タイプをサポートしており、グリッド内のデータの表示方法を完全に柔軟に設定できます。
React グリッドの列アニメーション
React データ グリッドは、列の非表示や列の移動などのイベント時に列のアニメーションをサポートします。React データ グリッドで列アニメーションが設定されている場合、対応するアニメーションはその列のすべてのセルに対して発生します。
React Grid 列オプション ダイアログ
React データ グリッドは、各列ヘッダに表示される UI による列のグループ化、非表示、移動、固定、フィルター、および並べ替えの機能をサポートします。列オプションは、列ホバーの Kebab メニューを介して、すべての列でデフォルトでオンになっています。
React 列と行の Outlook スタイルのグループ化
React データ グリッドを使用すると、行を「固定ヘッダー」行グループにまとめることができます。Microsoft Outlook の Group By 機能と同様に、ユーザーは独自の基準に基づいてデータを視覚的にグループ化する簡単な方法があります。
React Grid ページング
React データ グリッド ページング コンポーネントは、簡単なナビゲーション UI を使用して、データの配列を取り込み、そのデータの一部をページとして出力するように設計されています。
React Grid 行ピン固定
React データ グリッドを使用すると、データ グリッドの上部に行をピン固定できます。行をピン固定するとその行がグリッドの最上部に複製され、薄い灰色の背景で固定されたままになり、実際の (または元の) 行は低い不透明度で描画され、ユーザーにこれは特別な行であることをわかりやすくします。
React Grid キーボード ナビゲーション
React データ グリッドは、Excel のような広範なキーボード ナビゲーションをサポートします。上、下、右、左、タブ、および Enter キーを使用して、React データ グリッドで Excel のようなキーボード ナビゲーションを有効にして、アクセシビリティ コンプライアンスを確保し、使いやすさを向上させます。マウスまたはキーボードを使用して単一または複数の行の選択を切り替えて、行全体を選択または選択解除できます。
React Grid 機能
Ignite UI for React サポートされるブラウザー
- Chrome
- Edge / Edge Chromium
- Firefox
- Safari
- ポリフィルを使用した Internet Explorer 11
Ignite UI for React サポート オプション
- React サポート ホーム ページをご覧ください。
- React ドキュメントを読み、React サンプルを試してください。
- 最新の情報は、React ブログをご覧ください。
- アカウントにサインインした後、サポート ケースを送信します。
- React 参照アプリケーションをお試しください。
Ignite UI for React 試用ライセンスおよび商用
Ignite UI for React は、サブスクリプション モデルで利用可能な商用ライセンス製品です。Ignite UI for React 製品は、30 日間トライアル版を無料でお試しいただけます。試用期間が終了したら、弊社 Web サイトからライセンスを購入するか、お住まいの地域の営業担当者にお問い合わせください。
FAQ
- 数百万のレコードをロードできる仮想化された行と列
- セル、行、および一括更新オプションを使用したインライン編集
- Excel スタイル フィルタリングと Excel キーボード ナビゲーション機能
- インタラクティブな Outlook スタイルのようなグループ化
- グリッド セルまたは列のデータに基づいた列集計
- Excel へのエクスポート (データ可視化を含む)
- 単一選択および複数選択のセルと行の選択
- モバイル アプリケーション開発の完全なタッチ サポート