React Grid 概要と構成

Ignite UI for React Data Table / Data Grid は、コーディングや構成をほとんど行わずにデータをすばやくバインドして表示できる表形式の React グリッドコンポーネントです。ツールボックスの React データグリッドの機能には、フィルタリング、ソート、テンプレート、行の選択、行のグループ化、行の固定、および移動可能な列が含まれます。

React テーブルは、ライブのストリーミングデータ用に最適化されており、多数の行または列で無制限のデータセットサイズを処理できます。

React Data Grid の例

この Ignite UI for React Grid の例では、ユーザーが基本スタイルと Excel スタイルの両方のフィルタリング、ライブデータのソート、およびグリッド集計とセルテンプレートの使用を実行する方法を確認できます。デモには、1 ページあたり 10 項目を表示するように設定されたページングも含まれています。

Ignite UI for React Data Grid で作業を開始

依存関係

React Data Grid を初期化するには、Ignite UI for React パッケージをインストールする必要があります。

React グリッドのパッケージをインストールするときに、core (コア)、inputs (入力)、および layouts (レイアウト) パッケージもインストールする必要があります。

npm install --save igniteui-react-core
npm install --save igniteui-react-grids
npm install --save igniteui-react-inputs
npm install --save igniteui-react-layouts

グリッドを使用するには、次のインポートも含める必要があります。

import "igniteui-react-grids/grids";

対応するスタイルも参照する必要があります。テーマの 1 つにライトモードのオプションまたはダークモードのオプションを選択し、プロジェクト構成に基づいてインポートできます:

import 'igniteui-react-grids/grids/themes/light/bootstrap.css'

グリッドの外観をカスタマイズする方法の詳細については、スタイル設定セクションを参照してください。

コンポーネントモジュール

DataGrid には以下のモジュールが必要です。

import { IgrGridModule } from "igniteui-react-grids";
IgrGridModule.register();

使用方法

グリッドパッケージをインポートしたので、基本的な構成と、ローカルデータへのバインドから始めていきましょう。

<IgrGrid id="grid1" data={localData} autoGenerate="true"></IgrGrid>

id プロパティは文字列値で、設定されない場合に自動生成生成されるグリッドの一意識別子です。data はグリッドをローカルデータにバインドします。

autoGenerate プロパティは、データソースフィールドに基づいてグリッドの IgrColumn コンポーネントを自動生成するようにグリッドに指示します。列の適切なデータ型の決定を試みます。それ以外の場合、開発者は列およびデータソースフィールドへのマッピングを明示的に定義する必要があります。

編集可能な React グリッド

グリッド編集の各操作にはバッチ操作が含まれます。つまり、API には、編集を単一のサーバー呼び出しにグループ化するオプションがあります。または、グリッドの操作を使用して、グリッドの編集を実行したり、発生した操作を更新したりできます。CRUD 操作を備えた編集グリッドとしての優れた開発者エクスペリエンスに加えて、Angular グリッドには Excel のようなキーボードナビゲーションが含まれます。一般的なデフォルトのグリッドナビゲーションに加えて、お客様のニーズを満たすためにナビゲーションオプションを上書きするオプションが含まれています。優れたナビゲーションスキームを備えた編集可能なグリッドは、最新の業務アプリケーションにとって重要であり、Ignite UI グリッドを使用すると簡単になります。

このトピックに続いて、セルテンプレートとセル編集テンプレートおよび編集について詳しく学習します。

グリッドの列構成

IgrColumn は、グリッドの列コレクションを定義し、ソートやフィルタリングなどの列ごとの機能を有効にするために使用されます。セル、ヘッダー、およびフッターテンプレートも利用できます。

列の定義

autoGenerate プロパティを無効にし、マークアップで列コレクションを定義します。

<IgrGrid id="grid1" autoGenerate="false" allowFiltering="true" data={localData}>
    <IgrColumn field="Name" sortable="true"></igc-column>
    <IgrColumn field="AthleteNumber" sortable="true" header="Athlete number" filterable="false"></IgrColumn>
    <IgrColumn id="trackProgress" field="TrackProgress" header="Track progress" filterable="false"></IgrColumn>
</IgrGrid>

ヘッダーテンプレート

ヘッダーテンプレートを設定して、列ヘッダーを変更できます。以下のスニペットは、ヘッダーテキストを大文字に書式設定する方法を示しています。

function nameHeaderTemplate(ctx: IgrColumnTemplateContext) {
    return (
    <>
     {formatUppercase(ctx.dataContext.column.field)}
    </>
    );
}

