import React, { useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const MyGrid = () => {
  const gridRef = useRef(null);

  const onGridReady = (params) => {
    gridRef.current = params.api;
    // 现在可以使用 gridRef.current 进行操作
    console.log(gridRef.current);
  };

  const columnDefs = [
    { headerName: 'ID', field: 'id' },
    { headerName: 'Value', field: 'value' },
  ];

  const rowData = [
    { id: 1, value: 'Data 1' },
    { id: 2, value: 'Data 2' },
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: '400px', width: '600px' }}>
      <AgGridReact
        ref={gridRef}
        columnDefs={columnDefs}
        rowData={rowData}
        onGridReady={onGridReady}
      />
    </div>
  );
};

export default MyGrid;