Vue 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; }
	`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; }
	`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; } 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; } 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.