AG-Grid でフィルターされた後の件数をカウントする方法

はじめに

【全部俺】 Web フロントエンドエンジニアのメモ Advent Calendar 2022 12 日目の記事です。
AG-Grid で、フィルター後の件数を取得する方法を解説します。
(React 版 v28 を使用しています。)

フィルター後の件数を取得する関数がない

AG-Grid において、フィルター後の件数を取得する関数は用意されていないみたいです。
一方、公式デモでは選択中の件数を表示していたのでどのように行なっているのかソースコードを見てみました。
enterprise 版で用意されている Status bar の実装では、カウンターを用意し、 gridApi.forEachNodeAfterFilter() で回してカウントしていく方法が取られていました。 (ライセンスの都合上引用が出来ないので下記ソースコードをご確認ください。)
ag-grid/filteredRowsComp.ts at fc77919c164fb5bcd66a8b2897b20c318f5dd58e · ag-grid/ag-grid
https://github.com/ag-grid/ag-grid/blob/fc77919c164fb5bcd66a8b2897b20c318f5dd58e/enterprise-modules/status-bar/src/statusBar/providedPanels/filteredRowsComp.ts#L52-L61
フィルター後の Node 一覧を取得しゴリゴリ足していく方法しか無さそうです。

サンプル

Status bar の実装を参考に実装してみました。
import { AgGridReact } from "ag-grid-react";
import { useCallback, useState } from "react";

import type { AgGridEvent, ColDef, ModelUpdatedEvent } from "ag-grid-community";

type Data = { id: number; name: string };

export const DataGrid = (): JSX.Element => {
  const rowData: Array<Data> = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" },
    { id: 4, name: "Item 4" },
    { id: 5, name: "Item 5" },
  ];

  const columnDefs: ColDef<Data>[] = [
    { field: "id", filter: true, floatingFilter: true },
    { field: "name", filter: true, floatingFilter: true },
  ];

  const [filteredRowCount, setFilteredRowCount] = useState<number>(0);

  const onFilterChanged = useCallback((event: AgGridEvent): void => {
    let filteredRowCount = 0;
    event.api.forEachNodeAfterFilter(() => {
      filteredRowCount++;
    });
    setFilteredRowCount(filteredRowCount);
  }, []);

  const onModelUpdated = useCallback(
    (event: ModelUpdatedEvent): void => {
      onFilterChanged(event);
    },
    [onFilterChanged]
  );

  return (
    <>
      <AgGridReact<Data>
        rowData={rowData}
        columnDefs={columnDefs}
        onFilterChanged={onFilterChanged}
        onModelUpdated={onModelUpdated}
        domLayout="autoHeight"
      />
      count: {filteredRowCount}
    </>
  );
};

まとめ

AG-Grid でフィルター後の件数を取得できました。なんとなく辛みがあるので、AG-Grid に実装してほしいです。