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"
    />
    

    その他のリソース

    API リファレンス