Vue Data GridColumn Options Reference

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

Columns

fieldCopy
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'.
colIdCopy
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.
typeCopy
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.
cellDataTypeCopy
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.
valueGetterCopy
string | ValueGetterFunc
Function or expression. Gets the value from your data for display.
valueFormatterCopy
string | ValueFormatterFunc
A function or expression to format a value, should return a string.
refDataCopy
{ [key: string]: string }
Provided a reference data map to be used to map column values to their respective value from the map.
keyCreatorCopy
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.
equalsCopy
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.
toolPanelClassCopy
ToolPanelClass
CSS class to use for the tool panel cell. Can be a string, array of strings, or function.
suppressColumnsToolPanelCopy
boolean
default: false
Set to true if you do not want this column or group to appear in the Columns Tool Panel.
columnGroupShowCopy
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.
iconsCopy
{ [key: string]: ((...args: any[]) => any) | string }
Icons to use inside the column instead of the grid's default icons. Leave undefined to use defaults.
suppressNavigableCopy
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.
suppressKeyboardEventCopy
Function
default: false
Allows the user to suppress certain keyboard events in the grid cell.
suppressPasteCopy
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.
suppressFillHandleCopy
boolean
Set to true to prevent the fillHandle from being rendered in any cell that belongs to this column
contextMenuItemsCopy
(DefaultMenuItem | MenuItemDef)[] | GetContextMenuItems
Customise the list of menu items available in the context menu.
contextCopy
any
Context property that can be used to associate arbitrary application data with this column definition.

Columns: Accessibility

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

Columns: Aggregation

(Enterprise only) See 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.
enableValueCopy
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.
allowedAggFuncsCopy
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.
defaultAggFuncCopy
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: Display

hideCopy
boolean
default: false
Set to true for this column to be hidden.
initialHideCopy
boolean
Same as hide, except only applied when creating a new column. Not applied when updating column definitions.
lockVisibleCopy
boolean
default: false
Set to true to block making column visible / hidden via the UI (API will still work).
lockPositionCopy
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'
suppressMovableCopy
boolean
default: false
Set to true if you do not want this column to be movable via dragging.
useValueFormatterForExportCopy
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.

