ColDef Interface

The ColDef interface is used to define the configuration for individual columns in AG Grid. It combines display properties, behavior settings, and event handlers.

Overview

Column definitions are provided via the columnDefs property in GridOptions:

const gridOptions = {
  columnDefs: [
    {
      field: 'name',
      headerName: 'Full Name',
      sortable: true,
      filter: true,
      editable: true,
      cellRenderer: params => `<b>${params.value}</b>`
    },
    {
      field: 'age',
      type: 'numericColumn',
      filter: 'agNumberColumnFilter'
    }
  ]
};

Core Interface

ColDef Interface

interface ColDef<TData = any, TValue = any> extends AbstractColDef<TData, TValue>, IFilterDef {
  // Column identification
  colId?: string;
  field?: ColDefField<TData, TValue>;
  
  // Display
  headerName?: string;
  hide?: boolean | null;
  width?: number;
  
  // Behavior
  sortable?: boolean;
  filter?: any;
  editable?: boolean | EditableCallback<TData, TValue>;
  
  // Rendering
  cellRenderer?: any;
  cellEditor?: any;
  
  // ... and many more properties
}

Column Identification

colId

string

The unique ID to give the column. This is optional. If missing, the ID will default to the field. If both field and colId are missing, a unique ID will be generated. This ID is used to identify the column in the API for sorting, filtering etc.

{ colId: 'uniqueColumnId', headerName: 'My Column' }

field

ColDefField<TData, TValue>

The field of the row object to get the cell’s data from. Deep references into a row object is supported via dot notation, i.e 'address.firstLine'.

{ field: 'user.name' }
{ field: 'scores.0' } // array index access

Column Types

type

string | string[]

A comma separated string or array of strings containing ColumnType keys which can be used as a template for a column.

// Single type
{ field: 'age', type: 'numericColumn' }

// Multiple types
{ field: 'date', type: ['dateColumn', 'editableColumn'] }

Define reusable column types in columnTypes:

const gridOptions = {
  columnTypes: {
    numericColumn: {
      width: 100,
      filter: 'agNumberColumnFilter',
      cellStyle: { textAlign: 'right' }
    },
    dateColumn: {
      filter: 'agDateColumnFilter',
      valueFormatter: params => new Date(params.value).toLocaleDateString()
    }
  },
  columnDefs: [
    { field: 'age', type: 'numericColumn' },
    { field: 'birthDate', type: 'dateColumn' }
  ]
};

Value Handling

Value Getters and Formatters

valueGetter

string | ValueGetterFunc<TData, TValue>

Function or expression. Gets the value from your data for display.Parameters:

params.data: The row data
params.node: The row node
params.getValue(field): Utility to get other column values

{
  headerName: 'Full Name',
  valueGetter: params => {
    return params.data.firstName + ' ' + params.data.lastName;
  }
}

valueFormatter

string | ValueFormatterFunc<TData, TValue>

A function or expression to format a value, should return a string.

{
  field: 'price',
  valueFormatter: params => {
    return params.value == null ? '' : '$' + params.value.toFixed(2);
  }
}

valueSetter

string | ValueSetterFunc<TData, TValue>

Function or expression. Sets the value into your data for saving. Return true if the data changed.

{
  field: 'price',
  valueSetter: params => {
    const newValue = parseFloat(params.newValue);
    if (!isNaN(newValue) && newValue >= 0) {
      params.data.price = newValue;
      return true; // data changed
    }
    return false; // data not changed
  }
}

valueParser

string | ValueParserFunc<TData, TValue>

Function or expression. Parses the value for saving.

{
  field: 'quantity',
  editable: true,
  valueParser: params => Number(params.newValue)
}

Cell Rendering

cellRenderer

any

Provide your own cell Renderer component for this column’s cells. See Cell Renderer for framework specific implementation details.

// String reference to built-in renderer
{ field: 'value', cellRenderer: 'agAnimateShowChangeCellRenderer' }

// Function renderer
{
  field: 'status',
  cellRenderer: params => {
    return `<span class="status-${params.value}">${params.value}</span>`;
  }
}

// Component renderer
{ field: 'actions', cellRenderer: ActionsCellRenderer }

cellRendererParams

any

Params to be passed to the cellRenderer component.

{
  field: 'actions',
  cellRenderer: ActionsCellRenderer,
  cellRendererParams: {
    onEdit: (data) => console.log('Edit', data),
    onDelete: (data) => console.log('Delete', data)
  }
}

cellRendererSelector

CellRendererSelectorFunc<TData, TValue>

Callback to select which cell renderer to be used for a given row within the same column.

{
  field: 'content',
  cellRendererSelector: params => {
    if (params.data.type === 'image') {
      return { component: ImageRenderer };
    }
    return { component: TextRenderer };
  }
}

Cell Editing

editable

boolean | EditableCallback<TData, TValue>

default:"false"

Set to true if this column is editable, otherwise false. Can also be a function to have different rows editable.

// All rows editable
{ field: 'name', editable: true }

// Conditional editing
{
  field: 'price',
  editable: params => params.data.status === 'draft'
}

cellEditor

any

Provide your own cell editor component for this column’s cells. See Cell Editor for details.

// Built-in editors
{ field: 'country', editable: true, cellEditor: 'agSelectCellEditor' }
{ field: 'notes', editable: true, cellEditor: 'agLargeTextCellEditor' }

// Custom editor
{ field: 'rating', editable: true, cellEditor: CustomRatingEditor }

cellEditorParams

any

