马克

import React, { useMemo, useEffect, useState, useRef, memo, useCallback } from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/styles//ag-grid.css";
import "ag-grid-community/styles//ag-theme-alpine.css";
const setText = (selector, text) => {
  document.querySelector(selector).innerHTML = text;
};
export default function AgGrid2() {
  const gridRef = useRef();
  const [rowData, setRowData] = useState();
  const [colDefs, setColDefs] = useState([
    { field: "make" },
    { field: "model" },
    { field: "price", editable: "true" },
  ]);

  // because row data changes, it needs to be state
  useEffect(() => {
    fetch("https://www.ag-grid.com/example-assets/row-data.json")
      .then((resp) => resp.json())
      .then((data) => setRowData(data));
  }, []);

  const onClickIncreaseMedals = useCallback(() => {
    // 会了
    console.log(gridRef);
    const gridApi = gridRef.current.api;
    gridApi.forEachNode((rowNode) => {
      ["make", "model"].forEach((colId) => {
        const currentVal = gridApi.getValue(colId, rowNode);
        // console.log(currentVal);
        rowNode.setDataValue(colId, currentVal + 1);
      });
    });
  });

  const onPaginationChanged = useCallback(() => {
    console.log("onPaginationPageLoaded");
    // Workaround for bug in events order
    if (gridRef.current.api) {
    }
  }, []);
  const onBtPageFifty = useCallback((params) => {
    gridRef.current.api.paginationGoToPage(4);
  }, []);

  return (
    <>
      <button onClick={onBtPageFifty}>To Page 50</button>
      <button onClick={onClickIncreaseMedals}>Increase Medals</button>
      <div className='ag-theme-alpine' style={{ height: 400, width: 600 }}>
        <AgGridReact
          ref={gridRef}
          defaultColDef={{ sortable: true, filter: true }}
          pagination={true}
          columnDefs={colDefs}
          rowData={rowData}
          paginationPageSize={3}
          onPaginationChanged={onPaginationChanged}
          // onFirstDataRendered={onFirstDataRendered}
        />
      </div>
    </>
  );
}

自定义

import { AgGridReact } from "ag-grid-react";
// import 'ag-grid-enterprise';
import MoodRenderer from "./moodRenderer.jsx";
import GenderRenderer from "./genderRenderer.jsx";

import "ag-grid-community/styles//ag-grid.css";
import "ag-grid-community/styles//ag-theme-alpine.css";
const setText = (selector, text) => {
  document.querySelector(selector).innerHTML = text;
};
export default function AgGrid2() {
  const gridRef = useRef();

  const onClickIncreaseMedals = useCallback(() => {
    console.log(gridRef);
    const gridApi = gridRef.current.api;
    gridApi.forEachNode((rowNode) => {
      ["make", "model"].forEach((colId) => {
        const currentVal = gridApi.getValue(colId, rowNode);
        // console.log(currentVal);
        rowNode.setDataValue(colId, currentVal + 1);
      });
    });
  });

  const onPaginationChanged = useCallback(() => {
    console.log("onPaginationPageLoaded");
    // if (gridRef.current.api) {
    //   setText("#lbLastPageFound", gridRef.current.api.paginationIsLastPageFound());
    //   setText("#lbPageSize", gridRef.current.api.paginationGetPageSize());
    //   setText("#lbCurrentPage", gridRef.current.api.paginationGetCurrentPage() + 1);
    //   setText("#lbTotalPages", gridRef.current.api.paginationGetTotalPages());
    // }
  }, []);

  const onBtPageFifty = useCallback((params) => {
    console.log(gridRef);
    // 这个可以更新表格数据
    const gridApi = gridRef.current.api;
    gridApi.setRowData([{ make: "Porsche", model: "Boxter", price: 72000 }]);

    gridRef.current.api.paginationGoToPage(4);
  }, []);

  // new!!
  const [rowData, setRowData] = useState([
    { value: 14, type: "age" },
    { value: "female", type: "gender" },
    { value: "Happy", type: "mood" },
    { value: 21, type: "age" },
    { value: "male", type: "gender" },
    { value: "Sad", type: "mood" },
  ]);

  const [columnDefs, setColumnDefs] = useState([
    { field: "value" },
    {
      headerName: "Rendered Value",
      field: "value",
      cellRendererSelector: (params) => {
        console.log(params)
        const moodDetails = {
          component: MoodRenderer,
        };
        const genderDetails = {
          component: GenderRenderer,
          params: { values: ["Male", "Female"] },
        };
        if (params.data) {
          if (params.data.type === "gender") return genderDetails;
          else if (params.data.type === "mood") return moodDetails;
        }
        return undefined;
      },
    },
    { field: "type" },
  ]);
  return (
    <>
      <button onClick={onBtPageFifty}>To Page 50</button>
      <button onClick={onClickIncreaseMedals}>Increase Medals</button>
      <div className='ag-theme-alpine' style={{ height: 400, width: 600 }}>
        <AgGridReact
          //   ref={gridRef}
          defaultColDef={{ sortable: true, sortable: true, filter: true }}
          columnDefs={columnDefs}
          rowData={rowData}
          // 这个 证书 才能做。。。。
          // 看下 子组件 需要证书吗   => 需要
          //   pagination={true}
          //   paginationPageSize={10}
          //   cacheBlockSize={10}
          //   animateRows={true}
          //   onGridReady={onGridReady}
        />
      </div>
    </>
  );
}