Main Grid Component

/**
 * Main React component wrapper for AG Grid data grid functionality
 * @template TData - Type of row data objects
 */
class AgGridReact<TData = any> extends React.Component<AgGridReactProps<TData>, object> {
  /** Grid Api available after onGridReady event has fired. */
  public api: GridApi<TData>;
  
  /**
   * Register API listener to be called when grid API becomes available
   * @param listener - Function called with GridApi when available
   */
  public registerApiListener(listener: (api: GridApi) => void): void;
}

import React, { useRef, useState, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import type { GridApi } from 'ag-grid-community';

const MyGridComponent = () => {
  const gridRef = useRef<AgGridReact>(null);
  const [gridApi, setGridApi] = useState<GridApi | null>(null);

  const onGridReady = useCallback((params: { api: GridApi }) => {
    setGridApi(params.api);
  }, []);

  // Alternative way using registerApiListener
  const handleApiReady = useCallback(() => {
    if (gridRef.current) {
      gridRef.current.registerApiListener((api: GridApi) => {
        setGridApi(api);
      });
    }
  }, []);

  return (
    <AgGridReact
      ref={gridRef}
      onGridReady={onGridReady}
      // ... other props
    />
  );
};

/**
 * Props interface for AgGridReact component
 * @template TData - Type of row data objects
 */
interface AgGridReactProps<TData = any> extends GridOptions<TData> {
  /** Grid options object for additional configuration */
  gridOptions?: GridOptions<TData>;
  
  /** 
   * AG Grid modules for individual grids registration
   * @example modules={[ClientSideRowModelModule, CsvExportModule]}
   */
  modules?: Module[];
  
  /** CSS style object for grid's outermost div element */
  containerStyle?: React.CSSProperties;
  
  /** CSS class name for grid's outermost div element */
  className?: string;

  /** 
   * HTML element type for wrapping React components in portals
   * @default "div"
   */
  componentWrappingElement?: string;

  /** @deprecated v33.3 - No longer required, will be removed */
  maxComponentCreationTimeMs?: number;

  /** @deprecated v33.3 - Use onGridReady callback instead */
  setGridApi?: (gridApi: GridApi<TData>) => void;
  
  /** @deprecated v33.3 - AgGridReact does not accept children */
  children?: any;
}

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { AllCommunityModule } from 'ag-grid-community';

interface RowData {
  id: number;
  name: string;
  email: string;
}

const DataGrid = () => {
  const [rowData] = useState<RowData[]>([
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
  ]);

  const [columnDefs] = useState([
    { field: 'id', headerName: 'ID' },
    { field: 'name', headerName: 'Name' },
    { field: 'email', headerName: 'Email' }
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: 500 }}>
      <AgGridReact<RowData>
        rowData={rowData}
        columnDefs={columnDefs}
        modules={[AllCommunityModule]}
        className="my-grid"
        containerStyle={{ border: '1px solid #ccc' }}
        animateRows={true}
        pagination={true}
        paginationPageSize={10}
      />
    </div>
  );
};

/**
 * Internal props interface extending AgGridReactProps
 * @template TData - Type of row data objects
 */
interface InternalAgGridReactProps<TData = any> extends AgGridReactProps<TData> {
  /** Internal method to pass api to top level class component */
  passGridApi?: (gridApi: GridApi<TData>) => void;
}