React Grid Lite データ バインディング

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

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

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

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

/* 最初に初期データを設定します */
const [data, setData] = React.useState([/* 初期データ */]);

/* 次に、イベント ハンドラーまたは useEffect 内で setData を使用してデータを更新します */
const updateData = () => {
  setData([]);
};

return (
    <>
        <IgrButton onClick={updateData}>Update Data</IgrButton>
        <IgrGridLite data={data}>
            {/* 新しいデータを表すために、必要に応じて列の構成を更新し、列を追加または削除します。 */}
            <IgrGridLiteColumn field="id"></IgrGridLiteColumn>
        </IgrGridLite>
    </>
);

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

const [data, setData] = React.useState([/* 初期データ */]);


/** 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。 */
const updateData = () => {
  setData([/* 新しいデータ */]);
};

return (
    <>
        <IgrButton onClick={updateData}>Update Data</IgrButton>
        <IgrGridLite id="grid-lite" data={data} autoGenerate={true} />
    </>
);

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

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

その他のリソース

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

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

• Grid Lite GitHub