Web Components Grid Lite データ バインディング

Grid Lite は、データ ソースとしてプレーン オブジェクトの配列を受け入れます。各グリッド行は配列内のデータ レコードをレンダリングしたもので、行のセルは列の構成に基づいて制御されます。

データの変換 (ソートやフィルターなど) を適用する場合、グリッドは元のデータ参照を変更しません。つまり、データ変換は元のソースには反映されません。グリッドはデータ配列内のオブジェクトの変更を追跡しないため、データ オブジェクトを直接変更しても反映されません。

実行時にデータ ソースを変更する

コンポーネントは実行時にデータ ソースの変更をサポートします。新しいソースのデータ構造 (フィールド構成) が以前のものと異なる場合は、列の構成も必ず更新してください。

grid.data = [...{
  /** ここにレコードを記述します */
}];

<igc-grid-lite>
    <!-- 新しいデータを表すために、必要に応じて列の構成を更新し、列を追加または削除します。 -->
    <igc-grid-lite-column field="id"></igc-grid-lite-column>
</igc-grid-lite>

グリッドで autoGenerate が有効になっている場合、データが変更されると新しい列の構成が自動的に推論されます。

grid.autoGenerate = true;

/** 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。 */
grid.data = [];

通常は clearSort() または clearFilter() を呼び出して、これらの状態をリセットすることをお勧めします。

以下のサンプルでは、グリッドで列の自動生成が有効になっています。データ切り替えボタンをクリックすると、列コレクションがリセットされ、新しいデータ ソースがグリッドにバインドされます。

API リファレンス

その他のリソース

• 列の構成
• ソート
• フィルタリング
• テーマ設定とスタイル設定

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

• Grid Lite GitHub