React テーブル / Grid

React データ テーブル/データ グリッドは、表形式の React コンポーネントでコーディングや設定をほとんど行わずにデータをすばやくバインドして表示できます。機能には、フィルタリング、ソート、テンプレート、行選択、行のグループ化、行の固定、および列移動があります。 React Tableは、ライブ ストリーミング データ用に最適化されており、複数の行や列でサイズ無制限のデータセットを処理することができます。

デモ

依存関係

grid パッケージをインストールするときに core パッケージもインストールする必要があります。

  • npm install --save igniteui-react-core
  • npm install --save igniteui-react-grids

必要なモジュール

IgrLiveGrid は、以下のモジュールが必要です。

import { IgrLiveGridModule } from "igniteui-react-grids/ES5/igr-live-grid-module";
import { IgrLiveGrid } from "igniteui-react-grids/ES5/igr-live-grid";

IgrLiveGridModule.register();

使用方法

グリッド モジュールがインポートされました。次のステップはローカル データにバインドするグリッドの基本的な設定です。

    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 Antons 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 Antons Gumbo Mix",
        QuantityPerUnit: "36 boxes",
        ReorderLevel: 0,
        UnitPrice: 21.3500,
        UnitsInStock: 0
    }];

以下のコードは、React Data Grid を上記のローカル データにバインドします。

自動生成された列:

<IgrLiveGrid
    height="100%"
    width="100%"
    autoGenerateColumns="true"
    dataSource={this.data}/>

列の手動定義:

<IgrLiveGrid
    height="100%"
    width="100%"
    autoGenerateColumns="false"
    dataSource={this.data}>
    <IgrNumericColumn propertyPath="ProductID" headerText="Product ID"/>
    <IgrTextColumn propertyPath="ProductName" headerText="Product Name"/>
    <IgrTextColumn propertyPath="QuantityPerUnit" headerText="Quantity Per Unit"/>
    <IgrNumericColumn propertyPath="UnitsInStock" headerText="Units In Stock"/>
    <IgrDateTimeColumn propertyPath="OrderDate" headerText="Order Date"/>
</IgrLiveGrid>