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
    

    モジュールの要件

    IgrDataGrid を作成するには、以下のモジュールが必要です。

    オプションのモジュール

    上記のオプションの IgrDataGrid 機能を使用するには、以下のモジュールが必要です。

    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>
    

    その他のリソース