Skip to main content
The ICellRendererComp interface allows you to create custom components for rendering cell content in AG Grid. Cell renderers control how data is displayed in individual cells.

​
Overview

Create custom cell renderers to display complex content, add interactivity, or format data in ways that go beyond simple text formatting. 
const gridOptions = {
  columnDefs: [
    {
      field: 'status',
      cellRenderer: StatusCellRenderer
    }
  ]
};

​
Interface Definition

interface ICellRendererComp<TData = any> extends IComponent<ICellRendererParams<TData>>, ICellRenderer<TData> {
  /** Component lifecycle method */
  init(params: ICellRendererParams<TData>): void;
  
  /** Get the cell to refresh */
  refresh(params: ICellRendererParams<TData>): boolean;
  
  /** Return the DOM element */
  getGui(): HTMLElement;
  
  /** Optional: Clean up resources */
  destroy?(): void;
}

​
ICellRendererParams

​
value
TValue | null | undefined
Value to be rendered.
// In your cell renderer
init(params) {
  const value = params.value;
  this.eGui.innerHTML = value ? String(value) : '';
}
​
valueFormatted
string | null | undefined
Formatted value to be rendered (if a valueFormatter was provided).
init(params) {
  const displayValue = params.valueFormatted || params.value;
  this.eGui.textContent = displayValue;
}
​
data
TData | undefined
The row’s data. Data property can be undefined when row grouping or loading infinite row models.
init(params) {
  if (params.data) {
    // Access other fields
    const fullName = `${params.data.firstName} ${params.data.lastName}`;
  }
}
​
node
IRowNode<TData>
The row node.
init(params) {
  if (params.node.group) {
    // This is a group row
    this.eGui.textContent = params.node.key;
  }
}
​
colDef
ColDef<TData, TValue>
The cell’s column definition.
init(params) {
  const field = params.colDef.field;
  console.log('Rendering column:', field);
}
​
column
Column<TValue>
The cell’s column.
init(params) {
  const columnId = params.column.getId();
}
​
eGridCell
HTMLElement
The grid’s cell, a DOM div element.
init(params) {
  // Add event listener to grid cell
  params.eGridCell.addEventListener('keydown', this.onKeyDown);
}
​
eParentOfValue
HTMLElement
The parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection.
init(params) {
  params.eParentOfValue.appendChild(this.eGui);
}

​
Utility Methods

​
getValue
() => TValue | null | undefined
Convenience function to get most recent up to data value.
refresh(params) {
  const latestValue = params.getValue();
  this.updateDisplay(latestValue);
  return true;
}
​
setValue
(value: TValue | null | undefined) => void
Convenience function to set the value.
onClick() {
  const newValue = calculateNewValue();
  this.params.setValue(newValue);
}
​
formatValue
(value: TValue | null | undefined) => string
Convenience function to format a value using the column’s formatter.
init(params) {
  const formatted = params.formatValue(params.value);
  this.eGui.textContent = formatted;
}
​
refreshCell
() => void
Convenience function to refresh the cell.
onExternalDataChange() {
  this.params.refreshCell();
}
​
registerRowDragger
(rowDraggerElement: HTMLElement, dragStartPixels?: number, value?: string, suppressVisibilityChange?: boolean) => void
Register an element as a row dragger.Parameters:
  • rowDraggerElement: The HTMLElement to be used as Row Dragger
  • dragStartPixels: The amount of pixels required to start the drag (Default: 4)
  • value: The value to be displayed while dragging
  • suppressVisibilityChange: Set to true to prevent the Grid from hiding the Row Dragger when it is disabled
Module: RowDragModule
init(params) {
  const dragHandle = document.createElement('div');
  dragHandle.className = 'drag-handle';
  dragHandle.innerHTML = '⋮⋮';
  params.registerRowDragger(dragHandle, 4);
  this.eGui.appendChild(dragHandle);
}
​
setTooltip
(value: string, shouldDisplayTooltip?: () => boolean) => void
Sets a tooltip to the main element of this component.Parameters:
  • value: The value to be displayed by the tooltip
  • shouldDisplayTooltip: A function returning a boolean that allows the tooltip to be displayed conditionally
Module: TooltipModule
init(params) {
  params.setTooltip('Click to view details');
}

​
Required Methods

​
init
(params: ICellRendererParams<TData>) => void
Called once when the component is created. Use this to set up your component.
init(params) {
  this.params = params;
  this.eGui = document.createElement('div');
  this.eGui.innerHTML = `<span>${params.value}</span>`;
}
​
getGui
() => HTMLElement
Return the DOM element for your cell renderer.
getGui() {
  return this.eGui;
}
​
refresh
(params: ICellRendererParams<TData>) => boolean
Get the cell to refresh. Return true if successful. Return false if not (or you don’t have refresh logic), then the grid will refresh the cell for you.
refresh(params) {
  // Update the display with new value
  this.eGui.querySelector('span').textContent = params.value;
  return true; // Refresh was successful
}

​
Optional Methods

​
destroy
() => void
Optional: Gets called once when the component is being removed. Use this to clean up any resources.
destroy() {
  // Clean up event listeners
  this.button.removeEventListener('click', this.onClick);
}

​
Complete Example

class ButtonCellRenderer {
  init(params) {
    this.params = params;
    this.eGui = document.createElement('button');
    this.eGui.className = 'btn-cell-renderer';
    this.eGui.textContent = params.value || 'Click';
    
    // Add click handler
    this.onClick = this.onClick.bind(this);
    this.eGui.addEventListener('click', this.onClick);
  }
  
  onClick(event) {
    // Prevent row selection when clicking button
    event.stopPropagation();
    
    if (this.params.clicked) {
      this.params.clicked(this.params.data);
    }
  }
  
  getGui() {
    return this.eGui;
  }
  
  refresh(params) {
    this.params = params;
    this.eGui.textContent = params.value || 'Click';
    return true;
  }
  
  destroy() {
    this.eGui.removeEventListener('click', this.onClick);
  }
}

// Usage
const gridOptions = {
  columnDefs: [
    {
      field: 'action',
      cellRenderer: ButtonCellRenderer,
      cellRendererParams: {
        clicked: (data) => {
          console.log('Button clicked for:', data);
        }
      }
    }
  ]
};

Cell Editor

Create custom cell editors

Column Definitions

Configure cell renderers in columns

GridOptions

Grid-level component configuration