Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Column Properties

Properties are available for columns ColDef and column groups ColGroupDef. For column groups, the property children is mandatory. When the grid sees children it knows it's a column group.

Columns

field
string
The field of the row to get the cells data from
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.
type
string | string[]
A comma separated string or array of strings containing ColumnType keys which can be used as a template for a column. This helps to reduce duplication of properties when you have a lot of common column properties. See Column Types.
valueGetter
string | ValueGetterFunc
Function or expression. Gets the value from your data for display. See Value Getters.
valueGetter: string | ValueGetterFunc;

interface ValueGetterFunc {
    (params: ValueGetterParams) : any
}

interface ValueGetterParams {
  // A utility method for getting other column values 
  getValue: (field: string) => any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
valueFormatter
string | ValueFormatterFunc
A function or expression to format a value, should return a string. Not used for CSV export or copy to clipboard, only for UI cell rendering. See Value Formatters.
valueFormatter: string | ValueFormatterFunc;

interface ValueFormatterFunc {
    (params: ValueFormatterParams) : string
}

interface ValueFormatterParams {
  // Value for the cell. 
  value: any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
refData
{ [key: string]: string; }
Provided a reference data map to be used to map column values to their respective value from the map. See Using the 'refData' Property.
keyCreator
Function
Function to return a string key for a value. This string is used for grouping, Set filtering, and searching within cell editor dropdowns. When filtering and searching the string is exposed to the user, so make sure to return a human-readable value.
keyCreator = (
    params: KeyCreatorParams
) => string;

interface KeyCreatorParams {
  // Value for the cell. 
  value: any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
equals
Function
Custom comparator for values, used by renderer to know if values have changed. Cells who's values have not changed don't get refreshed. By default the grid uses === is used which should work for most use cases. See Change Detection Comparing Values.
equals = (
    valueA: any,
    valueB: any
) => boolean;
tooltipField
string
The field of the tooltip to apply to the cell.
tooltipValueGetter
Function
Callback that should return the string used for a tooltip, tooltipField takes precedence if set.
tooltipValueGetter = (params: ITooltipParams) => string;

interface ITooltipParams {
  // What part of the application is showing the tooltip, e.g. 'cell', 'header', 'menuItem' etc 
  location: string;
  // The value to be rendered by the tooltip. 
  value?: any;
  // The formatted value to be rendered by the tooltip. 
  valueFormatted?: any;
  // Column / ColumnGroup definition. 
  colDef?: ColDef | ColGroupDef | null;
  // Column / ColumnGroup 
  column?: Column | ColumnGroup;
  // The index of the row containing the cell rendering the tooltip. 
  rowIndex?: number;
  // The row node. 
  node?: RowNode;
  // Data for the row node in question. 
  data?: any;
  // Context as set on gridOptions.context. 
  context?: any;
  api?: GridApi;
  columnApi?: ColumnApi;
}
checkboxSelection
boolean | CheckboxSelectionCallback
boolean or Function. Set to true (or return true from function) to render a selection checkbox in the column.
Default: false
checkboxSelection: boolean | CheckboxSelectionCallback;

interface CheckboxSelectionCallback {
    (params: CheckboxSelectionCallbackParams) : boolean
}

interface CheckboxSelectionCallbackParams {
  // Row node for the given row 
  node: RowNode;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
toolPanelClass
ToolPanelClass
CSS class to use for the tool panel cell. Can be a string, array of strings, or function.
toolPanelClass: ToolPanelClass;

type ToolPanelClass = 
      string 
    | string[] 
    | ((params: ToolPanelClassParams) => string | string[])


interface ToolPanelClassParams {
  api: GridApi;
  colDef: AbstractColDef;
  column?: Column | null;
  columnGroup?: ColumnGroup | ProvidedColumnGroup | null;
  context?: any;
}
suppressColumnsToolPanel
boolean
Set to true if you do not want this column or group to appear in the Columns Tool Panel.
Default: false
columnGroupShow
string
Whether to show the column when the group is open / closed.
icons
{ [key: string]: Function | string; }
Icons to use inside the column instead of the grid's default icons. Leave undefined to use defaults. See Custom Icons.
suppressNavigable
boolean | SuppressNavigableCallback
Set to true if this column is not navigable (i.e. cannot be tabbed into), otherwise false. Can also be a callback function to have different rows navigable.
Default: false
suppressNavigable: boolean | SuppressNavigableCallback;

interface SuppressNavigableCallback {
    (params: SuppressNavigableCallbackParams) : boolean
}

interface SuppressNavigableCallbackParams {
  // Row node for the given row 
  node: RowNode;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
suppressKeyboardEvent
Function
Allows the user to suppress certain keyboard events in the grid cell. See Suppress Keyboard Events.
Default: false
suppressKeyboardEvent = (
    params: SuppressKeyboardEventParams
) => boolean;

interface SuppressKeyboardEventParams {
  // The keyboard event the grid received 
  event: KeyboardEvent;
  // Whether the cell is editing or not 
  editing: boolean;
  // Row node for the given row 
  node: RowNode;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
suppressPaste
boolean | SuppressPasteCallback
Pasting is on by default as long as cells are editable (non-editable cells cannot be modified, even with a paste operation). Set to true turn paste operations off.
suppressPaste: boolean | SuppressPasteCallback;

interface SuppressPasteCallback {
    (params: SuppressPasteCallbackParams) : boolean
}

interface SuppressPasteCallbackParams {
  // Row node for the given row 
  node: RowNode;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
suppressFillHandle
boolean
Set to true to prevent the fillHandle from being rendered in any cell that belongs to this column See Suppressing the Fill Handle.

Columns: Display

hide
boolean
Set to true for this column to be hidden.
Default: false
initialHide
boolean
Same as hide, except only applied when creating a new column. Not applied when updating column definitions.
lockVisible
boolean
Set to true to block making column visible / hidden via the UI (API will still work).
Default: false
lockPosition
boolean
Set to true to always have this column displayed first.
Default: false
suppressMovable
boolean
Set to true if you do not want this column to be movable via dragging.
Default: false

Columns: Editing

editable
boolean | EditableCallback
Set to true if this column is editable, otherwise false. Can also be a function to have different rows editable.
Default: false
editable: boolean | EditableCallback;

interface EditableCallback {
    (params: EditableCallbackParams) : boolean
}

interface EditableCallbackParams {
  // Row node for the given row 
  node: RowNode;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
valueSetter
string | ValueSetterFunc
Function or expression. Sets the value into your data for saving. Return true if the data changed.
valueSetter: string | ValueSetterFunc;

interface ValueSetterFunc {
    (params: ValueSetterParams) : boolean
}

interface ValueSetterParams {
  // The value before the change 
  oldValue: any;
  // The value after the change 
  newValue: any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
valueParser
string | ValueParserFunc
Function or expression. Parses the value for saving.
valueParser: string | ValueParserFunc;

interface ValueParserFunc {
    (params: ValueParserParams) : any
}

interface ValueParserParams {
  // The value before the change 
  oldValue: any;
  // The value after the change 
  newValue: any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
cellEditor
string | { new(): ICellEditorComp; }
A cellEditor to use for this column. See Cell Editors.
cellEditorFramework
any
Framework cellEditor to use for this column. See Cell Editors.
cellEditorParams
any
Params to be passed to the cell editor component.
cellEditorSelector
Function
Callback to select which cell editor to be used for a given row within the same column. See Many Editors One Column.
cellEditorSelector = (
    params: ICellEditorParams
) => CellEditorSelectorResult | undefined;

interface CellEditorSelectorResult {
  // Equivalent of setting `colDef.cellEditor` 
  component?: { new (): ICellEditorComp; } | string;
  // Equivalent of setting `colDef.cellEditorFramework` 
  frameworkComponent?: any;
  // Equivalent of setting `colDef.cellEditorParams` 
  params?: any;
}
cellEditorPopup
boolean
Set to true, to have the cell editor appear in a popup.
cellEditorPopupPosition
string
Set the position for the popup cell editor. Possible values are - over Popup will be positioned over the cell - under Popup will be positioned below the cell leaving the cell value visible.
Default: over.
singleClickEdit
boolean
Set to true to have cells under this column enter edit mode after single click.
Default: false

Columns: Events

onCellValueChanged
NewValueParams
Callback for after the value of a cell has changed, either due to editing or the application calling api.setValue().
onCellValueChanged = (event: NewValueParams) => void;

interface NewValueParams {
  // The value before the change 
  oldValue: any;
  // The value after the change 
  newValue: any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
onCellClicked
CellClickedEvent
Callback called when a cell is clicked.
onCellClicked = (
    event: CellClickedEvent
) => void;

interface CellClickedEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
onCellDoubleClicked
CellDoubleClickedEvent
Callback called when a cell is double clicked.
onCellDoubleClicked = (
    event: CellDoubleClickedEvent
) => void;

interface CellDoubleClickedEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}
onCellContextMenu
CellContextMenuEvent
Callback called when a cell is right clicked.
onCellContextMenu = (
    event: CellContextMenuEvent
) => void;

interface CellContextMenuEvent {
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
  node: RowNode;
  // The user provided data for the row 
  data: any;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: string | null;
  // The context as provided on `gridOptions.context` 
  context: any;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  api: GridApi;
  columnApi: ColumnApi;
  // Event identifier 
  type: string;
}

Columns: Filter

filter
IFilterType
Filter component to use for this column.
Set to true to use the default filter.
Set to the name of a provided filter or set to a IFilterComp. See Configuring Filters.
filter: IFilterType;

type IFilterType = 
      string 
    | { new (): IFilterComp; } 
    | boolean
filterFramework
any
Provided a custom framework filter to use for this column. See Custom Filter.
filterParams
any
Params to be passed to the filter component specified in filter or filterFramework. See Filter Parameters.
filterValueGetter
string | ValueGetterFunc
Function or expression. Gets the value for filtering purposes.
filterValueGetter: string | ValueGetterFunc;

interface ValueGetterFunc {
    (params: ValueGetterParams) : any
}

interface ValueGetterParams {
  // A utility method for getting other column values 
  getValue: (field: string) => any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
getQuickFilterText
Function
A function to tell the grid what quick filter text to use for this column if you don't want to use the default (which is calling toString on the value). See Overriding the Quick Filter Value.
getQuickFilterText = (
    params: GetQuickFilterTextParams
) => string;

interface GetQuickFilterTextParams {
  value: any;
  node: RowNode;
  data: any;
  column: Column;
  colDef: ColDef;
  // The context as provided on `gridOptions.context` 
  context: any;
}
floatingFilter
boolean
Whether to display a floating filter for this column. See Floating Filter.
Default: false
floatingFilterComponent
IFloatingFilterType
The custom component to be used for rendering the floating filter. If none is specified the default AG Grid is used. See Floating Filter Component.
floatingFilterComponent: IFloatingFilterType;

type IFloatingFilterType = 
      string 
    | { new (): IFloatingFilterComp; }
floatingFilterComponentFramework
any
Floating filter framework component to use for this column. See Floating Filter Component.
floatingFilterComponentParams
any
Params to be passed to floatingFilterComponent or floatingFilterComponentFramework. See Floating Filter Parameters.
suppressFiltersToolPanel
boolean
Set to true if you do not want this column (filter) or group (filter group) to appear in the Filters Tool Panel.
Default: false

Columns: Header

headerName
string
The name to render in the column header. If not specified and field is specified, the field name will be used as the header name.
headerValueGetter
string | HeaderValueGetterFunc
Function or expression. Gets the value for display in the header.
headerValueGetter: string | HeaderValueGetterFunc;

interface HeaderValueGetterFunc {
    (params: HeaderValueGetterParams) : any
}

interface HeaderValueGetterParams {
  colDef: AbstractColDef;
  // Column for this callback if applicable 
  column?: Column | null;
  // ColumnGroup for this callback if applicable 
  columnGroup?: ColumnGroup | ProvidedColumnGroup | null;
  // Original column group if applicable 
  originalColumnGroup: ProvidedColumnGroup | null;
  // Where the column is going to appear 
  location: string | null;
  api: GridApi;
  // The context as provided on `gridOptions.context` 
  context?: any;
}
headerTooltip
string
Tooltip for the column header
headerClass
HeaderClass
CSS class to use for the header cell. Can be a string, array of strings, or function.
headerClass: HeaderClass;

type HeaderClass = 
      string 
    | string[] 
    | ((params: HeaderClassParams) => string | string[])


interface HeaderClassParams {
  api: GridApi;
  colDef: AbstractColDef;
  column?: Column | null;
  columnGroup?: ColumnGroup | ProvidedColumnGroup | null;
  context?: any;
}
headerComponent
string | { new(): any; }
The custom header component to be used for rendering the component header. If none specified the default AG Grid header component is used. See Header Component.
headerComponentFramework
any
The custom header component to be used for rendering the component header in the hosting framework (ie: Angular/React/VueJs). If none specified the default AG Grid header component is used. See Header Component.
headerComponentParams
any
The parameters to be passed to the header component.
menuTabs
string[]
Set to an array containing zero, one or many of the following options: 'filterMenuTab' | 'generalMenuTab' | 'columnsMenuTab'. This is used to figure out which menu tabs are present and in which order the tabs are shown.
columnsMenuParams
ColumnsMenuParams
Params used to change the behaviour and appearance of the Columns Menu tab. See Customising the Columns Menu Tab.
columnsMenuParams: ColumnsMenuParams;

interface ColumnsMenuParams {
  // To suppress updating the layout of columns as they are rearranged in the grid 
  suppressSyncLayoutWithGrid?: boolean;
  // To suppress Column Filter section 
  suppressColumnFilter?: boolean;
  // To suppress Select / Un-select all widget 
  suppressColumnSelectAll?: boolean;
  // To suppress Expand / Collapse all widget 
  suppressColumnExpandAll?: boolean;
  // By default, column groups start expanded.
  // Pass true to default to contracted groups 
  contractColumnSelection?: boolean;
}
suppressMenu
boolean
Set to true if no menu should be shown for this column header.
Default: false
suppressHeaderKeyboardEvent
Function
Suppress the grid taking action for the relevant keyboard event when a header is focused. See Suppress Keyboard Events.
suppressHeaderKeyboardEvent = (
    params: SuppressHeaderKeyboardEventParams
) => boolean;

interface SuppressHeaderKeyboardEventParams {
  column: Column | ColumnGroup;
  colDef: ColDef | ColGroupDef | null;
  // The index of the header row of the current focused header 
  headerRowIndex: number;
  // The keyboard event the grid received 
  event: KeyboardEvent;
  // The context as provided on `gridOptions.context` 
  context: any;
  api: GridApi;
  columnApi: ColumnApi;
}
headerCheckboxSelection
boolean | HeaderCheckboxSelectionCallback
If true or the callback returns true, a 'select all' checkbox will be put into the header. See Header Checkbox Selection.
headerCheckboxSelection: boolean | HeaderCheckboxSelectionCallback;

interface HeaderCheckboxSelectionCallback {
    (params: HeaderCheckboxSelectionCallbackParams) : boolean
}

interface HeaderCheckboxSelectionCallbackParams {
  column: Column;
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
}
headerCheckboxSelectionFilteredOnly
boolean
If true, the header checkbox selection will only select filtered items. See Select Everything or Just Filtered.

Columns: Integrated Charts

See Integrated Charts for more information.

chartDataType
'category' | 'series' | 'time' | 'excluded'
Defines the chart data type that should be used for a column.

Columns: Pinned

pinned
boolean | string | null
Pin a column to one side: right or left. A value of true is converted to 'left'.
Options: 'left', 'right'
initialPinned
boolean | string
Same as pinned, except only applied when creating a new column. Not applied when updating column definitions.
lockPinned
boolean
Set to true to block the user pinning the column, the column can only be pinned via definitions or API.
Default: false

Columns: Pivoting

(Enterprise only) See Pivoting

pivot
boolean
Set to true to pivot by this column.
initialPivot
boolean
Same as pivot, except only applied when creating a new column. Not applied when updating column definitions.
pivotIndex
number | null
Set this in columns you want to pivot by. If only pivoting by one column, set this to any number (e.g. 0). If pivoting by multiple columns, set this to where you want this column to be in the order of pivots (e.g. 0 for first, 1 for second, and so on).
initialPivotIndex
number
Same as pivotIndex, except only applied when creating a new column. Not applied when updating column definitions.
pivotComparator
Function
Comparator to use when ordering the pivot columns, when this column is used to pivot on. The values will always be strings, as the pivot service uses strings as keys for the pivot groups.
pivotComparator = (
    valueA: string,
    valueB: string
) => number;
enablePivot
boolean
Set to true if you want to be able to pivot by this column via the GUI. This will not block the API or properties being used to achieve pivot.
Default: false

Columns: Rendering and Styling

cellStyle
CellStyle | CellStyleFunc
An object of css values / or function returning an object of css values for a particular cell. See Cell Style.
cellStyle: CellStyle | CellStyleFunc;

interface CellStyle {
  [cssProperty: string]: string | number;
}

interface CellStyleFunc {
    (cellClassParams: CellClassParams) : CellStyle | null | undefined
}

interface CellClassParams {
  // The colDef associated with the column for this cell 
  colDef: ColDef;
  // The value to be rendered 
  value: any;
  // The data associated with this row from rowData 
  data: any;
  // The RowNode associated with this row 
  node: RowNode;
  // The index of the row 
  rowIndex: number;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
cellClass
string | string[] | CellClassFunc
Class to use for the cell. Can be string, array of strings, or function that returns a string or array of strings. See Cell Class.
cellClass: string | string[] | CellClassFunc;

interface CellClassFunc {
    (cellClassParams: CellClassParams) : string | string[]
}

interface CellClassParams {
  // The colDef associated with the column for this cell 
  colDef: ColDef;
  // The value to be rendered 
  value: any;
  // The data associated with this row from rowData 
  data: any;
  // The RowNode associated with this row 
  node: RowNode;
  // The index of the row 
  rowIndex: number;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
cellClassRules
CellClassRules
Rules which can be applied to include certain CSS classes. See Cell Class Rules.
cellClassRules: CellClassRules;

interface CellClassRules {
  [cssClassName: string]: (((params: CellClassParams) => boolean) | string);
}

interface CellClassParams {
  // The colDef associated with the column for this cell 
  colDef: ColDef;
  // The value to be rendered 
  value: any;
  // The data associated with this row from rowData 
  data: any;
  // The RowNode associated with this row 
  node: RowNode;
  // The index of the row 
  rowIndex: number;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
cellRenderer
{ new(): ICellRendererComp; } | ICellRendererFunc | string
A cellRenderer to use for this column. See Cell Renderer.
cellRenderer: { new(): ICellRendererComp; } | ICellRendererFunc | string;

interface ICellRendererFunc {
    (params: ICellRendererParams) : HTMLElement | string
}
cellRendererFramework
any
Framework cellRenderer to use for this column. See Cell Renderer.
cellRendererParams
any
Params to be passed to the cell renderer component. See Cell Renderer Params.
cellRendererSelector
Function
Callback to select which cell renderer to be used for a given row within the same column. See Many Renderers One Column.
cellRendererSelector = (
    params: ICellRendererParams
) => CellRendererSelectorResult | undefined;

interface ICellRendererParams {
  // Value to be rendered. 
  value: any;
  // Formatted value to be rendered. 
  valueFormatted: any;
  // True if this is a full width row. 
  fullWidth?: boolean;
  // Pinned state of the cell. 
  pinned?: string | null;
  // The row's data. 
  data: any;
  // The row node. 
  node: RowNode;
  // The current index of the row (this changes after filter and sort). 
  rowIndex: number;
  // The cell's column definition. 
  colDef?: ColDef;
  // The cell's column. 
  column?: Column;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context`. 
  context: any;
  // The grid's cell, a DOM div element. 
  eGridCell: HTMLElement;
  // The parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection. 
  eParentOfValue: HTMLElement;
  // Convenience function to get most recent up to date value. 
  getValue?: () => any;
  // Convenience function to set the value. 
  setValue?: (value: any) => void;
  // Convenience function to format a value using the column's formatter. 
  formatValue?: (value: any) => any;
  // Convenience function to refresh the cell. 
  refreshCell?: () => void;
  // registerRowDragger:
  // @param rowDraggerElement The HTMLElement to be used as Row Dragger
  // @param dragStartPixels The amount of pixels required to start the drag (Default: 4)
  // @param value The value to be displayed while dragging. Note: Only relevant with Full Width Rows.
  // @param suppressVisibilityChange Set to `true` to prevent the Grid from hiding the Row Dragger when it is disabled.
  registerRowDragger: (rowDraggerElement: HTMLElement, dragStartPixels?: number, value?: string, suppressVisibilityChange?: boolean) => void;
}

interface CellRendererSelectorResult {
  // Equivalent of setting `colDef.cellRenderer` 
  component?: { new (): ICellRendererComp; } | ICellRendererFunc | string;
  // Equivalent of setting `colDef.cellRendererFramework` 
  frameworkComponent?: any;
  // Equivalent of setting `colDef.cellRendererParams` 
  params?: any;
}

interface ICellRendererFunc {
    (params: ICellRendererParams) : HTMLElement | string
}
autoHeight
boolean
Set to true to have the grid calculate the height of a row based on contents of this column.
Default: false
wrapText
boolean
Set to true to have the text wrap inside the cell - typically used with autoHeight.
Default: false
enableCellChangeFlash
boolean
Set to true to flash a cell when it's refreshed.
Default: false
suppressCellFlash
boolean
Set to true to prevent this column from flashing on changes. Only applicable if cell flashing is turned on for the grid.
Default: false

Columns: Row Dragging

See Row Dragging

rowDrag
boolean | RowDragCallback
boolean or Function. Set to true (or return true from function) to allow row dragging.
Default: false
rowDrag: boolean | RowDragCallback;

interface RowDragCallback {
    (params: RowDragCallbackParams) : boolean
}

interface RowDragCallbackParams {
  // Row node for the given row 
  node: RowNode;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
rowDragText
Function
A callback that should return a string to be displayed by the rowDragComp while dragging a row. If this callback is not set, the current cell value will be used.
rowDragText = (
    params: IRowDragItem,
    dragItemCount: number
) => string;

interface IRowDragItem {
  // The default text that would be applied to this Drag Element 
  defaultTextValue: string;
  // When dragging a row, this contains the row node being dragged
  // When dragging multiple rows, this contains the row that started the drag. 
  rowNode?: RowNode;
  // When dragging multiple rows, this contains all rows being dragged 
  rowNodes?: RowNode[];
  // When dragging columns, this contains the columns being dragged 
  columns?: Column[];
  // When dragging columns, this contains the visible state of the columns 
  visibleState?: { [key: string]: boolean; };
}
dndSource
boolean | DndSourceCallback
boolean or Function. Set to true (or return true from function) to allow dragging for native drag and drop.
Default: false
dndSource: boolean | DndSourceCallback;

interface DndSourceCallback {
    (params: DndSourceCallbackParams) : boolean
}

interface DndSourceCallbackParams {
  // Row node for the given row 
  node: RowNode;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
dndSourceOnRowDrag
Function
Function to allow custom drag functionality for native drag and drop.
dndSourceOnRowDrag = (
    params: { rowNode: RowNode; dragEvent: DragEvent; }
) => void;

interface DragEvent {
  // One of {'cell','row','headerCell','toolPanel'} 
  type: string;
  // The DOM element that started the event. 
  target: HTMLElement;
  api: GridApi;
  columnApi: ColumnApi;
}

Columns: Row Grouping

(Enterprise only) See Row Grouping

rowGroup
boolean
Set to true to row group by this column.
Default: false
initialRowGroup
boolean
Same as rowGroup, except only applied when creating a new column. Not applied when updating column definitions.
rowGroupIndex
number | null
Set this in columns you want to group by. If only grouping by one column, set this to any number (e.g. 0). If grouping by multiple columns, set this to where you want this column to be in the group (e.g. 0 for first, 1 for second, and so on).
initialRowGroupIndex
number
Same as rowGroupIndex, except only applied when creating a new column. Not applied when updating column definitions.
enableRowGroup
boolean
Set to true if you want to be able to row group by this column via the GUI. This will not block the API or properties being used to achieve row grouping.
Default: false
showRowGroup
string | boolean
Set to true to have the grid place the values for the group into the cell, or put the name of a grouped column to just show that group. See Custom Group Columns.
enableValue
boolean
Set to true if you want to be able to aggregate by this column via the GUI. This will not block the API or properties being used to achieve aggregation.
Default: false
aggFunc
Name of function to use for aggregation. You can also provide your own agg function.
Options: 'sum', 'min', 'max', 'first', 'last'
aggFunc: string | IAggFunc | null;

interface IAggFunc {
    (params: IAggFuncParams) : any
}

interface IAggFuncParams {
  // Values to aggregate 
  values: any[];
  // Column the aggregation function is working on 
  column: Column;
  // ColDef of the aggregation column 
  colDef: ColDef;
  // The parent RowNode, where the aggregation result will be shown 
  rowNode: RowNode;
  // data (if any) of the parent RowNode 
  data: any;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
initialAggFunc
Same as aggFunc, except only applied when creating a new column. Not applied when updating column definitions.
initialAggFunc: string | IAggFunc;

interface IAggFunc {
    (params: IAggFuncParams) : any
}

interface IAggFuncParams {
  // Values to aggregate 
  values: any[];
  // Column the aggregation function is working on 
  column: Column;
  // ColDef of the aggregation column 
  colDef: ColDef;
  // The parent RowNode, where the aggregation result will be shown 
  rowNode: RowNode;
  // data (if any) of the parent RowNode 
  data: any;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
allowedAggFuncs
string[]
Aggregation functions allowed on this column e.g. ['sum', 'avg']. If missing, all installed functions are allowed. This will only restrict what the GUI allows a user to select, it does not impact when you set a function via the API.

Columns: Sort

sortable
boolean
Set to true to allow sorting on this column.
Default: false
sort
string | null
If sorting by default, set it here. Set to asc or desc.
Options: null, 'asc', 'desc'
initialSort
string
Same as sort, except only applied when creating a new column. Not applied when updating column definitions.
sortIndex
number | null
If sorting more than one column by default, specifies order in which the sorting should be applied.
initialSortIndex
number
Same as sortIndex, except only applied when creating a new column. Not applied when updating column definitions.
sortingOrder
(string | null)[]
Array defining the order in which sorting occurs (if sorting is enabled). An array with any of the following in any order ['asc','desc',null]
Options: null, 'asc', 'desc'
comparator
Function
Comparator function for custom sorting.
comparator = (
    valueA: any,
    valueB: any,
    nodeA: RowNode,
    nodeB: RowNode,
    isInverted: boolean
) => number;
unSortIcon
boolean
Set to true if you want the unsorted icon to be shown when no sort is applied to this column.
Default: false

Columns: Spanning

See Column / Row Spanning

colSpan
Function
By default, each cell will take up the width of one column. You can change this behaviour to allow cells to span multiple columns.
colSpan = (params: ColSpanParams) => number;

interface ColSpanParams {
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
rowSpan
Function
By default, each cell will take up the height of one row. You can change this behaviour to allow cells to span multiple rows.
rowSpan = (params: RowSpanParams) => number;

interface RowSpanParams {
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}

Columns: Width

width
number
Initial width in pixels for the cell.
initialWidth
number
Same as width, except only applied when creating a new column. Not applied when updating column definitions.
minWidth
number
Minimum width in pixels for the cell.
maxWidth
number
Maximum width in pixels for the cell.
flex
number
Used instead of width when the goal is to fill the remaining empty space of the grid. See Column Flex.
initialFlex
number
Same as flex, except only applied when creating a new column. Not applied when updating column definitions.
resizable
boolean
Set to true to allow this column should be resized.
Default: false
suppressSizeToFit
boolean
Set to true if you want this column's width to be fixed during 'size to fit' operations.
Default: false
suppressAutoSize
boolean
Set to true if you do not want this column to be auto-resizable by double clicking it's edge.
Default: false

Groups

For column groups, the property children is mandatory. When the grid sees children it knows it's a column group.

children *
(ColDef | ColGroupDef)[]
A list containing a mix of columns and column groups.
groupId
string
The unique ID to give the column. This is optional. If missing, a unique ID will be generated. This ID is used to identify the column group in the column API.
marryChildren
boolean
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.
Default: false
openByDefault
boolean
Set to true if this group should be opened by default.
Default: false
columnGroupShow
string
Whether to show the column when the group is open / closed.
toolPanelClass
ToolPanelClass
CSS class to use for the tool panel cell. Can be a string, array of strings, or function.
toolPanelClass: ToolPanelClass;

type ToolPanelClass = 
      string 
    | string[] 
    | ((params: ToolPanelClassParams) => string | string[])


interface ToolPanelClassParams {
  api: GridApi;
  colDef: AbstractColDef;
  column?: Column | null;
  columnGroup?: ColumnGroup | ProvidedColumnGroup | null;
  context?: any;
}
suppressColumnsToolPanel
boolean
Set to true if you do not want this column or group to appear in the Columns Tool Panel.
Default: false
suppressFiltersToolPanel
boolean
Set to true if you do not want this column (filter) or group (filter group) to appear in the Filters Tool Panel.
Default: false

Groups: Header

headerName
string
The name to render in the column header. If not specified and field is specified, the field name will be used as the header name.
headerClass
HeaderClass
CSS class to use for the header cell. Can be a string, array of strings, or function.
headerClass: HeaderClass;

type HeaderClass = 
      string 
    | string[] 
    | ((params: HeaderClassParams) => string | string[])


interface HeaderClassParams {
  api: GridApi;
  colDef: AbstractColDef;
  column?: Column | null;
  columnGroup?: ColumnGroup | ProvidedColumnGroup | null;
  context?: any;
}
headerGroupComponent
string | { new(): IHeaderGroupComp; }
The custom header group component to be used for rendering the component header. If none specified the default AG Grid is used.
headerGroupComponentFramework
any
The custom header group component to be used for rendering the component header in the hosting framework (ie: Angular/React/VueJs). If none specified the default AG Grid is used.
headerGroupComponentParams
any
The params used to configure the header group component.