AG Grid React

import { AgGridReact } from "ag-grid-react";

const { AgGridReact } = require("ag-grid-react");

import React, { useState } 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 MyGrid = () => {
  const [rowData] = useState([
    { make: 'Ford', model: 'Mustang', price: 35000 },
    { make: 'Tesla', model: 'Model Y', price: 64000 },
    { make: 'Toyota', model: 'Prius', price: 32000 }
  ]);

  const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ]);

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

class AgGridReact<TData = any> extends React.Component<AgGridReactProps<TData>, object> {
  /** Grid Api available after onGridReady event has fired. */
  api: GridApi<TData>;
  
  /** Register API listener to be called when grid API becomes available */
  registerApiListener(listener: (api: GridApi) => void): void;
}

interface AgGridReactProps<TData = any> extends GridOptions<TData> {
  /** Grid options object */
  gridOptions?: GridOptions<TData>;
  /** AG Grid modules for individual grids */
  modules?: Module[];
  /** CSS style for grid's outermost div */
  containerStyle?: any;
  /** CSS class for grid's outermost div */
  className?: string;
  /** Wrapping element for React components (default: div) */
  componentWrappingElement?: string;
}

interface CustomCellRendererProps<TData = any, TValue = any, TContext = any>
  extends ICellRendererParams<TData, TValue, TContext> {}

interface CustomCellEditorProps<TData = any, TValue = any, TContext = any>
  extends ICellEditorParams<TData, TValue, TContext> {
  /** The value in the cell when editing started */
  initialValue: TValue | null | undefined;
  /** The current value for the editor */
  value: TValue | null | undefined;
  /** Callback that should be called every time the value in the editor changes */
  onValueChange: (value: TValue | null | undefined) => void;
}

interface CustomFilterProps<TData = any, TContext = any, TModel = any>
  extends BaseFilterParams<TData, TContext> {
  /** The current filter model for the component */
  model: TModel | null;
  /** Callback that should be called every time the model in the component changes */
  onModelChange: (model: TModel | null) => void;
  /** Callback for UI change notifications */
  onUiChange: () => void;
}

interface CustomFloatingFilterProps<P = IFilter, TData = any, TContext = any, TModel = any>
  extends IFloatingFilterParams<P, TData, TContext> {
  /** The current filter model for the component */
  model: TModel | null;
  /** Callback that should be called every time the model in the component changes */
  onModelChange: (model: TModel | null) => void;
}

interface CustomHeaderProps<TData = any, TContext = any> 
  extends IHeaderParams<TData, TContext> {}

interface CustomHeaderGroupProps<TData = any, TContext = any> 
  extends IHeaderGroupParams<TData, TContext> {}

interface CustomInnerHeaderProps<TData = any, TContext = any> 
  extends IHeaderParams<TData, TContext> {}

interface CustomInnerHeaderGroupProps<TData = any, TContext = any> 
  extends IHeaderGroupParams<TData, TContext> {}

interface CustomLoadingOverlayProps<TData = any, TContext = any>
  extends ILoadingOverlayParams<TData, TContext> {}

interface CustomNoRowsOverlayProps<TData = any, TContext = any> 
  extends INoRowsOverlayParams<TData, TContext> {}

interface CustomToolPanelProps<TData = any, TContext = any, TState = any>
  extends BaseToolPanelParams<TData, TContext, TState> {
  /** The current state for the component (used in grid state) */
  state: TState | undefined;
  /** Callback for state changes (required for grid state) */
  onStateChange: (model: TState | undefined) => void;
}

interface CustomMenuItemProps<TData = any, TContext = any> 
  extends BaseMenuItemParams<TData, TContext> {
  /** The active status of the item (hovered/navigated) */
  active: boolean;
  /** If the item is a sub menu, whether it is currently opened or closed */
  expanded: boolean;
  /** Callback for active status updates */
  onActiveChange: (active: boolean) => void;
}

function useGridCellEditor(callbacks: CustomCellEditorCallbacks): void;
function useGridDate(callbacks: CustomDateCallbacks): void;
function useGridFilter(callbacks: CustomFilterCallbacks): void;
function useGridFilterDisplay(callbacks: CustomFilterDisplayCallbacks): void;
function useGridFloatingFilter(callbacks: CustomFloatingFilterCallbacks): void;
function useGridMenuItem(callbacks: CustomMenuItemCallbacks): void;

function getInstance<TGridComponent, TCustomComponent>(
  wrapperComponent: TGridComponent, 
  callback: (customComponent: TCustomComponent | undefined) => void
): void;

function warnReactiveCustomComponents(): void;

interface CustomCellEditorCallbacks extends BaseCellEditor {}
interface CustomDateCallbacks extends BaseDate {}
interface CustomFilterCallbacks extends BaseFilter {}
interface CustomFilterDisplayCallbacks extends SharedFilterUi {}  
interface CustomFloatingFilterCallbacks extends BaseFloatingFilter {}
interface CustomMenuItemCallbacks extends BaseMenuItem {}

interface CustomDateProps<TData = any, TContext = any> extends BaseDateParams<TData, TContext> {
  /** The current date for the component */
  date: Date | null;
  /** Callback that should be called every time the date in the component changes */
  onDateChange: (date: Date | null) => void;
}

interface CustomDragAndDropImageProps<TData = any, TContext = any>
  extends IDragAndDropImageParams<TData, TContext> {
  /** The label provided by the grid about the item being dragged */
  label: string;
  /** The name of the icon provided by the grid about the current drop target */
  icon: string | null;
  /** True if the grid is attempting to scroll horizontally while dragging */
  shake: boolean;
}

interface CustomStatusPanelProps<TData = any, TContext = any> 
  extends IStatusPanelParams<TData, TContext> {}

interface CustomDetailCellRendererProps<TData = any, TDetail = any>
  extends IDetailCellRendererParams<TData, TDetail> {}

interface CustomGroupCellRendererProps<TData = any, TValue = any>
  extends IGroupCellRendererParams<TData, TValue> {}

interface CustomLoadingCellRendererProps<TData = any, TContext = any>
  extends ILoadingCellRendererParams<TData, TContext> {}

interface CustomTooltipProps<TData = any, TValue = any, TContext = any>
  extends ITooltipParams<TData, TValue, TContext> {}

interface CustomFilterDisplayProps<TData = any, TContext = any, TModel = any>
  extends FilterDisplayParams<TData, TContext, TModel> {}

interface CustomFloatingFilterDisplayProps<TData = any, TContext = any, TModel = any, TCustomParams = object>
  extends FloatingFilterDisplayParams<TData, TContext, TModel, TCustomParams> {}

const CustomComponentContext: React.Context<CustomContextParams<any>>;

interface CustomContextParams<M> {
  setMethods: (methods: M) => void;
}