Params to be passed to the cellEditor component.

{
  field: 'status',
  editable: true,
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: {
    values: ['Active', 'Inactive', 'Pending']
  }
}

Sorting

sortable

boolean

default:"true"

Set to false to disable sorting which is enabled by default.

{ field: 'actions', sortable: false }

comparator

SortComparatorFn<TData, TValue>

Override the default sorting order by providing a custom sort comparator.Parameters:

valueA, valueB: The values to compare
nodeA, nodeB: The corresponding RowNodes
isDescending: true if sort direction is desc

Returns:

0: valueA is the same as valueB
> 0: Sort valueA after valueB
< 0: Sort valueA before valueB

{
  field: 'name',
  comparator: (valueA, valueB) => {
    return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
  }
}

Filtering

filter

any

Filter to use for this column.

Set to true to use the default filter.
Set to the name of a provided filter: 'agNumberColumnFilter', 'agTextColumnFilter', 'agDateColumnFilter', 'agSetColumnFilter'.
Set to a custom filter component.

{ field: 'name', filter: 'agTextColumnFilter' }
{ field: 'age', filter: 'agNumberColumnFilter' }
{ field: 'date', filter: 'agDateColumnFilter' }
{ field: 'custom', filter: MyCustomFilter }

filterParams

any

Params to be passed to the filter component specified in filter.

{
  field: 'age',
  filter: 'agNumberColumnFilter',
  filterParams: {
    buttons: ['apply', 'reset'],
    closeOnApply: true,
    maxNumConditions: 2
  }
}

floatingFilter

boolean

default:"false"

Whether to display a floating filter for this column.

{ field: 'name', filter: true, floatingFilter: true }

Styling

cellClass

string | string[] | CellClassFunc<TData, TValue>

Class to use for the cell. Can be string, array of strings, or function that returns a string or array of strings.Module: CellStyleModule

// Static class
{ field: 'status', cellClass: 'status-cell' }

// Multiple classes
{ field: 'priority', cellClass: ['cell', 'priority-cell'] }

// Dynamic classes
{
  field: 'value',
  cellClass: params => {
    if (params.value < 0) return 'negative';
    if (params.value > 0) return 'positive';
    return 'zero';
  }
}

cellStyle

CellStyle | CellStyleFunc<TData, TValue>

An object of CSS values / or function returning an object of CSS values for a particular cell.Module: CellStyleModule

{
  field: 'value',
  cellStyle: params => {
    if (params.value < 0) {
      return { color: 'red', fontWeight: 'bold' };
    }
    return { color: 'green' };
  }
}

cellClassRules

CellClassRules<TData, TValue>

Rules which can be applied to include certain CSS classes.Module: CellStyleModule

{
  field: 'age',
  cellClassRules: {
    'rag-green': params => params.value >= 18,
    'rag-amber': params => params.value >= 12 && params.value < 18,
    'rag-red': params => params.value < 12
  }
}

Events

onCellValueChanged

(event: NewValueParams<TData, TValue>) => void

Callback for after the value of a cell has changed, either due to editing or the application calling api.setValue().

{
  field: 'price',
  editable: true,
  onCellValueChanged: event => {
    console.log('Price changed from', event.oldValue, 'to', event.newValue);
  }
}

onCellClicked

(event: CellClickedEvent<TData, TValue>) => void

Callback called when a cell is clicked.

{
  field: 'actions',
  onCellClicked: event => {
    console.log('Cell clicked:', event.data);
  }
}

Column Groups

ColGroupDef Interface

interface ColGroupDef<TData = any> extends AbstractColDef<TData> {
  children: (ColDef<TData> | ColGroupDef<TData>)[];
  groupId?: string;
  openByDefault?: boolean;
  marryChildren?: boolean;
}

children

(ColDef<TData> | ColGroupDef<TData>)[]

A list containing a mix of columns and column groups.

{
  headerName: 'User Details',
  children: [
    { field: 'firstName' },
    { field: 'lastName' },
    { field: 'email' }
  ]
}

groupId

string

The unique ID to give the column group. This is optional. If missing, a unique ID will be generated.

{
  groupId: 'userGroup',
  headerName: 'User',
  children: [...]
}

marryChildren

boolean

default:"false"

Set to true to keep columns in this group beside each other in the grid. Moving the columns outside of the group (and hence breaking the group) is not allowed.

{
  headerName: 'Name',
  marryChildren: true,
  children: [
    { field: 'firstName' },
    { field: 'lastName' }
  ]
}

Column Properties

Detailed property reference

GridOptions

Grid-level configuration

Cell Renderer

Custom cell rendering

Core API

Column Types

Events

Components

ColDef Interface

Overview

Core Interface

ColDef Interface

Column Identification

Column Types

Value Handling

Cell Rendering

Cell Editing

Sorting

Filtering

Styling

Events

Column Groups

ColGroupDef Interface

Column Properties

GridOptions

Cell Renderer

Core API

Column Types

Events

Components

​Overview

​Core Interface

​ColDef Interface

​Column Identification

​Column Types

​Value Handling

​Cell Rendering

​Cell Editing

​Sorting

​Filtering

​Styling

​Events

​Column Groups

​ColGroupDef Interface

​Related APIs

Column Properties

GridOptions

Cell Renderer

Overview

Core Interface

ColDef Interface

Column Identification

Column Types

Value Handling

Cell Rendering

Cell Editing

Sorting

Filtering

Styling

Events

Column Groups

ColGroupDef Interface

Related APIs