Column Properties

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

Columns and Column Groups

headerNameThe name to render in the column header. If not specified and field is specified, the field name will be used as the header name.
columnGroupShowWhether to show the column when the group is open / closed.
Default: false
headerClassClass to use for the header cell. Can be a string, array of strings, or function.
toolPanelClassClass to use for the tool panel cell. Can be a string, array of strings, or function.
suppressColumnsToolPanelSet to true if you do not want this column or group to appear in the Columns Tool Panel.
Default: false
suppressFiltersToolPanelSet to true if you do not want this column (filter) or group (filter group) to appear in the Filters Tool Panel.
Default: false

Columns Only

fieldThe field of the row to get the cells data from.
colIdThe 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.
typeA 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.
widthInitial width in pixels for the cell.
minWidthMinimum width in pixels for the cell.
maxWidthMaximum width in pixels for the cell.
flexUsed instead of width when the goal is to fill the remaining empty space of the grid. See Column Flex.
filter
filterFramework
Filter component to use for this column. Set to true to use the default filter.
filterParamsCustom params to be passed to filter component.
floatingFilterComponent
floatingFilterComponentFramework
Floating filter component to use for this column.
floatingFilterComponentParamsCustom params to be passed to floatingFilterComponent or floatingFilterComponentFramework.
hideSet 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
pinnedPin a column to one side.
Options: 'left' | 'right'
lockPositionSet to true to always have this column displayed first.
Default: false
lockVisibleSet to true to block making column visible / hidden via the UI (API will still work).
Default: false
lockPinnedSet to true to block pinning column via the UI (API will still work).
Default: false
sortableSet to true to allow sorting on this column.
Default: false
sortSet to sort this column by default.
Options: null | 'asc' | 'desc'
sortedAtIf doing multi-sort by default, this property should say when the sort for each column was performed in milliseconds, so the grid knows which order to execute the sort.
sortingOrderArray defining the order in which sorting occurs (if sorting is enabled).
Options: null | 'asc' | 'desc'
resizableSet to true to allow column to be resized.
Default: false
headerTooltipTooltip for the column header
tooltipFieldThe field of the tooltip to apply to the cell.
tooltipCallback that should return the string used for a tooltip. tooltipField takes precedence.function(params: IParams): string; interface IParams { api: GridApi; columnApi: ColumnApi; colDef: ColDef; column: Column; context: Context; value?: any; valueFormatted?: any; rowIndex?: number; node?: RowNode; data?: any; }
checkboxSelectionboolean or Function. Set to true (or return true from function) to render a selection checkbox in the column.
Default: false
rowDragboolean or Function. Set to true (or return true from function) to allow row dragging.
Default: false
rowDragTextA 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.function(params: IParams): string; interface IParams { rowNode: RowNode; columns: Column[]; defaultTextValue: string; }
dndSourceboolean or Function. Set to true (or return true from function) to allow dragging for native drag and drop.
Default: false
dndSourceOnRowDragFunction to allow custom drag functionality for native drag and drop.
cellStyleThe style to give a particular cell. See Cell Style.
cellClassThe class to give a particular cell. See Cell Class.
cellClassRulesRules which can be applied to include certain CSS classes. See Cell Class Rules.
editableSet to true if this column is editable, otherwise false. Can also be a function to have different rows editable.
Default: false
onCellValueChanged(params)Callback for after the value of a cell has changed, either due to editing or the application calling api.setValue().
cellRenderer
cellRendererFramework
cellRenderer to use for this column.
cellRendererParamsParams to be passed to cell renderer component.
pinnedRowCellRenderer
pinnedRowCellRendererFramework
cellRenderer to use for pinned rows in this column. Floating cells will use floatingCellRenderer if available, or cellRenderer if not.
pinnedRowCellRendererParamsParams to be passed to pinned row cell renderer component.
cellRendererSelector
cellEditorSelector
Callback to select which cell renderer / cell editor to be used for a given row within the same column.
cellEditor
cellEditorFramework
cellEditor to use for this column.
cellEditorParamsParams to be passed to cell editor component.
headerComponent
headerComponentFramework
Header component to use for this column.
headerComponentParamsParams to be passed to header component.
valueGetter(params)Function or expression. Gets the value from your data for display.
headerValueGetter(params)Function or expression. Gets the value for display in the header.
filterValueGetter(params)Function or expression. Gets the value for filtering purposes.
valueFormatter(params)Function or expression. Formats the value for display.
floatingCellFormatter(params)Function or expression. Formatter to use for a pinned row. If missing, the normal valueFormatter will be used.
valueSetter(params)Function or expression. Sets the value into your data for saving. Return true if the data changed.
valueParser(params)Function or expression. Parses the value for saving.
keyCreator(params)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.
getQuickFilterTextA 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).
aggFuncName of function to use for aggregation. You can also provide your own agg function.
Options: 'sum' | 'min' | 'max' | 'first' | 'last'
allowedAggFuncsAggregation 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.
rowGroupIndexSet 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).
pivotIndexSet 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).
comparator(valueA, valueB, nodeA, nodeB, isInverted)Comparator function for custom sorting.
pivotComparator(valueA, valueB)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.
unSortIconSet to true if you want the unsorted icon to be shown when no sort is applied to this column.
Default: false
enableRowGroup(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
enablePivot(Enterprise only) 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
pivotTotals(Enterprise only) Set to true if you want to introduce pivot total columns when in pivot mode.
Default: false
enableValue(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
enableCellChangeFlashSet to true to flash a cell when it's refreshed.
Default: false
menuTabsSet 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.
suppressMenuSet to true if no menu should be shown for this column header.
Default: false
suppressSizeToFitSet to true if you want this column's width to be fixed during 'size to fit' operations.
Default: false
suppressMovableSet to true if you do not want this column to be movable via dragging.
Default: false
suppressNavigableSet to true if this column is not navigable (i.e. cannot be tabbed into), otherwise false. Can also be a function to have different rows navigable.
Default: false
suppressCellFlashSet to true to prevent this column from flashing on changes. Only applicable if cell flashing is turned on for the grid.
Default: false
suppressKeyboardEvent(params)Function to allow skipping default keyboard behaviour of the grid. For example, if you don't want the grid to move focus up on up arrow key while editing, implement this method to return true when params.editing = true and params.event.keyCode = [key code for up arrow key].
Default: false
onCellClicked(params)Callback called when a cell is clicked.
onCellDoubleClicked(params)Callback called when a cell is double clicked.
onCellContextMenu(params)Callback called when a cell is right clicked.
autoHeightSet to true to have the grid calculate the height of a row based on contents of this column.
Default: false
singleClickEditSet to true to have cells under this column enter edit mode after single click.
Default: false
chartDataTypeDefines the chart data type that should be used for a column.
Options: 'category' | 'series' | 'excluded'

Column Groups Only

groupIdThe 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.
childrenA list containing a mix of columns and column groups.
marryChildrenSet 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
openByDefaultSet to true if this group should be opened by default.
Default: false
headerGroupComponent
headerGroupComponentFramework
Component to use header group.
headerGroupComponentParamsParams for the header group component.