React Grid Lite データ バインディング
Grid Lite は、データ ソースとしてプレーン オブジェクトの配列を受け入れます。各グリッド行は配列内のデータ レコードをレンダリングしたもので、行のセルは列の設定に基づいて制御されます。
When applying data transformations, such as sorting and filtering, the grid does not modify the original data reference. That is to say, data transformations will not be reflected in the original source. The grid does not track changes to the objects inside the data array, so direct modification of the data objects will not be reflected.
実行時にデータ ソースを変更する
コンポーネントは実行時にデータ ソースの変更をサポートします。新しいソースが前のものと異なる「形状」を持つ場合、列の設定も更新する必要があります。
this.gridRef.current.data = [...{
/** レコードが続きます*/
}];
return (
<igc-grid-lite data={data}>
{/* 新しいデータを表すために、必要に応じて列の構成を更新し、列を追加または削除します。 */}
<igc-grid-lite-column field="id"></igc-grid-lite-column>
</igc-grid-lite>
);グリッドで autoGenerate が有効になっている場合、データが変更されると新しい列の構成が自動的に「推測されます」。
<IgbGridLite Data="data" AutoGenerate="true" />
@code {
// 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。
this.data = new List<T>();
}Grid Lite のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。
通常は clearSort() または clearFilter() を呼び出してリセットすることをお勧めします。
以下のサンプルでは、グリッドに列の自動生成が有効になっています。データ切り替えボタンをクリックすると、列コレクションがリセットされ、新しいデータ ソースがグリッドにバインドされます。
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。