editableCopy
boolean | EditableCallback
default: false
Set to true if this column is editable, otherwise false. Can also be a function to have different rows editable.
valueSetterCopy
string | ValueSetterFunc
Function or expression. Custom function to modify your data based off the new value for saving. Return true if the data changed.
valueParserCopy
string | ValueParserFunc
Function or expression. Parses the value for saving.
cellEditorCopy
any
Provide your own cell editor component for this column's cells.
cellEditorParamsCopy
any
Params to be passed to the cellEditor component.
cellEditorSelectorCopy
CellEditorSelectorFunc
Callback to select which cell editor to be used for a given row within the same column.
cellEditorPopupCopy
boolean
Set to true, to have the cell editor appear in a popup.
cellEditorPopupPositionCopy
'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.
  • singleClickEditCopy
    boolean
    default: false
    Set to true to have cells under this column enter edit mode after single click.
    useValueParserForImportCopy
    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

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

    Columns: Filter

    See Filtering for more information.

    filterCopy
    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.
    filterParamsCopy
    any
    Params to be passed to the filter component specified in filter.
    filterValueGetterCopy
    string | ValueGetterFunc
    Function or expression. Gets the value for filtering purposes.
    getQuickFilterTextCopy
    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).
    floatingFilterCopy
    boolean
    default: false
    Whether to display a floating filter for this column.
    floatingFilterComponentCopy
    any
    The custom component to be used for rendering the floating filter. If none is specified the default AG Grid is used.
    floatingFilterComponentParamsCopy
    any
    Params to be passed to floatingFilterComponent.
    suppressFiltersToolPanelCopy
    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.
    dateComponentCopy
    any
    Custom date selection component to be used in Date Filters and Date Floating Filters for this column.
    dateComponentParamsCopy
    any
    The parameters to be passed to the dateComponent.

    Columns: Find

    getFindTextCopy
    GetFindTextFunc
    When using Find with custom cell renderers, this allows providing a custom value to search within. E.g. if the cell renderer is displaying text that is different from the cell formatted value. Returning null means Find will not search within the cell.

    Columns: Header

    See Column Headers for more information.

    headerNameCopy
    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.
    headerValueGetterCopy
    string | HeaderValueGetterFunc
    Function or expression. Gets the value for display in the header.
    headerTooltipCopy
    string
    Tooltip for the column header
    headerStyleCopy
    HeaderStyle | HeaderStyleFunc
    An object of CSS values / or function returning an object of CSS values for a particular header.
    headerClassCopy
    HeaderClass
    CSS class to use for the header cell. Can be a string, array of strings, or function.
    headerComponentCopy
    any
    The custom header group component to be used for rendering the component header. If none specified the default AG Grid is used.
    headerComponentParamsCopy
    any
    The parameters to be passed to the headerComponent.
    wrapHeaderTextCopy
    boolean
    If enabled then column header names that are too long for the column width will wrap onto the next line. Default false
    autoHeaderHeightCopy
    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.
    menuTabsCopy
    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.
    columnChooserParamsCopy
    ColumnChooserParams
    Params used to change the behaviour and appearance of the Column Chooser/Columns Menu tab.
    mainMenuItemsCopy
    (DefaultMenuItem | MenuItemDef)[] | GetMainMenuItems
    Customise the list of menu items available in the column menu.
    suppressHeaderMenuButtonCopy
    boolean
    default: false
    Set to true if no menu button should be shown for this column header.
    suppressHeaderFilterButtonCopy
    boolean
    default: false
    Set to true to not display the filter button in the column header. Doesn't apply when columnMenu = 'legacy'.
    suppressHeaderContextMenuCopy
    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'.
    suppressHeaderKeyboardEventCopy
    Function
    Suppress the grid taking action for the relevant keyboard event when a header is focused.
    suppressFloatingFilterButtonCopy
    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

    chartDataTypeCopy
    'category' | 'series' | 'time' | 'excluded'
    Defines the chart data type that should be used for a column.

    Columns: Pinned

    See Column Pinning for more information.

    pinnedCopy
    boolean | 'left' | 'right' | null
    Pin a column to one side: right or left. A value of true is converted to 'left'.
    initialPinnedCopy
    boolean | 'left' | 'right'
    Same as pinned, except only applied when creating a new column. Not applied when updating column definitions.
    lockPinnedCopy
    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

    pivotCopy
    boolean
    Set to true to pivot by this column.
    initialPivotCopy
    boolean
    Same as pivot, except only applied when creating a new column. Not applied when updating column definitions.
    pivotIndexCopy
    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).
    initialPivotIndexCopy
    number
    Same as pivotIndex, except only applied when creating a new column. Not applied when updating column definitions.
    enablePivotCopy
    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.
    pivotComparatorCopy
    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.

    Columns: Rendering and Styling

    cellStyleCopy
    CellStyle | CellStyleFunc
    An object of CSS values / or function returning an object of CSS values for a particular cell.
    cellClassCopy
    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.
    cellClassRulesCopy
    CellClassRules
    Rules which can be applied to include certain CSS classes.
    cellRendererCopy
    any
    Provide your own cell Renderer component for this column's cells.
    cellRendererParamsCopy
    any
    Params to be passed to the cellRenderer component.
    cellRendererSelectorCopy
    CellRendererSelectorFunc
    Callback to select which cell renderer to be used for a given row within the same column.
    loadingCellRendererCopy
    any
    Provide your own cell loading Renderer component for this column's cells when using SSRM.
    loadingCellRendererParamsCopy
    any
    Params to be passed to the loadingCellRenderer component.
    loadingCellRendererSelectorCopy
    CellRendererSelectorFunc
    Callback to select which loading renderer to be used for a given row within the same column.
    autoHeightCopy
    boolean
    default: false
    Set to true to have the grid calculate the height of a row based on contents of this column.
    wrapTextCopy
    boolean
    default: false
    Set to true to have the text wrap inside the cell - typically used with autoHeight.
    enableCellChangeFlashCopy
    boolean
    default: false
    Set to true to flash a cell when it's refreshed.

    Columns: Row Dragging

    See Row Dragging for more information.

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

    Columns: Row Grouping

    (Enterprise only) See Row Grouping

    rowGroupCopy
    boolean
    default: false
    Set to true to row group by this column.
    initialRowGroupCopy
    boolean
    Same as rowGroup, except only applied when creating a new column. Not applied when updating column definitions.
    rowGroupIndexCopy
    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).
    initialRowGroupIndexCopy
    number
    Same as rowGroupIndex, except only applied when creating a new column. Not applied when updating column definitions.
    enableRowGroupCopy
    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.
    showRowGroupCopy
    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.

    Columns: Sort

    See Row Sorting for more information.

    sortableCopy
    boolean
    default: true
    Set to false to disable sorting which is enabled by default.
    sortCopy
    SortDirection
    If sorting by default, set it here. Set to asc or desc.
    initialSortCopy
    SortDirection
    Same as sort, except only applied when creating a new column. Not applied when updating column definitions.
    sortIndexCopy
    number | null
    If sorting more than one column by default, specifies order in which the sorting should be applied.
    initialSortIndexCopy
    number
    Same as sortIndex, except only applied when creating a new column. Not applied when updating column definitions.
    sortingOrderCopy
    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]
    comparatorCopy
    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
  • unSortIconCopy
    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

    colSpanCopy
    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.
    spanRowsCopy
    boolean | ((params: SpanRowsParams) => boolean)
    Set to true to automatically merge cells in this column with equal values. Provide a callback to specify custom merging logic.

    Columns: Tooltips

    tooltipFieldCopy
    ColDefField
    The field of the tooltip to apply to the cell.
    tooltipValueGetterCopy
    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.
    tooltipComponentCopy
    any
    Provide your own tooltip component for the column.
    tooltipComponentParamsCopy
    any
    The params used to configure tooltipComponent.

    Columns: Width

    See Column Sizing for more information.

    widthCopy
    number
    Initial width in pixels for the cell. If no width or flex properties set, cell width will default to 200 pixels.
    initialWidthCopy
    number
    Same as width, except only applied when creating a new column. Not applied when updating column definitions.
    minWidthCopy
    number
    Minimum width in pixels for the cell.
    maxWidthCopy
    number
    Maximum width in pixels for the cell.
    flexCopy
    number
    Equivalent to flex-grow in CSS. When flex is set on one or more columns, any width value is ignored and instead the remaining free space in the grid is divided among flex columns in proportion to their flex value, so a column with flex: 2 will be twice the size as one with flex: 1.
    initialFlexCopy
    number
    Same as flex, except only applied when creating a new column. Not applied when updating column definitions.
    resizableCopy
    boolean
    default: true
    Set to false to disable resizing which is enabled by default.
    suppressSizeToFitCopy
    boolean
    default: false
    Set to true if you want this column's width to be fixed during 'size to fit' operations.
    suppressAutoSizeCopy
    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.

    A list containing a mix of columns and column groups.
    groupIdCopy
    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.
    marryChildrenCopy
    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.
    openByDefaultCopy
    boolean
    default: false
    Set to true if this group should be opened by default.
    columnGroupShowCopy
    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.
    toolPanelClassCopy
    ToolPanelClass
    CSS class to use for the tool panel cell. Can be a string, array of strings, or function.
    suppressColumnsToolPanelCopy
    boolean
    default: false
    Set to true if you do not want this column or group to appear in the Columns Tool Panel.
    suppressFiltersToolPanelCopy
    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.
    tooltipComponentCopy
    any
    Provide your own tooltip component for the column group.
    tooltipComponentParamsCopy
    any
    The params used to configure tooltipComponent.
    contextCopy
    any
    Context property that can be used to associate arbitrary application data with this column definition.

    Groups: Header

    See Column Headers for more information.

    headerNameCopy
    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.
    headerClassCopy
    HeaderClass
    CSS class to use for the header cell. Can be a string, array of strings, or function.
    headerTooltipCopy
    string
    Tooltip for the column header
    autoHeaderHeightCopy
    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.
    headerGroupComponentCopy
    any
    The custom header group component to be used for rendering the component header. If none specified the default AG Grid is used.
    headerGroupComponentParamsCopy
    any
    The params used to configure the headerGroupComponent.
    suppressSpanHeaderHeightCopy
    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.
    suppressStickyLabelCopy
    boolean
    default: false
    If true the label of the Column Group will not scroll alongside the grid to always remain visible.