function formatUppercase(value: string) {
    return value.toUpperCase();
}

<IgrGrid id="name" field="Name" headerTemplate={nameHeaderTemplate}></IgrGrid>

注: グループ化 / 移動機能と一緒にヘッダーテンプレートを使用すると、列ヘッダー領域はドラッグ可能になりヘッダーテンプレートのカスタム要素部分にドラッグ不可としてマークするまでアクセスできません。以下の例をご覧ください。

function productNameHeaderTemplate(ctx: IgrColumnTemplateContext) {
    return (
        <>
            <div class="text">${ctx.dataContext.column.field}</div>
            <IgrIcon onClick={() => toggleSummary(ctx.dataContext.column)} name="functions" draggable="false"></IgrIcon>
        </>
    );
}

<IgrColumn id="productName" field="ProductName" header="Product Name" groupable="true" hasSummary="true" headerTemplate={productNameHeaderTemplate}></IgrColumn>

Draggable 属性を false に設定して追加しています。

セルテンプレート

セルテンプレートを設定すると、列内のすべてのセルが変更されます。テンプレートで提供されるコンテキストオブジェクトは暗示的に提供されたセル値およびセルオブジェクトです。セルのテキストを書式設定できるテンプレートを定義するために使用できます。たとえば、タイトルケースなどです。

function formatTitleCase(value: string) {
    return value.toUpperCase();
}

function nameCellTemplate(ctx: IgrCellTemplateContext) {
  return (
  <>
   {formatTitleCase(ctx.dataContext.implicit)}
  </>
  );
}

<IgrColumn id="name" field="Name" bodyTemplate={nameCellTemplate}></IgrColumn>

上記のスニペットで暗示的に提供されたセル値への参照を取得します。データを表示し、セルの値にカスタムスタイル設定およびパイプ変換を適用する場合に使用します。ただし、IgrCell インスタンスを以下のように使用するとより効果的です。

function nameCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <span tabindex="0" keydown={() => deleteRow(ctx.dataContext.cell.id.rowIndex)}>
            {formatTitleCase(ctx.dataContext.cell.value)}
            </span>
        </>
    );
}

function subscriptionCellTemplate(ctx: IgrCellTemplateContext) {
    if (ctx.dataContext.cell.value) {
            return (
                <>
                 <input type="checkbox" checked />
                </>
            );
    } else {
            return (
                <>
                 <input type="checkbox"/>
                </>
            );
    }
}

function deleteRow(rowIndex: number) {
    grid.deleteRow(rowIndex);
}

function formatTitleCase(value: string) {
    return value.toUpperCase();
}

<IgrGrid id="grid" autoGenerate="false" data={data}>
    <IgrColumn id="name" field="Name" dataType="string" bodyTemplate={nameCellTemplate}></IgrColumn>
    <IgrColumn id="subscription" field="Subscription" dataType="boolean" bodyTemplate={subscriptionCellTemplate}></IgrColumn>
</IgrGrid>

注: グリッドは、数値、文字列、日付、およびブール列タイプのデフォルトの処理を公開します。例えば、ブール列タイプの場合に列はデフォルトで true/false の代わりに check または close アイコンを表示します。

適切に実装されると、セル編集テンプレートは、セルの editValue がグリッド編集イベントサイクルを正しく渡します。

セル編集テンプレート

列は、セルが編集モードにある場合に使用されるテンプレートを使用します。その他の列テンプレートと同じように、提供されるコンテキストオブジェクトはセル値およびセルオブジェクトです。編集モードテンプレートをユーザーアクセス可能にするには、列の Editable プロパティを true に設定します。

function priceCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <label>
                Enter the new price tag
            </label>
            <input name="price" type="number" value={ctx.dataContext.cell.value} 
                change={() => this.updateValue(ctx.dataContext.cell.value)}/>
        </>
    );
}

function updateValue(value: number) {
}

<IgrColumn id="price" field="Price" dataType="number" editable="true" inlineEditorTemplate={priceCellTemplate}></IgrColumn>

テンプレートで使用可能なプロパティの詳細については、IgrCell の API を参照してください。

列テンプレート API

各列テンプレートが IgrColumn オブジェクトでコードによって変更可能です。以下のコード例で、ユーザーデータの 2 つのテンプレートを宣言しました。TypeScript コードでテンプレートへの参照を取得し、条件に基づいてアプリケーションで列の適切なテンプレートを描画します。

<IgrGrid>
    {/* Column declarations */}
</IgrGrid>

function normalViewTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <div class="user-details">{ ctx.dataContext.cell.value }</div>
            <UserDetailsComponent></UserDetailsComponent>
        </>
    );
}

function smallViewTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <div class="user-details-small">{ ctx.dataContext.cell.value }</div>
        </>
    );
}

const column = grid.getColumnByName("User");
// Return the appropriate template based on some condition.
// For example saved user settings, viewport size, etc.
column.bodyTemplate = smallViewTemplate;

列プロパティもグリッドで列が初期化されるときに発生される ColumnInit イベントのコードで設定できます。

function initColumns(grid: IgrGridBaseDirective, args: IgrColumnComponentEventArgs) {
    const column: IgrColumn = args.detail;
    if (column.field === 'ProductName') {
        column.sortable = true;
        column.editable = true;
    }
}

上記のコードは ProductName 列のソートや編集機能を有効にし、対応する機能の UI (編集の入力など) をインスタンス化します。

カスタム表示形式

書式設定のためのオプションのパラメーターがあります:

Format - 表示される日付 / 時間部分を決定します。デフォルト 'mediumDate' です ('MMM d, y')。
Timezone - 日付のタイムゾーンオフセット。デフォルトでは、エンドユーザーのローカルシステムのタイムゾーンを使用します。
DigitsInfo - 10 進表現オブジェクト。デフォルトの設定は 1.0-3 です。

これらのパラメーターによって表示形式をカスタマイズできるようにするには、pipeArgs 入力公開します。pipeArgs が設定されている場合、列はそのデータ型の対応するプロパティのみに遵守します。例:

const columnPipeArgs = {
    format: "longDate",
    timezone: "UTC",
    digitsInfo: "1.2-2"
};

<IgrColumn field="OrderDate" dataType="date" pipeArgs={columnPipeArgs}></IgrColumn>

OrderDate 列は Format および Timezone プロパティのみに遵守しますが、UnitPrice は DigitsInfo のみに遵守します。

すべての利用可能な列データ型は、公式の列タイプトピックにあります。

グリッドデータの構造

IgrGrid はフラットデータとネストされた POJO (Plain old Java objects) を処理します。描画に固有のデータ構造はフォームにあります。

const OBJECT_ARRAY = [{
        ObjectKey1: value1,
        ObjectKey2: value2,
        // ...
        ObjectKeyN: valueN
    },
    // ...
  }];

const POJO = [{
        ObjectKey1: value1,
        ObjectKey2: value2,
        // ...
        ObjectKeyN: {
          ObjectKeyN1: value1,
          ObjectKeyN2: value2,
          // ...
          ObjectKeyNM: valueNM,
        }
    },
    // ...
  }];

警告: キー値に配列を含まないでください。

autoGenerate 列を使用する場合、データキーが同一である必要があります。

グリッドのデータバインディング

はじめにリモートデータサービスにバインドするためにグリッドを変更します。大規模なアプリケーションレベルでは一般的なシナリオです。

これを行うには、JSON 応答を受信して指定された URL からデータを取得し、それをグリッドのデータソースとして使用されるグリッドの data プロパティに割り当てます。

<IgrGrid ref={gridRef}></IgrGrid>

function fetchData(url: string): void {
    fetch(url)
      .then(response => response.json())
      .then(data => onDataLoaded(data));
}
function onDataLoaded(jsonData: any[]) {
    gridRef.current.data = jsonData;
  }

注: リモートデータにバインドする場合、グリッドの autoGenerate プロパティは使用しないことをお勧めします。データを検証して適切な列を生成するためにデータが利用可能である必要があります。リモートサービスの応答が完了するまでデータが利用できないため、グリッドはエラーを発生します。リモートサービスへバインド時に autoGenerate を使用する機能は今後追加予定です。

複雑なデータバインディング

IgrGrid は、データレコード内のプロパティのパスを介した複合オブジェクト (1 レベルより深いネストを含む) へのバインドをサポートします。

次のデータモデルを見てください。

interface AminoAcid {
    name: string;
    abbreviation: {
        short: string;
        long: string;
    }
    weight: {
        molecular: number;
        residue: number;
    },
    formula: {
        molecular: string;
        residue: string;
    }
}

たとえば、グリッド内の特定のアミノ酸の重みを表示するには、次のスニペットで十分です。

<IgrColumn field="weight.molecular"></IgrColumn>
<IgrColumn field="weight.residue"></IgrColumn>

IgrGrid で複雑なデータをバインドまたは複合データ (複数の列から) を可視化する別の方法は、列にカスタムボディテンプレートを使用することです。通常、以下のことができます。

ネストされたデータを含むセルの value を使用します。

