Angular Data GridColumn Options Reference

Configuration for columns ColDef<TData, TValue> and column groups ColGroupDef<TData>.

Columns

field
ColDefField
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'.
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.
cellDataType
boolean | string
default: true
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.
valueGetter
string | ValueGetterFunc
Function or expression. Gets the value from your data for display.
valueFormatter
string | ValueFormatterFunc
A function or expression to format a value, should return a string.
refData
{ [key: string]: string }
Provided a reference data map to be used to map column values to their respective value from the map.
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.
equals
Function
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.
toolPanelClass
ToolPanelClass
CSS class to use for the tool panel cell. Can be a string, array of strings, or function.
suppressColumnsToolPanel
boolean
default: false
Set to true if you do not want this column or group to appear in the Columns Tool Panel.
columnGroupShow
ColumnGroupShowType
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
{ [key: string]: ((...args: any[]) => any) | string }
Icons to use inside the column instead of the grid's default icons. Leave undefined to use defaults.
suppressNavigable
boolean | SuppressNavigableCallback
default: false
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
Function
default: false
Allows the user to suppress certain keyboard events in the grid cell.
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.
suppressFillHandle
boolean
Set to true to prevent the fillHandle from being rendered in any cell that belongs to this column
contextMenuItems
(string | MenuItemDef)[] | GetContextMenuItems
Customise the list of menu items available in the context menu.
context
any
Context property that can be used to associate arbitrary application data with this column definition.

Columns: Accessibility

cellAriaRole
string
default: 'gridcell'
Used for screen reader announcements - the role property of the cells that belong to this column.

Columns: Display

hide
boolean
default: false
Set to true for this column to be hidden.
initialHide
boolean
Same as hide, except only applied when creating a new column. Not applied when updating column definitions.
lockVisible
boolean
default: false
Set to true to block making column visible / hidden via the UI (API will still work).
lockPosition
boolean | '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
boolean
default: false
Set to true if you do not want this column to be movable via dragging.
useValueFormatterForExport
boolean
default: true
By default, values are formatted 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. Set to false to prevent values from being formatted for these operations. Regardless of this option, if custom handling is provided for the export operation, the value formatter will not be used.

Columns: Editing

See Cell Editing for more information.

