React Data Grid 概要
Ignite UI for React Data Table / Data Grid は、表形式の React コンポーネントでコーディングや設定をほとんど行わずにデータをすばやくバインドして表示できます。React の機能には、フィルタリング、ソート、テンプレート、行選択、行のグループ化、行の固定、および列移動があります。React データ テーブルは、ライブ ストリーミング データ用に最適化されており、無制限のデータセットサイズを行数または列数で処理することができます。
React Data Grid の例
このデモは、グリッドで利用可能な機能のいくつかを実装しています: フィルタリング、グループ化、列のピン固定/ピン固定解除、列の再配置、ソート、および集計。
作業の開始
依存関係
React Grid のパッケージをインストールするときに core パッケージもインストールする必要があります。
npm install --save igniteui-react-core
npm install --save igniteui-react-grids
npm install --save igniteui-react-inputs
モジュールの要件
IgrGrid
を作成するには、以下のモジュールが必要です。
import { IgrDataGridModule } from 'igniteui-react-grids';
import { IgrDataGrid } from 'igniteui-react-grids';
IgrDataGridModule.register();
オプションのモジュール
上記のオプションの IgrGrid
機能を使用するには、以下のモジュールが必要です。
import { IgrGridColumnOptionsModule } from 'igniteui-react-grids';
import { IgrDataGridToolbarModule } from "igniteui-react-grids";
import { IgrSparklineModule } from 'igniteui-react-charts';
IgrGridColumnOptionsModule.register();
IgrDataGridToolbarModule.register();
IgrSparklineModule.register();
サンプル データ ソース
React グリッド モジュールがインポートされました。以下のステップはローカル データにバインドするグリッドの基本的な設定です。
this.data = [{
Discontinued: false,
OrderDate: new Date("2012-02-12"),
ProductID: 1,
ProductName: "Chai",
QuantityPerUnit: "10 boxes x 20 bags",
ReorderLevel: 10,
UnitPrice: 18.0000,
UnitsInStock: 39
}, {
Discontinued: false,
OrderDate: new Date("2003-03-17"),
ProductID: 2,
ProductName: "Chang",
QuantityPerUnit: "24 - 12 oz bottles",
ReorderLevel: 25,
UnitPrice: 19.0000,
UnitsInStock: 17
}, {
Discontinued: false,
OrderDate: new Date("2006-03-17"),
ProductID: 3,
ProductName: "Aniseed Syrup",
QuantityPerUnit: "12 - 550 ml bottles",
ReorderLevel: 25,
UnitPrice: 10.0000,
UnitsInStock: 13
}, {
Discontinued: false,
OrderDate: new Date("2016-03-17"),
ProductID: 4,
ProductName: "Chef Antony Cajun Seasoning",
QuantityPerUnit: "48 - 6 oz jars",
ReorderLevel: 0,
UnitPrice: 22.0000,
UnitsInStock: 53
}, {
Discontinued: true,
OrderDate: new Date("2011-11-11"),
ProductID: 5,
ProductName: "Chef Antony Gumbo Mix",
QuantityPerUnit: "36 boxes",
ReorderLevel: 0,
UnitPrice: 21.3500,
UnitsInStock: 0
}];
列の自動生成
以下のコードは、React データ グリッドを上記のローカルデータにバインドする方法を示しています。
<IgrDataGrid
height="100%"
width="100%"
dataSource={this.data}
autoGenerateColumns="true"
defaultColumnMinWidth="100"
summaryScope="Root"
isColumnOptionsEnabled="true"
isGroupCollapsable="true"
groupSummaryDisplayMode="RowBottom"
columnMovingMode="Deferred"
columnMovingAnimationMode="SlideOver"
columnMovingSeparatorWidth="2"
columnShowingAnimationMode="slideFromRightAndFadeIn"
columnHidingAnimationMode="slideToRightAndFadeOut"
selectionMode="SingleRow"
cornerRadiusTopLeft="0"
cornerRadiusTopRight="0"
/>
列の手動定義
<IgrDataGrid
height="100%"
width="100%"
dataSource={this.data}
autoGenerateColumns="false">
<IgrNumericColumn field="ProductID" headerText="Product ID"/>
<IgrTextColumn field="ProductName" headerText="Product Name"/>
<IgrTextColumn field="QuantityPerUnit" headerText="Quantity Per Unit"/>
<IgrNumericColumn field="UnitsInStock" headerText="Units In Stock"/>
<IgrDateTimeColumn field="OrderDate" headerText="Order Date"/>
</IgrDataGrid>
列のスタイル設定
次のコードは、提供された列のプロパティを使用して特定の列のスタイルを設定する方法を示しています。
<IgrTextColumn
background="SkyBlue"
textStyle="Italic Bold 16pt Times New Roman"
/>
その他のリソース
- アクセシビリティの遵守
- セルのアクティブ化
- グリッド編集
- セル選択
- 列アニメーション
- 列の選択
- 列フィルタリング
- 列の移動
- 列のオプション
- 列サイズの変更
- 列の並ソート
- 列タイプ
- パフォーマンス
- 行のピン固定
- 行グループ
- 行のハイライト表示