AG Grid　テーブル内で特定の行を隠す・非表示にする方法 (React)

1/* eslint-disable @typescript-eslint/no-unused-vars */
2"use client";
3import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
4// Theme
5import { ColDef, ModuleRegistry } from "@ag-grid-community/core";
6import { AgGridReact } from "@ag-grid-community/react";
7// React Grid Logic
8import "@ag-grid-community/styles/ag-grid.css";
9// Core CSS
10import "@ag-grid-community/styles/ag-theme-quartz.css";
11import { useState } from "react";
12
13ModuleRegistry.registerModules([ClientSideRowModelModule]);
14
15// Row Data Interface
16interface IRow {
17  make: string;
18  model: string;
19  price: number;
20}
21
22type isReadOnly = {
23  value: boolean;
24};
25
26// Create new GridExample component
27const AGGridDemoTable = (props: isReadOnly) => {
28
29  const doesExternalFilterPass = (node: any) => {
30    if (node.data.price <= 30000) {
31      return false;
32    } else {
33      return true;
34    }
35  };
36
37  const { value } = props;
38  // Row Data: The data to be displayed.
39  const [rowData, setRowData] = useState<IRow[]>([
40    { make: "Tesla", model: "Model Y", price: 64950 },
41    { make: "Ford", model: "F-Series", price: 33850 },
42    { make: "Toyota", model: "Corolla", price: 29600 },
43    { make: "Mercedes", model: "EQA", price: 48890 },
44    { make: "Fiat", model: "500", price: 15774 },
45    { make: "Nissan", model: "Juke", price: 20675 },
46  ]);
47
48  // Column Definitions: Defines & controls grid columns.
49  const [colDefs, setColDefs] = useState<ColDef<IRow>[]>([
50    { field: "make" },
51    { field: "model" },
52    { field: "price" },
53  ]);
54
55  const defaultColDef: ColDef = {
56    flex: 1,
57    editable: true,
58  };
59
60  // Container: Defines the grid's theme & dimensions.
61  return (
62    <div
63      className={"ag-theme-quartz-dark"}
64      style={{ width: "100%", height: "100%" }}
65    >
66      <AgGridReact
67        rowData={rowData}
68        columnDefs={colDefs}
69        defaultColDef={defaultColDef}
70        readOnlyEdit={value}
71        doesExternalFilterPass={doesExternalFilterPass}
72        isExternalFilterPresent={() => true}
73      />
74    </div>
75  );
76};
77
78export default AGGridDemoTable;
79