or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

custom-cell-components.mdcustom-filter-components.mdcustom-header-components.mdcustom-ui-components.mdindex.mdmain-component.mdreact-hooks.mdutility-functions.md
tile.json

index.mddocs/

AG Grid React

AG Grid React provides a fully-featured React component wrapper for the AG Grid data grid library, enabling React developers to integrate high-performance data grids with comprehensive functionality including sorting, filtering, pagination, editing, and custom components.

Package Information

  • Package Name: ag-grid-react
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install ag-grid-react

Core Imports

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

For CommonJS:

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

Basic Usage

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>
  );
};

Architecture

AG Grid React is built around several key components:

  • AgGridReact Component: Main React wrapper component that renders the AG Grid and manages the React-specific lifecycle
  • Custom Component Integration: Comprehensive system for integrating React components as cell renderers, editors, filters, and other grid elements
  • React Hooks: Specialized hooks for managing custom component callbacks and grid integration
  • Context System: React context for passing methods between custom components and the grid
  • Type System: Full TypeScript support with generic types for data, context, and component props

Capabilities

Main Grid Component

Core AgGridReact component for rendering data grids with full AG Grid functionality integrated into React applications.

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;
}

Main Grid Component

Custom Cell Components

React component integration for cell rendering, editing, and custom cell behavior with type-safe props and lifecycle management.

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;
}

Custom Cell Components

Custom Filter Components

React component system for custom filters with model management and UI change notifications.

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;
}

Custom Filter Components

Custom Header Components

React components for customizing column headers and header groups with full interaction support.

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> {}

Custom Header Components

Custom UI Components

React components for overlays, tool panels, menu items, and other UI elements with state management and interaction handling.

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;
}

Custom UI Components

React Hooks Integration

Specialized React hooks for integrating custom component callbacks with the grid system.

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;

React Hooks Integration

Utility Functions

Helper functions for component integration and grid interaction management.

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

function warnReactiveCustomComponents(): void;

Utility Functions

Types

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> {}

Context

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

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