Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Columns

Each column in the grid is defined using a column definition. Below is the set of all the properties you can set for column definitions. The section column groups details how to group columns in the headers.

Every property below is optional with the exception of children. For column groups, children is mandatory and that's also how the grid is able to distinguish a column from a column group (if children is present, it knows it's a group).

Default Column Definition

As well as defining columns, you can define default properties for the columns, so you don't have to repeat the item everywhere. Use grid property defaultColDef for properties common to all columns and defaultColGroupDef for properties common to column groups. For example the following provides defaults for columns and groups.

var gridOptions = {
    rowData: myRowData,

    // define 3 columns for this grid
    columnDefs: {
        {headerName: 'Col A', field: 'a'}
        {headerName: 'Col B', field: 'b'}
        // this column overrides the stated default, and  uses the number filter
        {headerName: 'Col C', field: 'c', filter: 'number'}
    },

    // the default col def, gets applied to every col
    defaultColDef: {
        // make every column editable
        editable: true,
        // make every column use 'text' filter by default
        filter: 'text'
    },

    // if we had column groups, we could provide default group items here
    defaultColGroupDef: {}
}

Properties for Column Groups & Columns

headerName The name to render in the column header
columnGroupShow Whether to show the column when the group is open / closed.
headerClass Class to use for the header cell. Can be string, array of strings, or function.
toolPanelClass Class to use for the tool panel cell. Can be string, array of strings, or function.
suppressToolPanel Set to true if you do not want this column or group to appear in the tool panel.

Properties for Columns

field The field of the row to get the cells data from
colId 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.
width, minWidth, maxWidth Initial width, min width and max width for the cell. Always stated in pixels (never percentage values).
filter
filterFramework
Filter component to use for this column.
floatingFilterComponent
floatingFilterComponentFramework
Floating filter component to use for this column.
floatingFilterComponentParams Custom params to be passed to floatingFilterComponent/floatingFilterComponentFramework
hide Set to true for this column to be hidden. Naturally you might think, it would make more sense to call this field 'visible' and mark it false to hide, however we want all default values to be false and we want columns to be visible by default.
pinned Set to 'left' or 'right' to pin.
sort Set to 'asc' or 'desc' to sort by this column by default.
sortedAt If doing multi sort by default, this column should say when the sort for each column was done in milliseconds, so the grid knows which order to execute the sort.
headerTooltip Tooltip for the column header
tooltipField The field of the tooltip to apply to the cell.
checkboxSelection Boolean or Function. Set to true (or return true from function) to render a selection checkbox in the column.
cellClass Class to use for the cell. Can be string, array of strings, or function.
cellStyle An object of css values. Or a function returning an object of css values.
editable Set to true if this col is editable, otherwise false. Can also be a function to have different rows editable.
newValueHandler(params)
onCellValueChanged(params)
Callbacks for editing. See editing section for further details.
volatile If true, this cell gets refreshed when api.softRefreshView() gets called.
cellRenderer
cellRendererFramework
cellRenderer to use for this column.
floatingCellRenderer
floatingCellRendererFramework
cellRenderer to use for floating rows in this column. Floating cells will use floatingCellRenderer if available, if not then cellRenderer.
cellEditor
cellEditorFramework
cellEditor to use for this column.
cellFormatter A function for formatting a cell.
floatingCellFormatter A function for formatting a floating cell. Floating cells will use floatingCellRenderer if available, if not then cellFormatter.
valueGetter(params) Expression or function to get the cells value.
headerValueGetter(params) Expression or function to get the cells value.
keyCreator(params) Function to return the key for a value - use this if the value is an object (not a primitive type) and you want to a) use set filter on this field or b) group by this field.
getQuickFilterText 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).
aggFunc Name of function to use for aggregation. One of [sum,min,max,first,last]. Or provide your own agg function.
allowedAggFuncs Aggregation functions allowed on this column eg ['sum','avg']. If missing, all installed functions are allowed. This will restrict what the GUI allows to select only, does not impact when you set columns function via the API.
rowGroupIndex Set this in columns you want to group by. If only grouping by one column, set this to any number (eg 0). If grouping by multiple columns, set this to where you want this column to be in the group (eg 0 for first, 1 for second, and so on).
pivotIndex Set this in columns you want to pivot by. If only pivoting by one column, set this to any number (eg 0). If pivoting by multiple columns, set this to where you want this column to be in the order of pivots (eg 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.
unSortIcon Set to true if you want the unsorted icon to be shown when no sort is applied to this column.
enableRowGroup (ag-Grid-Enterprise only) Set to true if you want to be able to row group by this column via the GUI. This will not block if the API or properties are used to achieve row grouping.
enablePivot (ag-Grid-Enterprise only) Set to true if you want to be able to pivot by this column via the GUI. This will not block if the API or properties are used to achieve pivot.
enableValue (ag-Grid-Enterprise only) Set to true if you want to be able to aggregate by this column via the GUI. This will not block if the API or properties are used to achieve aggregation.
enableCellChangeFlash Set to true to get grid to flash the cell when it's refreshed.
suppressMenu Set to true if no menu should be shown for this column header.
suppressSorting Set to true if no sorting should be done for this column.
suppressSizeToFit Set to true if you want this columns width to be fixed during 'size to fit' operation.
suppressMovable Set to true if you do not want this column to be movable via dragging.
suppressFilter Set to true to not allow filter on this column.
suppressResize Set to true if you do not want this column to be resizable by dragging it's edge.
suppressNavigable Set to true if this col is not navigable (ie cannot be tabbed into), otherwise false. Can also be a function to have different rows navigable.
onCellClicked(params) Function callback, gets called when a cell is clicked.
onCellDoubleClicked(params) Function callback, gets called when a cell is double clicked.
onCellContextMenu(params) Function callback, gets called when a cell is right clicked.

Properties for Column Groups

groupId 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.
children A list containing a mix of columns and column groups.
marryChildren 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 Set to 'true' if this group should be opened by default.