React テーブル仮想データソース

React データ テーブル/データ グリッドは、1 行のコードでリモート データソースへのバインドをサポートします。 React テーブルの仮想データソースを使用すると、リモート URI と返される OData エンティティでグリッドを設定するだけで、残りの作業はグリッドが行います。

サンプル

依存関係

コア パッケージとグリッド パッケージに加えて、データソース パッケージもインストールする必要があります。

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

必要なモジュール

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

import './odatajs-4.0.0';
import { IgrLiveGridModule } from "igniteui-react-grids/ES5/igr-live-grid-module";
import { IgrLiveGrid } from "igniteui-react-grids/ES5/igr-live-grid";
import { ODataVirtualDataSource } from "igniteui-react-datasources/ES5/ODataVirtualDataSource";

IgrLiveGridModule.register();

使用方法

グリッド モジュールがインポートされました。以下のステップはリモート データにバインドするグリッドの基本的な設定です。仮想データソースを作成します。データが取得される URL を baseUri プロパティに割り当てます。entitySet プロパティを設定すると、仮想データソースから取得するテーブルがわかります。

private virtualData: ODataVirtualDataSource;
...
const vds = new ODataVirtualDataSource();
vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc");
vds.entitySet = ("Orders");
this.virtualData = vds;

private virtualData: ODataVirtualDataSource;
// ...
const vds = new ODataVirtualDataSource();
vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc");
vds.entitySet = ("Orders");
this.virtualData = vds;

データソースをグリッドに割り当てます。

<IgrLiveGrid
    width="100%"
    height="100%"
    defaultColumnMinWidth={120}
    dataSource={this.virtualData}/>