テンプレート内の cell オブジェクトを使用し、そこから ctx.dataContext.cell.id.rowIndex または ctx.dataContext.cell.id.rowID にアクセスして、グリッドの API 経由で行を取得します。そこから任意の値を取得し、テンプレート内で補間します。

function getName(rowIndex: number) {
    return grid.getRowByIndex(rowIndex).data["Name"];
}
function getWeight(rowIndex: number) {
    return grid.getRowByIndex(rowIndex).data["weight"]["molecular"];
}

function abbreviationLongCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <div>
            <div>
                { ctx.dataContext.cell.value }
                    {getName(ctx.dataContext.cell.id.rowIndex)} 
                    {getWeight(ctx.dataContext.cell.id.rowIndex)}
            </div>
        </div>
        </>
    )
}

<IgrColumn id="abbreviationLong" field="abbreviation.long" bodyTemplate={abbreviationLongCellTemplate}></IgrColumn>

本文テンプレートを使用して複雑なデータを表示する方法の例を次に示します。以下は使用するデータです。

export const EMPLOYEE_DATA = [
    {
        Age: 55,
        Employees: [
            {
                Age: 43,
                HireDate: new Date(2011, 6, 3),
                ID: 3,
                Name: "Michael Burke",
                Title: "Senior Software Developer"
            },
            {
                Age: 29,
                HireDate: new Date(2009, 6, 19),
                ID: 2,
                Name: "Thomas Anderson",
                Title: "Senior Software Developer"
            },
            {
                Age: 31,
                HireDate: new Date(2014, 8, 18),
                ID: 11,
                Name: "Monica Reyes",
                Title: "Software Development Team Lead"
            },
            {
                Age: 35,
                HireDate: new Date(2015, 9, 17),
                ID: 6,
                Name: "Roland Mendel",
                Title: "Senior Software Developer"
            }],
        HireDate: new Date(2008, 3, 20),
        ID: 1,
        Name: "John Winchester",
        Title: "Development Manager"
    }
]

ネストデータをレンダリングする列のカスタムテンプレート。

function addressCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <IgrExpansionPanel>
                <div slot="title" style={{font-size: '1.1em'; font-weight: 'bold'; margin-top: '1rem'; margin-bottom: '0.25rem'}}>
                {ctx.dataContext.cell.value[0].Name}
                </div>
                <div className="description">
                    <div style={{display: 'flex'; align-items: 'center'}}>
                        <div for="title" style={{width: '2rem'; margin: '0rem'}}>Title</div>
                        <input id='Title' type="text" name="title" value="${ctx.dataContext.cell.value[0].Title}" style={{text-overflow: 'ellipsis'}} />
                    </div>
                    <div style={{display: 'flex'; align-items: 'center'}}>
                        <div for="age" style={{width: '2rem'; margin: '0rem'}}>Age</div>
                        <input id='Age' type="text" name="title" value="${ctx.dataContext.cell.value[0].Age}" style={{text-overflow: 'ellipsis'}} />
                    </div>
                </div>
            </IgrExpansionPanel>
        </>
    )
}

<IgrColumn field="Employees" header="Employees" width="40%" bodyTemplate={addressCellTemplate}></IgrColumn>

以下は、この設定の結果です。

フラットデータの操作の概要

フラットデータバインディングのアプローチは既に説明したものと似ていますが、セル値の代わりに、IgrGridRow の data プロパティを使用します。

React グリッドはデータレコードをレンダリング、操作、保存するためのコンポーネントのため、すべてのデータレコードへアクセスすることで、それを処理する方法をカスタマイズすることができます。それには、data プロパティを使用します。

以下は使用するデータです。

export const DATA: any[] = [
    {
        Address: "Obere Str. 57",
        City: "Berlin",
        CompanyName: "Alfreds Futterkiste",
        ContactName: "Maria Anders",
        ContactTitle: "Sales Representative",
        Country: "Germany",
        Fax: "030-0076545",
        ID: "ALFKI",
        Phone: "030-0074321",
        PostalCode: "12209",
        Region: null
    }
]

カスタムテンプレート:

function getCountry(rowIndex: number) {
    return grid.getRowByIndex(rowIndex).data["Country"];
}

function getCity(rowIndex: number) {
     return grid.getRowByIndex(rowIndex).data["City"];
}

function getPostalCode(rowIndex: number) {
     return grid.getRowByIndex(rowIndex).data["PostalCode"];
}

function addressCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <div className="address-container">
            // In the Address column combine the Country, City and PostCode values of the corresponding data record
                <span><strong>Country:</strong> {getCountry(ctx.dataContext.cell.id.rowIndex)}</span>
                <br/>
                <span><strong>City:</strong> {getCity(ctx.dataContext.cell.id.rowIndex)}</span>
                <br/>
                <span><strong>Postal Code:</strong> {getPostalCode(ctx.dataContext.cell.id.rowIndex)}</span>
            </div>
        </>
    );
}

<IgrColumn field="Address" header="Address" width="25%" editable="true" bodyTemplate={addressCellTemplate}></IgrColumn>

上記で定義したテンプレートでは編集操作ができないため、エディターテンプレートが必要であることに注意してください。

function webGridCompositeAddressEditCellTemplate(ctx: IgrCellTemplateContext) {
    var cell = ctx.dataContext.cell as any;
    if (cell === undefined || cell.row === undefined || cell.row.data === undefined) {
        return (<></>)
    }

    function keyUpHandler(event: any, ctx: IgrCellTemplateContext) {
        var cell = ctx.dataContext.cell as any;
        if (cell !== undefined && cell.row !== undefined && cell.row.data !== undefined) {
            cell.row.data[event.target.id] = event.target.value;
        }
    }

    return (
        <>
            <div className="address-container--edit" style={{display: 'inline-grid'}}>
            <div>
                <span><strong>Country:</strong></span>
                <input id='Country' keyup={(e: any) => keyUpHandler(e, ctx)} value={cell.dataContext.row.data.Country}></input>
                <br>
                <span><strong>City:</strong></span>
                <input id='City' keyup={(e: any) => keyUpHandler(e, ctx)} value={cell.dataContext.row.data.City}></input>
            </div>
            <div>
                <span><strong>Postal Code:</strong></span>
                <input id='PostalCode' keyup={(e: any) => keyUpHandler(e, ctx)} value={cell.dataContext.row.data.PostalCode}></input>
                <br>
                <span><strong>Selected:</strong></span>
                <input id='Phone' keyup={(e: any) => keyUpHandler(e, ctx)} value={cell.dataContext.row.data.Phone}></input>
            </div>
            <br>
        </div>
        </>
    );
}

<IgrColumn field="Address" dataType="number" width="25%" editable="true" inlineEditorTemplate={webGridCompositeAddressEditCellTemplate}></IgrColumn>

フラットデータの操作の例

前のセクションのコードスニペットを使用すると、次の IgrGrid の例になります。

キーボードナビゲーション

IgrGrid のキーボードナビゲーションは、さまざまなキーボード操作をユーザーに提供します。アクセシビリティが向上し、内部の要素 (セル、行、列ヘッダー、ツールバー、フッターなど) を直感的にナビゲートできます。

React Grid スタイル設定の構成

注: グリッドは css グリッドレイアウトを使用しますが、これはプレフィックスなしでは IE ではサポートされていません。その結果、適切に描画されません。

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。

<IgrGrid className="grid"></IgrGrid>

ヘッダーの背景とテキストの色を変更したい場合は、最初にグリッドのクラスを設定する必要があります:

.grid {
    --header-background: #494949;
    --header-text-color: #FFF;
}

既知の問題と制限

制限	説明
列幅は `percentage` および `px` で設定されます。	列に `%` と `px` を組み合わせて使用することはできません。
`number` 型の列をフィルターする場合	フィルター入力に入力された値が `number` と異なる場合、キャストが正しくないため `NaN` が返されます。
グリッドの `width` が列幅に依存しない	すべての列の `width` でグリッド自体のスパンは決定しません。親コンテナーのディメンションまたは定義したグリッドの `width` で決定されます。
親コンテナーでネストされた Grid	グリッドの `width` を設定せずに定義済みのディメンションで親コンテナーに配置した場合、グリッドがコンテナーに合わせてスパンします。
グリッドの `OnPush` ChangeDetectionStrategy	`ChangeDetectionStrategy.OnPush` を処理し、カスタム表示されたときにグリッドに発生した変更について通知します。
列には設定可能な最小幅があります。`displayDensity` オプションに基づき、 "compact": 56px "cosy": 64px "comfortable": 80px があります。	許容される最小幅未満に設定した場合、描画される要素に影響はありません。`displayDensity` に対応する許容される最小幅で描画します。水平方向の仮想化は予期しない動作を招く場合があるためサポートしていません。
ビューに描画されていないセル高さは行の高さに影響しません。	仮想化のため、セルの高さを変更するビューにないカスタムテンプレートの列は行の高さに影響しません。関連する列がビューにスクロールされるときのみ行の高さに影響します。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。