Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Angular 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 = (
    params: ValueGetterParams
) => any;

interface ValueGetterParams {
  // 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;
  getValue: (field: string) => any;
}
valueFormatter
string | ValueFormatterFunc
Function or expression. Formats the value for display. See Value Formatters.
valueFormatter = (
    params: ValueFormatterParams
) => string;

interface ValueFormatterParams {
  // 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;
  value: any;
}
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 = (value: any) => string;
tooltipField
string
The field of the tooltip to apply to the cell.
tooltipValueGetter
Function
Callback that should return the string used for a tooltip.
tooltipValueGetter = (params: ITooltipParams) => string;

interface ITooltipParams {
  location: string;
  api?: GridApi;
  columnApi?: ColumnApi;
  context?: any;
  colDef?: ColDef | ColGroupDef | null;
  column?: Column | ColumnGroup;
  value?: any;
  valueFormatted?: any;
  rowIndex?: number;
  node?: RowNode;
  data?: any;
}
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 = (
    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
Class to use for the tool panel cell. Can be a string, array of strings, or function.
type ToolPanelClass = 
      string 
    | string[] 
    | ((params: ToolPanelClassParams) => string | string[])
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.
chartDataType
'category' | 'series' | 'time' | 'excluded'
Defines the chart data type that should be used for a column.
icons
{ [key: string]: Function | string; }
Icons to use inside the column instead of the grid's default icons. 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 = (
    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
Suppress the grid taking action for the relevant keyboard event when a cell is focused. See Suppress Keyboard Events.
Default: false
suppressKeyboardEvent = (
    params: SuppressKeyboardEventParams
) => boolean;

interface SuppressKeyboardEventParams {
  // 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;
  // The keyboard event the grid received 
  event: KeyboardEvent;
  // Whether the cell is editing or not 
  editing: boolean;
}
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 = (
    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;
}

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 | Function
Function or expression. Gets the value for display in the header.
headerTooltip
string
Tooltip for the column header
headerClass
HeaderClass
Class to use for the header cell. Can be a string, array of strings, or function.
type HeaderClass = 
      string 
    | string[] 
    | ((params: HeaderClassParams) => string | string[])
headerComponent
headerComponentFramework
Header component to use for this column. See Header Component.
headerComponentParams
any
Params to be passed to 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.
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.
Default: false
suppressHeaderKeyboardEvent = (
    params: SuppressHeaderKeyboardEventParams
) => boolean;

interface SuppressHeaderKeyboardEventParams {
  column: Column | ColumnGroup;
  colDef: ColDef | ColGroupDef | null;
  headerRowIndex: number;
  event: KeyboardEvent;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}
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 = (
    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: Display

hide
boolean
Set to true for this column to be hidden. You might think it would make more sense to call this field visible and mark it false to hide, but we want all default values to be false and we want columns to be visible by default.
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: 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 column to 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

Columns: Pinned

pinned
boolean | string | null
Pin a column to one side. 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 pinning column via the UI (API will still work).
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: Rendering and Styling

cellStyle
{ [cssProperty: string]: string } | CellStyleFunc
The style to give a particular cell. See Cell Style.
cellStyle = (
    cellClassParams: CellClassParams
) => {};

interface CellClassParams {
  // 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;
  // The colDef associated with the column for this cell 
  colDef: ColDef;
  // The value to be rendered 
  value: any;
  // If using AngularJs, is the row's child scope, otherwise null 
  $scope: any;
}
cellClass
string | string[] | CellClassFunc
The class to give a particular cell. See Cell Class.
cellClass = (
    cellClassParams: CellClassParams
) => string | string[];

interface CellClassParams {
  // 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;
  // The colDef associated with the column for this cell 
  colDef: ColDef;
  // The value to be rendered 
  value: any;
  // If using AngularJs, is the row's child scope, otherwise null 
  $scope: any;
}
cellClassRules
CellClassRules
Rules which can be applied to include certain CSS classes. See Cell Class Rules.
interface CellClassRules {
  [cssClassName: string]: (((params: CellClassParams) => boolean) | string);
}
cellRenderer
cellRendererFramework
cellRenderer to use for this column. See Cell Renderer.
cellRendererParams
any
Params to be passed to 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;

interface ICellRendererParams {
  fullWidth?: boolean;
  pinned?: string | null;
  value: any;
  valueFormatted: any;
  data: any;
  node: RowNode;
  colDef?: ColDef;
  column?: Column;
  rowIndex: number;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
  eGridCell: HTMLElement;
  eParentOfValue: HTMLElement;
  getValue?: () => any;
  setValue?: (value: any) => void;
  formatValue?: (value: any) => any;
  refreshCell?: () => void;
  // registerRowDragger: Function
  // @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.
  registerRowDragger: (rowDraggerElement: HTMLElement, dragStartPixels?: number, value?: string) => void;
  $scope: any;
}

interface CellRendererSelectorResult {
  component?: { new (): ICellRendererComp; } | ICellRendererFunc | string;
  frameworkComponent?: any;
  params?: any;
}
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.
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: Sort

sortable
boolean
Set to true to allow sorting on this column.
Default: false
sort
string | null
Set to sort this column.
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 doing multi-sort by default, the order which column sorts are 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).
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: 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.
type IFilterType = 
      string 
    | { new (): IFilterComp; } 
    | boolean
filterValueGetter
string | ValueGetterFunc
Function or expression. Gets the value for filtering purposes.
filterValueGetter = (
    params: ValueGetterParams
) => any;

interface ValueGetterParams {
  // 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;
  getValue: (field: string) => 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).
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;
}
filterFramework
any
Provided a custom framework filter to use for this column. See Custom Filter.
filterParams
any
Custom params to be passed to the filter component specified in filter or filterFramework. See Filter Parameters.
floatingFilter
boolean
Whether to show a floating filter for this column. See Floating Filter.
Default: false
floatingFilterComponent
IFloatingFilterType
Floating filter component to use for this column. See Floating Filter Component.
type IFloatingFilterType = 
      string 
    | { new (): IFloatingFilterComp; }
