高速 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 グリッドであり、ごくわずかなコードだけでは実現できない機能を提供します。 この例は、データ グリッドの主な機能のいくつかを示しています:
- 数百万のレコードをロードできる[仮想化された行と列](data-grid/live-data.md)
- セル、行、および一括更新オプションを使用した[インライン編集](data-grid/cell-editing.md)
- [Excel スタイル フィルタリング](data-grid/column-filtering.md)と [Excel キーボード ナビゲーション](data-grid/cell-activation.md)機能
- インタラクティブな [Outlook スタイルのようなグループ化](data-grid/row-grouping.md)
- グリッド セルまたは列のデータに基づいた[列集計](data-grid/column-summaries.md)
- Excel へのエクスポート ([データ可視化](..\excel-library-working-with-charts.md)を含む)
- 単一および複数選択の[セルと行の選択](data-grid/cell-selection.md)
- モバイル アプリケーション開発の完全なタッチ操作サポート
高速 React データ グリッド例
Demo
データの仮想化とパフォーマンス
データの仮想化とパフォーマンス
データ グリッドの列と行レベルの仮想化により、React グリッド内の無制限の行と列をシームレスにスクロールします。ローカルまたはリモートのデータ ソースのサポートにより、データがどこにあっても最高のパフォーマンスを得ることができます。ユーザーは Excel のようなスクロールを体験し、エンタープライズ スピード (ラグ、画面のちらつき、視覚的な遅延) なしで、パフォーマンスを損なうことなく最高のユーザー エクスペリエンス (UX) を提供します。
すばやく簡単に React テーブルをカスタマイズ、構築および実装
Ignite UI for React データ グリッドは、データの無制限の行と列を処理できると同時に、カスタム テンプレートとリアルタイムのデータ更新へのアクセスを提供します。簡単なテーマ設定とブランディングのための直感的な API を備えており、最小限のコードでデータにすばやくバインドできます。
React Grid セルおよび行選択
React Grid フィルタリング
React Grid 列移動
React Grid 列ピン固定
React Grid 列サイズ変更
React Grid 列ソート
React Grid 列集計
React Grid 列タイプ
React グリッドの列アニメーション
React Grid 列オプション ダイアログ
React 列と行の Outlook スタイルのグループ化
React Grid ページング
React Grid 行ピン固定
React Grid キーボード ナビゲーション
React Grid 機能
- [グリッド編集](data-grid/cell-editing.md)
- [セル選択](data-grid/cell-selection.md)
- [セル テンプレート](data-grid/column-types.md#template-column)
- [列フィルタリング](data-grid/column-filtering.md)
- [列の非表示](data-grid/column-chooser.md)
- [列の移動](data-grid/column-moving.md)
- [列の集計](data-grid/column-summaries.md)
- [カスタム ツールバー](data-grid/column-chooser.md#toolbars-column-chooser-ui)
- [ピン固定列](data-grid/column-pinning.md)
- [グリッド ページング](data-grid/row-paging.md)
- [グリッドのソート](data-grid/column-sorting.md)
- [リアルタイム/ライブ データ](data-grid/live-data.md)
- [リモート データのロードオンデマンド](data-grid/remote-data.md)
- [サイズ変更可能な列](data-grid/column-resizing.md)
- [行のグループ化](data-grid/row-grouping.md)
- [行選択](data-grid/cell-selection.md)
- [仮想化とパフォーマンス](data-grid/performance.md)
Ignite UI for React サポートされるブラウザー
- Chrome
- Edge / Edge Chromium
- Firefox
- Safari
- ポリフィルを使用した Internet Explorer 11
Ignite UI for React サポート オプション
- React サポート ホーム ページをご覧ください。
- React [ドキュメント](..\general-getting-started.md)を読み、React サンプルを試してください。
- 最新の情報は、React ブログをご覧ください。
- アカウントにサインインした後、サポート ケースを送信します。
- React 参照アプリケーションをお試しください。
Ignite UI for React 試用ライセンスおよび商用
Ignite UI for React は、サブスクリプション モデルで利用可能な商用ライセンス製品です。Ignite UI for React 製品は、30 日間トライアル版を無料でお試しいただけます。試用期間が終了したら、弊社 Web サイトからライセンスを購入するか、お住まいの地域の営業担当者にお問い合わせください。
FAQ
- 数百万のレコードをロードできる[仮想化された行と列](data-grid/live-data.md)
- セル、行、および一括更新オプションを使用した[インライン編集](data-grid/cell-editing.md)
- [Excel スタイル フィルタリング](data-grid/column-filtering.md)と [Excel キーボード ナビゲーション](data-grid/cell-activation.md)機能
- インタラクティブな [Outlook スタイルのようなグループ化](data-grid/row-grouping.md)
- グリッド セルまたは列のデータに基づいた[列集計](data-grid/column-summaries.md)
- Excel へのエクスポート ([データ可視化](..\excel-library-working-with-charts.md)を含む)
- 単一選択および複数選択の[セルと行の選択](data-grid/cell-selection.md)
- モバイル アプリケーション開発の完全なタッチ サポート