React Data GridColumn 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.

Typescript supports a generic row data type via ColDef<TData> and ColDefGroup<TData>. If not set TData defaults to any. See Typescript Generics for more details.

Columns

field TypeColDefField	The field of the row object to get the cell's data from. Deep references into a row object is supported via dot notation, i.e `'address.firstLine'`. See: Accessing Row Data Values
colId Typestring	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 Typestring \| 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
cellDataType Typeboolean \| string Defaulttrue	The data type of the cell values for this column. Can either infer the data type from the row data (`true` - the default behaviour), define a specific data type (`string`), or have no data type (`false`). If setting a specific data type (`string` value), this can either be one of the pre-defined data types `'text'`, `'number'`, `'boolean'`, `'date'`, `'dateString'` or `'object'`, or a custom data type that has been defined in the `dataTypeDefinitions` grid option. Data type inference only works for the Client-Side Row Model, and requires non-null data. It will also not work if the `valueGetter`, `valueParser` or `refData` properties are defined, or if this column is a sparkline. See: Cell Data Types
valueGetter Typestring \| ValueGetterFunc	Function or expression. Gets the value from your data for display. See: Value Getters
valueFormatter Typestring \| 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
refData Type{ [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 TypeFunction	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.
equals TypeFunction	Custom comparator for values, used by renderer to know if values have changed. Cells whose values have not changed don't get refreshed. By default the grid uses `===` which should work for most use cases. See: Change Detection Comparing Values
checkboxSelection Typeboolean \| CheckboxSelectionCallback Defaultfalse	Set to `true` (or return `true` from function) to render a selection checkbox in the column.
showDisabledCheckboxes Typeboolean Defaultfalse	Set to `true` to display a disabled checkbox when row is not selectable and checkboxes are enabled.
toolPanelClass TypeToolPanelClass	CSS class to use for the tool panel cell. Can be a string, array of strings, or function.
suppressColumnsToolPanel Typeboolean Defaultfalse	Set to `true` if you do not want this column or group to appear in the Columns Tool Panel.
columnGroupShow TypeColumnGroupShowType	Whether to only show the column when the group is open / closed. If not set the column is always displayed as part of the group.
icons Type{ [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 Typeboolean \| SuppressNavigableCallback Defaultfalse	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.
suppressKeyboardEvent TypeFunction Defaultfalse	Allows the user to suppress certain keyboard events in the grid cell. See: Suppress Keyboard Events
suppressPaste Typeboolean \| 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.
suppressFillHandle Typeboolean	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 Typeboolean Defaultfalse	Set to `true` for this column to be hidden.
initialHide Typeboolean	Same as `hide`, except only applied when creating a new column. Not applied when updating column definitions.
lockVisible Typeboolean Defaultfalse	Set to `true` to block making column visible / hidden via the UI (API will still work).
lockPosition Typeboolean \| 'left' \| 'right'	Lock a column to position to `'left'` or`'right'` to always have this column displayed in that position. `true` is treated as `'left'`
suppressMovable Typeboolean Defaultfalse	Set to `true` if you do not want this column to be movable via dragging.
useValueFormatterForExport Typeboolean Defaultfalse	Set to true to format values using the column's `valueFormatter` when exporting data from the grid. This applies to CSV and Excel export, as well as clipboard operations and the fill handle. If custom handling is provided for the export operation, this property will be ignored. See: Using Value Formatters with Other Grid Features

Columns: Editing

See Cell Editing for more information.

editable Typeboolean \| EditableCallback Defaultfalse	Set to `true` if this column is editable, otherwise `false`. Can also be a function to have different rows editable.
valueSetter Typestring \| ValueSetterFunc	Function or expression. Custom function to modify your data based off the new value for saving. Return `true` if the data changed. See: Saving Values
valueParser Typestring \| ValueParserFunc	Function or expression. Parses the value for saving. See: Parsing Values
cellEditor Typeany	Provide your own cell editor component for this column's cells. See: Cell Editors
cellEditorParams Typeany	Params to be passed to the `cellEditor` component.
cellEditorSelector TypeCellEditorSelectorFunc	Callback to select which cell editor to be used for a given row within the same column. See: Many Editors One Column
cellEditorPopup Typeboolean	Set to `true`, to have the cell editor appear in a popup.
cellEditorPopupPosition Type'over' \| 'under' Defaultover	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. .
singleClickEdit Typeboolean Defaultfalse	Set to `true` to have cells under this column enter edit mode after single click.
useValueParserForImport Typeboolean Defaultfalse	Set to true to parse values using the column's `valueParser` when importing data to the grid. This applies to clipboard operations and the fill handle. If custom handling is provided for the import operation, this property will be ignored. See: Using Value Parsers with Other Grid Features

Columns: Events

onCellValueChanged TypeNewValueParams	Callback for after the value of a cell has changed, either due to editing or the application calling `api.setValue()`.
onCellClicked TypeCellClickedEvent	Callback called when a cell is clicked.
onCellDoubleClicked TypeCellDoubleClickedEvent	Callback called when a cell is double clicked.
onCellContextMenu TypeCellContextMenuEvent	Callback called when a cell is right clicked.

Columns: Filter

See Filtering for more information.

filter Typeany	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: Column Filters
filterParams Typeany	Params to be passed to the filter component specified in `filter`. See: Filter Parameters
filterValueGetter Typestring \| ValueGetterFunc	Function or expression. Gets the value for filtering purposes.
getQuickFilterText TypeFunction	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
floatingFilter Typeboolean Defaultfalse	Whether to display a floating filter for this column. See: Floating Filter
floatingFilterComponent Typeany	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
floatingFilterComponentParams Typeany	Params to be passed to `floatingFilterComponent`. See: Floating Filter Parameters
suppressFiltersToolPanel Typeboolean Defaultfalse	Set to `true` if you do not want this column (filter) or group (filter group) to appear in the Filters Tool Panel.

Columns: Header

See Column Headers for more information.

headerName Typestring	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 Typestring \| HeaderValueGetterFunc	Function or expression. Gets the value for display in the header.
headerTooltip Typestring	Tooltip for the column header
headerClass TypeHeaderClass	CSS class to use for the header cell. Can be a string, array of strings, or function.
headerComponent Typeany	The custom header group component to be used for rendering the component header. If none specified the default AG Grid is used. See: Header Component
headerComponentParams Typeany	The parameters to be passed to the `headerComponent`.
wrapHeaderText Typeboolean	If enabled then column header names that are too long for the column width will wrap onto the next line. Default `false`
autoHeaderHeight Typeboolean Defaultfalse	If enabled then the column header row will automatically adjust height to accommodate the size of the header cell. This can be useful when using your own `headerComponent` or long header names in conjunction with `wrapHeaderText`. See: Auto Header Height
menuTabs TypeColumnMenuTab[]	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 TypeColumnsMenuParams	Params used to change the behaviour and appearance of the Columns Menu tab. See: Customising the Columns Menu Tab
suppressMenu Typeboolean Defaultfalse	Set to `true` if no menu should be shown for this column header.
suppressHeaderKeyboardEvent TypeFunction	Suppress the grid taking action for the relevant keyboard event when a header is focused. See: Suppress Keyboard Events
headerCheckboxSelection Typeboolean \| HeaderCheckboxSelectionCallback	If `true` or the callback returns `true`, a 'select all' checkbox will be put into the header. See: Header Checkbox Selection
headerCheckboxSelectionFilteredOnly Typeboolean	If `true`, the header checkbox selection will only select filtered items. See: Select Everything or Just Filtered
headerCheckboxSelectionCurrentPageOnly Typeboolean	If `true`, the header checkbox selection will only select nodes on the current page. See: Select Everything on the Current Page

Columns: Integrated Charts

(Enterprise only) See Integrated Charts

Type'category' | 'series' | 'time' | 'excluded'

Defines the chart data type that should be used for a column.

Columns: Pinned

See Column Pinning for more information.

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

Columns: Pivoting

(Enterprise only) See Pivoting

pivot Typeboolean	Set to true to pivot by this column.
initialPivot Typeboolean	Same as `pivot`, except only applied when creating a new column. Not applied when updating column definitions.
pivotIndex Typenumber \| 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 Typenumber	Same as `pivotIndex`, except only applied when creating a new column. Not applied when updating column definitions.
pivotComparator TypeFunction	Only for CSRM, see SSRM Pivoting. 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.
enablePivot Typeboolean Defaultfalse	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.

Columns: Rendering and Styling

cellStyle TypeCellStyle \| CellStyleFunc	An object of css values / or function returning an object of css values for a particular cell. See: Cell Style
cellClass Typestring \| 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
cellClassRules TypeCellClassRules	Rules which can be applied to include certain CSS classes. See: Cell Class Rules
cellRenderer Typeany	Provide your own cell Renderer component for this column's cells. See: Cell Renderer
cellRendererParams Typeany	Params to be passed to the `cellRenderer` component. See: Cell Renderer Params
cellRendererSelector TypeCellRendererSelectorFunc	Callback to select which cell renderer to be used for a given row within the same column. See: Many Renderers One Column
autoHeight Typeboolean Defaultfalse	Set to `true` to have the grid calculate the height of a row based on contents of this column.
wrapText Typeboolean Defaultfalse	Set to `true` to have the text wrap inside the cell - typically used with `autoHeight`.
enableCellChangeFlash Typeboolean Defaultfalse	Set to `true` to flash a cell when it's refreshed.
suppressCellFlash Typeboolean Defaultfalse	Set to `true` to prevent this column from flashing on changes. Only applicable if cell flashing is turned on for the grid.

Columns: Row Dragging

See Row Dragging for more information.

rowDrag Typeboolean \| RowDragCallback Defaultfalse	`boolean` or `Function`. Set to `true` (or return `true` from function) to allow row dragging.
rowDragText TypeFunction	A callback that should return a string to be displayed by the `rowDragComp` while dragging a row. If this callback is not set, the `rowDragText` callback in the `gridOptions` will be used and if there is no callback in the `gridOptions` the current cell value will be used.
dndSource Typeboolean \| DndSourceCallback Defaultfalse	`boolean` or `Function`. Set to `true` (or return `true` from function) to allow dragging for native drag and drop.
dndSourceOnRowDrag TypeFunction	Function to allow custom drag functionality for native drag and drop.

Columns: Row Grouping

(Enterprise only) See Row Grouping

rowGroup Typeboolean Defaultfalse	Set to `true` to row group by this column.
initialRowGroup Typeboolean	Same as `rowGroup`, except only applied when creating a new column. Not applied when updating column definitions.
rowGroupIndex Typenumber \| 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 Typenumber	Same as `rowGroupIndex`, except only applied when creating a new column. Not applied when updating column definitions.
enableRowGroup Typeboolean Defaultfalse	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.
showRowGroup Typestring \| 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 Typeboolean Defaultfalse	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.
aggFunc Typestring \| IAggFunc \| null	Name of function to use for aggregation. In-built options are: `sum`, `min`, `max`, `count`, `avg`, `first`, `last`. Also accepts a custom aggregation name or an aggregation function.
initialAggFunc Typestring \| IAggFunc	Same as `aggFunc`, except only applied when creating a new column. Not applied when updating column definitions.
allowedAggFuncs Typestring[]	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.
defaultAggFunc Typestring Defaultsum	The name of the aggregation function to use for this column when it is enabled via the GUI. Note that this does not immediately apply the aggregation function like `aggFunc`

Columns: Sort

See Row Sorting for more information.

sortable Typeboolean Defaultfalse	Set to `true` to allow sorting on this column.
sort TypeSortDirection	If sorting by default, set it here. Set to `asc` or `desc`.
initialSort TypeSortDirection	Same as `sort`, except only applied when creating a new column. Not applied when updating column definitions.
sortIndex Typenumber \| null	If sorting more than one column by default, specifies order in which the sorting should be applied.
initialSortIndex Typenumber	Same as `sortIndex`, except only applied when creating a new column. Not applied when updating column definitions.
sortingOrder Type(SortDirection)[]	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]`
comparator TypeFunction	Override the default sorting order by providing a custom sort comparator. `valueA`, `valueB` are the values to compare. `nodeA`, `nodeB` are the corresponding RowNodes. Useful if additional details are required by the sort. `isDescending` - `true` if sort direction is `desc`. Not to be used for inverting the return value as the grid already applies `asc` or `desc` ordering. Return: `0` valueA is the same as valueB `> 0` Sort valueA after valueB `< 0` Sort valueA before valueB
unSortIcon Typeboolean Defaultfalse	Set to `true` if you want the unsorted icon to be shown when no sort is applied to this column.

Columns: Spanning

See Column / Row Spanning

colSpan TypeFunction	By default, each cell will take up the width of one column. You can change this behaviour to allow cells to span multiple columns.
rowSpan TypeFunction	By default, each cell will take up the height of one row. You can change this behaviour to allow cells to span multiple rows.

Columns: Tooltips

tooltipField TypeColDefField	The field of the tooltip to apply to the cell.
tooltipValueGetter TypeFunction	Callback that should return the string to use for a tooltip, `tooltipField` takes precedence if set. If using a custom `tooltipComponent` you may return any custom value to be passed to your tooltip component. See: Tooltip Component
tooltipComponent Typeany	Provide your own tooltip component for the column. See: Tooltip Component
tooltipComponentParams Typeany	The params used to configure `tooltipComponent`.

Columns: Width

See Column Sizing for more information.

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

Groups

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

See Column Groups for more information.

children * Type(ColDef \| ColGroupDef)[]	A list containing a mix of columns and column groups.
groupId Typestring	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 Typeboolean Defaultfalse	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.
suppressStickyLabel Typeboolean Defaultfalse	If `true` the label of the Column Group will not scroll alongside the grid to always remain visible.
openByDefault Typeboolean Defaultfalse	Set to `true` if this group should be opened by default.
columnGroupShow TypeColumnGroupShowType	Whether to only show the column when the group is open / closed. If not set the column is always displayed as part of the group.
toolPanelClass TypeToolPanelClass	CSS class to use for the tool panel cell. Can be a string, array of strings, or function.
suppressColumnsToolPanel Typeboolean Defaultfalse	Set to `true` if you do not want this column or group to appear in the Columns Tool Panel.
suppressFiltersToolPanel Typeboolean Defaultfalse	Set to `true` if you do not want this column (filter) or group (filter group) to appear in the Filters Tool Panel.
suppressSpanHeaderHeight Typeboolean Defaultfalse	Set to `true` if you don't want the column header for this column to span the whole height of the header container.
tooltipComponent Typeany	Provide your own tooltip component for the column group. See: Tooltip Component
tooltipComponentParams Typeany	The params used to configure `tooltipComponent`.

Groups: Header

See Column Headers for more information.

headerName Typestring	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 TypeHeaderClass	CSS class to use for the header cell. Can be a string, array of strings, or function.
headerTooltip Typestring	Tooltip for the column header
headerGroupComponent Typeany	The custom header group component to be used for rendering the component header. If none specified the default AG Grid is used. See: Header Group Component
headerGroupComponentParams Typeany	The params used to configure the `headerGroupComponent`.

Columns

field

colId

type

cellDataType

valueGetter

valueFormatter

refData

keyCreator

equals

checkboxSelection

showDisabledCheckboxes

toolPanelClass

suppressColumnsToolPanel

columnGroupShow

icons

suppressNavigable

suppressKeyboardEvent

suppressPaste

suppressFillHandle

Columns: Display

hide

initialHide

lockVisible

lockPosition

suppressMovable

useValueFormatterForExport

Columns: Editing

editable

valueSetter

valueParser

cellEditor

cellEditorParams

cellEditorSelector

cellEditorPopup

cellEditorPopupPosition

singleClickEdit

useValueParserForImport

Columns: Events

onCellValueChanged

onCellClicked

onCellDoubleClicked

onCellContextMenu

Columns: Filter

filter

filterParams

filterValueGetter

getQuickFilterText

floatingFilter

floatingFilterComponent

floatingFilterComponentParams

suppressFiltersToolPanel

Columns: Header

headerName

headerValueGetter

headerTooltip

headerClass

headerComponent

headerComponentParams

wrapHeaderText

autoHeaderHeight

menuTabs

columnsMenuParams

suppressMenu

suppressHeaderKeyboardEvent

headerCheckboxSelection

headerCheckboxSelectionFilteredOnly

headerCheckboxSelectionCurrentPageOnly

Columns: Integrated Charts

chartDataType

Columns: Pinned

pinned

initialPinned

lockPinned

Columns: Pivoting

pivot

initialPivot

pivotIndex

initialPivotIndex

pivotComparator