floatingFilterComponentFramework
any
Floating filter framework component to use for this column. See Floating Filter Component.
floatingFilterComponentParams
any
Custom 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: 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 = (
    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 = (
    params: ValueSetterParams
) => boolean;

interface ValueSetterParams {
  // 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;
  oldValue: any;
  newValue: any;
}
valueParser
string | ValueParserFunc
Function or expression. Parses the value for saving.
valueParser = (
    params: ValueParserParams
) => any;

interface ValueParserParams {
  // 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;
  oldValue: any;
  newValue: any;
}
cellEditor
cellEditorFramework
cellEditor to use for this column. See Cell Editors.
cellEditorParams
any
Params to be passed to 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;

interface ICellEditorParams {
  // Current value of the cell 
  value: any;
  // Key code of key that started the edit, eg 'Enter' or 'Delete' - non-printable
  // characters appear here 
  keyPress: number | null;
  // The string that started the edit, eg 'a' if letter 'a' was pressed, or 'A' if
  // shift + letter 'a' only printable characters appear here 
  charPress: string | null;
  // Grid column 
  column: Column;
  // Column definition 
  colDef: ColDef;
  // Row node for the cell 
  node: RowNode;
  // Row data 
  data: any;
  // Editing row index 
  rowIndex: number;
  api: GridApi;
  columnApi: ColumnApi;
  // If doing full row edit, this is true if the cell is the one that started the edit
  // (eg it is the cell the use double clicked on, or pressed a key on etc). 
  cellStartedEdit: boolean;
  // Context  as set on gridOptions.context 
  context: any;
  // callback to tell grid a key was pressed - useful to pass control key events (tab,
  // arrows etc) back to grid - however you do 
  onKeyDown: (event: KeyboardEvent) => void;
  // Callback to tell grid to stop editing the current cell. pass 'false' to prevent
  // navigation moving to the next cell if grid property enterMovesDownAfterEdit=true 
  stopEditing: (suppressNavigateAfterEdit?: boolean) => void;
  // A reference to the DOM element representing the grid cell that your component
  // will live inside. Useful if you want to add event listeners or classes at this level.
  // This is the DOM element that gets browser focus when selecting cells. 
  eGridCell: HTMLElement;
  // Utility function to parse a value using the column's colDef.valueParser 
  parseValue: (value: any) => any;
  // Utility function to format a value using the column's colDef.valueFormatter 
  formatValue: (value: any) => any;
  // AngularJS scope - null if not using AngularJS, this is legacy and not used if not 
  $scope: any;
}

interface CellEditorSelectorResult {
  component?: { new (): ICellEditorComp; } | string;
  frameworkComponent?: any;
  params?: any;
}
singleClickEdit
boolean
Set to true to have cells under this column enter edit mode after single click.
Default: false

Columns: Row Grouping

(Enterprise only) See Row Grouping

rowGroup
boolean
Set to true to row group by this column
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
(Enterprise only) 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
enableValue
boolean
(Enterprise only) 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
string | IAggFunc | null
Name of function to use for aggregation. You can also provide your own agg function.
Options: 'sum', 'min', 'max', 'first', 'last'
aggFunc = (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
string | IAggFunc
Same as 'aggFunc', except only applied when creating a new column. Not applied when updating column definitions.
initialAggFunc = (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: 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: 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 = (
    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 {
  // 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; };
  defaultTextValue: string;
}
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 = (
    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;
  api: GridApi;
  columnApi: ColumnApi;
  // The DOM element that started the event. 
  target: HTMLElement;
}

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 {
  // 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;
  oldValue: any;
  newValue: any;
}
onCellClicked
CellClickedEvent
Callback called when a cell is clicked.
onCellClicked = (
    event: CellClickedEvent
) => void;

interface CellClickedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  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;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}
onCellDoubleClicked
CellDoubleClickedEvent
Callback called when a cell is double clicked.
onCellDoubleClicked = (
    event: CellDoubleClickedEvent
) => void;

interface CellDoubleClickedEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  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;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}
onCellContextMenu
CellContextMenuEvent
Callback called when a cell is right clicked.
onCellContextMenu = (
    event: CellContextMenuEvent
) => void;

interface CellContextMenuEvent {
  // Event identifier 
  type: string;
  api: GridApi;
  columnApi: ColumnApi;
  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;
  column: Column;
  colDef: ColDef;
  // The value for the cell 
  value: any;
}

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
Class to use for the tool panel cell. Can be a string, array of strings, or function.
type ToolPanelClass = 
      string 
    | string[] 
    | ((params: ToolPanelClassParams) => string | string[])
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
Class to use for the header cell. Can be a string, array of strings, or function.
type HeaderClass = 
      string 
    | string[] 
    | ((params: HeaderClassParams) => string | string[])
headerGroupComponent
headerGroupComponentFramework
Component to use header group.
headerGroupComponentParams
any
Params for the header group component.