请看到一个简单的柱塞与AG网格React包含下面的代码片段。在这个柱塞示例中，onGridReady事件一旦接收到数据，我就向每一行添加Date对象。并且Date对象显示在网格中。

转载：

1.开启柱塞连杆
1.刷新预览

柱塞示例：https://plnkr.co/edit/q0tT2ER9G6B6OBkK?preview

import React, { useCallback, useMemo, useRef, useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);

  const [rowData, setRowData] = useState();

  const [columnDefs, setColumnDefs] = useState([
    { field: 'country', maxWidth: 200 },
    { field: 'date', width: 500 },
  ]);

  const onGridReady = useCallback((params) => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((resp) => resp.json())
      .then((data) =>
        setRowData(data.map((oneRow) => ({ ...oneRow, date: new Date() })))
      );
  }, []);

  return (
    <div style={containerStyle}>
      <div style={containerStyle} className="ag-theme-alpine">
        <AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}
          onGridReady={onGridReady}
        ></AgGridReact>
      </div>
    </div>
  );
};