editable
boolean | EditableCallback
default: false
Set to true if this column is editable, otherwise false. Can also be a function to have different rows editable.
valueSetter
string | ValueSetterFunc
Function or expression. Custom function to modify your data based off the new value for saving. Return true if the data changed.
valueParser
string | ValueParserFunc
Function or expression. Parses the value for saving.
cellEditor
any
Provide your own cell editor component for this column's cells.
cellEditorParams
any
Params to be passed to the cellEditor component.
cellEditorSelector
CellEditorSelectorFunc
Callback to select which cell editor to be used for a given row within the same column.
cellEditorPopup
boolean
Set to true, to have the cell editor appear in a popup.
cellEditorPopupPosition
'over' | 'under'
default: 'over'
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
    boolean
    default: false
    Set to true to have cells under this column enter edit mode after single click.
    useValueParserForImport
    boolean
    default: true
    By default, values are parsed using the column's valueParser when importing data to the grid. This applies to clipboard operations and the fill handle. Set to false to prevent values from being parsed for these operations. Regardless of this option, if custom handling is provided for the import operation, the value parser will not be used.

    Columns: Events

    onCellValueChanged
    NewValueParams
    Callback for after the value of a cell has changed, either due to editing or the application calling api.setValue().
    onCellClicked
    CellClickedEvent
    Callback called when a cell is clicked.
    onCellDoubleClicked
    CellDoubleClickedEvent
    Callback called when a cell is double clicked.
    onCellContextMenu
    CellContextMenuEvent
    Callback called when a cell is right clicked.

    Columns: Filter

    See Filtering for more information.

    filter
    any
    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.
    filterParams
    any
    Params to be passed to the filter component specified in filter.
    filterValueGetter
    string | ValueGetterFunc
    Function or expression. Gets the value for filtering purposes.
    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).
    floatingFilter
    boolean
    default: false
    Whether to display a floating filter for this column.
    floatingFilterComponent
    any
    The custom component to be used for rendering the floating filter. If none is specified the default AG Grid is used.
    floatingFilterComponentParams
    any
    Params to be passed to floatingFilterComponent.
    suppressFiltersToolPanel
    boolean
    default: false
    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
    string
    The name to render in the column header. If not specified and field is specified, the field name will be used as the header name.
    headerValueGetter
    string | HeaderValueGetterFunc
    Function or expression. Gets the value for display in the header.
    headerTooltip
    string
    Tooltip for the column header
    headerClass
    HeaderClass
    CSS class to use for the header cell. Can be a string, array of strings, or function.
    headerComponent
    any
    The custom header group component to be used for rendering the component header. If none specified the default AG Grid is used.
    headerComponentParams
    any
    The parameters to be passed to the headerComponent.
    wrapHeaderText
    boolean
    If enabled then column header names that are too long for the column width will wrap onto the next line. Default false
    autoHeaderHeight
    boolean
    default: false
    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.
    menuTabs
    ColumnMenuTab[]
    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.
    columnChooserParams
    ColumnChooserParams
    Params used to change the behaviour and appearance of the Column Chooser/Columns Menu tab.
    mainMenuItems
    (string | MenuItemDef)[] | GetMainMenuItems
    Customise the list of menu items available in the column menu.
    suppressHeaderMenuButton
    boolean
    default: false
    Set to true if no menu button should be shown for this column header.
    suppressHeaderFilterButton
    boolean
    default: false
    Set to true to not display the filter button in the column header. Doesn't apply when columnMenu = 'legacy'.
    suppressHeaderContextMenu
    boolean
    default: false
    Set to true to not display the column menu when the column header is right-clicked. Doesn't apply when columnMenu = 'legacy'.
    suppressHeaderKeyboardEvent
    Function
    Suppress the grid taking action for the relevant keyboard event when a header is focused.
    suppressFloatingFilterButton
    boolean
    If true, the button in the floating filter that opens the parent filter in a popup will not be displayed. Only applies if floatingFilter = true.

    Columns: Integrated Charts

    (Enterprise only) See Integrated Charts

    chartDataType
    '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
    boolean | 'left' | 'right' | null
    Pin a column to one side: right or left. A value of true is converted to 'left'.
    initialPinned
    boolean | 'left' | 'right'
    Same as pinned, except only applied when creating a new column. Not applied when updating column definitions.
    lockPinned
    boolean
    default: false
    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
    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
    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
    boolean
    default: false
    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
    CellStyle | CellStyleFunc
    An object of css values / or function returning an object of css values for a particular cell.
    cellClass
    string | string[] | CellClassFunc
    Class to use for the cell. Can be string, array of strings, or function that returns a string or array of strings.
    cellClassRules
    CellClassRules
    Rules which can be applied to include certain CSS classes.
    cellRenderer
    any
    Provide your own cell Renderer component for this column's cells.
    cellRendererParams
    any
    Params to be passed to the cellRenderer component.
    cellRendererSelector
    CellRendererSelectorFunc
    Callback to select which cell renderer to be used for a given row within the same column.
    loadingCellRenderer
    any
    Provide your own cell loading Renderer component for this column's cells when using SSRM.
    loadingCellRendererParams
    any
    Params to be passed to the loadingCellRenderer component.
    loadingCellRendererSelector
    CellRendererSelectorFunc
    Callback to select which loading renderer to be used for a given row within the same column.
    autoHeight
    boolean
    default: false
    Set to true to have the grid calculate the height of a row based on contents of this column.
    wrapText
    boolean
    default: false
    Set to true to have the text wrap inside the cell - typically used with autoHeight.
    enableCellChangeFlash
    boolean
    default: false
    Set to true to flash a cell when it's refreshed.

    Columns: Row Dragging

    See Row Dragging for more information.

    rowDrag
    boolean | RowDragCallback
    default: false
    boolean or Function. Set to true (or return true from function) to allow row dragging.
    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 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
    boolean | DndSourceCallback
    default: false
    boolean or Function. Set to true (or return true from function) to allow dragging for native drag and drop.
    dndSourceOnRowDrag
    Function
    Function to allow custom drag functionality for native drag and drop.

    Columns: Row Grouping

    (Enterprise only) See Row Grouping

    rowGroup
    boolean
    default: false
    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
    default: false
    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
    string | boolean
    Set to true to have the grid place the values for the group into the cell, or put the name of a grouped column to just show that group.
    enableValue
    boolean
    default: false
    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.
    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.
    Same as aggFunc, except only applied when creating a new column. Not applied when updating column definitions.
    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.
    defaultAggFunc
    string
    default: 'sum'
    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
    boolean
    default: true
    Set to false to disable sorting which is enabled by default.
    sort
    SortDirection
    If sorting by default, set it here. Set to asc or desc.
    initialSort
    SortDirection
    Same as sort, except only applied when creating a new column. Not applied when updating column definitions.
    sortIndex
    number | null
    If sorting more than one column by default, specifies order in which the sorting should be applied.
    initialSortIndex
    number
    Same as sortIndex, except only applied when creating a new column. Not applied when updating column definitions.
    sortingOrder
    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
    Function
    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
    boolean
    default: false
    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
    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.
    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.

    Columns: Tooltips

    tooltipField
    ColDefField
    The field of the tooltip to apply to the cell.
    tooltipValueGetter
    Function
    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.
    tooltipComponent
    any
    Provide your own tooltip component for the column.
    tooltipComponentParams
    any
    The params used to configure tooltipComponent.

    Columns: Width

    See Column Sizing for more information.

    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.
    initialFlex
    number
    Same as flex, except only applied when creating a new column. Not applied when updating column definitions.
    resizable
    boolean
    default: true
    Set to false to disable resizing which is enabled by default.
    suppressSizeToFit
    boolean
    default: false
    Set to true if you want this column's width to be fixed during 'size to fit' operations.
    suppressAutoSize
    boolean
    default: false
    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 required
    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 API.
    marryChildren
    boolean
    default: false
    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.
    openByDefault
    boolean
    default: false
    Set to true if this group should be opened by default.
    columnGroupShow
    ColumnGroupShowType
    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
    ToolPanelClass
    CSS class to use for the tool panel cell. Can be a string, array of strings, or function.
    suppressColumnsToolPanel
    boolean
    default: false
    Set to true if you do not want this column or group to appear in the Columns Tool Panel.
    suppressFiltersToolPanel
    boolean
    default: false
    Set to true if you do not want this column (filter) or group (filter group) to appear in the Filters Tool Panel.
    tooltipComponent
    any
    Provide your own tooltip component for the column group.
    tooltipComponentParams
    any
    The params used to configure tooltipComponent.
    context
    any
    Context property that can be used to associate arbitrary application data with this column definition.

    Groups: Header

    See Column Headers for more information.

    headerName
    string
    The name to render in the column header. If not specified and field is specified, the field name will be used as the header name.
    headerClass
    HeaderClass
    CSS class to use for the header cell. Can be a string, array of strings, or function.
    headerTooltip
    string
    Tooltip for the column header
    autoHeaderHeight
    boolean
    default: false
    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.
    headerGroupComponent
    any
    The custom header group component to be used for rendering the component header. If none specified the default AG Grid is used.
    headerGroupComponentParams
    any
    The params used to configure the headerGroupComponent.
    suppressSpanHeaderHeight
    boolean
    default: false
    Set to true if you don't want the column header for this column to span the whole height of the header container.
    suppressStickyLabel
    boolean
    default: false
    If true the label of the Column Group will not scroll alongside the grid to always remain visible.