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

目次

はじめに

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 に実装してほしいです ( enterprise ライセンス持っている方、何卒リクエストお願いします |д゚) )

シェア

Twitter
Facebook
はてブ
LinkedIn
LINE
Pocket