IgrGrid – フィルター後のデータを取得したい

IgrGrid でフィルターを適用した後のデータを取得する方法について説明します。

グリッドの参照を作成する

useRefフックを使用して、グリッドの参照を作成します。
これにより、グリッドのインスタンスにアクセスできるようになります。

import { useRef } from "react";
....
export const App = () => {
  const gridRef = useRef<IgrGrid>(null); 
  ....
  }

フィルタリング完了時のイベントハンドラーを定義する

フィルタリングが完了したときに呼び出されるイベントハンドラーを定義します。
本記事ではこのハンドラー内で、フィルター後のデータを取得しコンソールに出力します。

export const App = () => {
  const gridRef = useRef<IgrGrid>(null);
  function OnFilteringDone() {
    const grid = gridRef.current;
    if (grid) {
      const currentData = grid.dataView;
      console.log("Filtering Done Data View:\n", JSON.stringify(currentData, null, 2));
    }
  }

IgrGrid コンポーネントの構築

IgrGrid コンポーネントを設定し、フィルタリング完了時のイベントハンドラーをfilteringDoneプロパティに割り当てます。

<IgrGrid ....
        ref={gridRef}
        allowFiltering="true"
        filteringDone={OnFilteringDone} // フィルタリングが完了したときに呼び出されます
      >
      ....
</IgrGrid>

これらの実装より、フィルターを適用した後のデータを取得することができます。

実行結果

上図のように Country でフィルタリングしたときのデータを取得すると、下記のようになります。

Filtering Done Data View:
 [
  {
    "id": 4,
    "name": "Doe",
    "country": "Japan",
    "age": 20
  },
  {
    "id": 19,
    "name": "Sophia",
    "country": "Japan",
    "age": 23
  },
  {
    "id": 34,
    "name": "Owen",
    "country": "Japan",
    "age": 31
  },
  {
    "id": 49,
    "name": "Chloe",
    "country": "Japan",
    "age": 22
  }
]

関連ドキュメント

• React Grid フィルタリング – Ignite UI for React