Configuration for columns ColDef<TData, TValue> and column groups ColGroupDef<TData>.
Columns
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'. |
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. |
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. |
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. |
Function or expression. Gets the value from your data for display. |
A function or expression to format a value, should return a string. |
Provided a reference data map to be used to map column values to their respective value from the map. |
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. |
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. |
CSS class to use for the tool panel cell. Can be a string, array of strings, or function. |
Set to true if you do not want this column or group to appear in the Columns Tool Panel. |
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 to use inside the column instead of the grid's default icons. Leave undefined to use defaults. |
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. |
Allows the user to suppress certain keyboard events in the grid cell. |
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. |
Set to true to prevent the fillHandle from being rendered in any cell that belongs to this column |
Customise the list of menu items available in the context menu. |
Context property that can be used to associate arbitrary application data with this column definition. |
Columns: Accessibility
Used for screen reader announcements - the role property of the cells that belong to this column. |
Columns: Display
Set to true for this column to be hidden. |
Same as hide, except only applied when creating a new column. Not applied when updating column definitions. |
Set to true to block making column visible / hidden via the UI (API will still work). |
Lock a column to position to 'left' or'right' to always have this column displayed in that position. true is treated as 'left' |
Set to true if you do not want this column to be movable via dragging. |
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.
Set to true if this column is editable, otherwise false. Can also be a function to have different rows editable. |
Function or expression. Custom function to modify your data based off the new value for saving. Return true if the data changed. |
Function or expression. Parses the value for saving. |
Provide your own cell editor component for this column's cells. |
Params to be passed to the cellEditor component. |
Callback to select which cell editor to be used for a given row within the same column. |
Set to true, to have the cell editor appear in a popup. |
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. |
Set to true to have cells under this column enter edit mode after single click. |
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
Callback for after the value of a cell has changed, either due to editing or the application calling api.setValue(). |
Callback called when a cell is clicked. |
Callback called when a cell is double clicked. |
Callback called when a cell is right clicked. |
Columns: Filter
See Filtering for more information.
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. |
Params to be passed to the filter component specified in filter. |
Function or expression. Gets the value for filtering purposes. |
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). |
Whether to display a floating filter for this column. |
The custom component to be used for rendering the floating filter.
If none is specified the default AG Grid is used. |
Params to be passed to floatingFilterComponent. |
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.
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. |
Function or expression. Gets the value for display in the header. |
Tooltip for the column header |
CSS class to use for the header cell. Can be a string, array of strings, or function. |
The custom header group component to be used for rendering the component header. If none specified the default AG Grid is used. |
The parameters to be passed to the headerComponent. |
If enabled then column header names that are too long for the column width will wrap onto the next line. 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. |
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. |
Params used to change the behaviour and appearance of the Column Chooser/Columns Menu tab. |
Customise the list of menu items available in the column menu. |
Set to true if no menu button should be shown for this column header. |
Set to true to not display the filter button in the column header.
Doesn't apply when columnMenu = 'legacy'. |
Set to true to not display the column menu when the column header is right-clicked.
Doesn't apply when columnMenu = 'legacy'. |
Suppress the grid taking action for the relevant keyboard event when a header is focused. |
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
Defines the chart data type that should be used for a column. |
Columns: Pinned
See Column Pinning for more information.
Pin a column to one side: right or left. A value of true is converted to 'left'. |
Same as pinned, except only applied when creating a new column. Not applied when updating column definitions. |
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
Set to true to pivot by this column. |
Same as pivot, except only applied when creating a new column. Not applied when updating column definitions. |
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). |
Same as pivotIndex, except only applied when creating a new column. Not applied when updating column definitions. |
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. |
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
An object of css values / or function returning an object of css values for a particular cell. |
Class to use for the cell. Can be string, array of strings, or function that returns a string or array of strings. |
Rules which can be applied to include certain CSS classes. |
Provide your own cell Renderer component for this column's cells. |
Params to be passed to the cellRenderer component. |
Callback to select which cell renderer to be used for a given row within the same column. |
Provide your own cell loading Renderer component for this column's cells when using SSRM. |
Params to be passed to the loadingCellRenderer component. |
Callback to select which loading renderer to be used for a given row within the same column. |
Set to true to have the grid calculate the height of a row based on contents of this column. |
Set to true to have the text wrap inside the cell - typically used with autoHeight. |
Set to true to flash a cell when it's refreshed. |
Columns: Row Dragging
See Row Dragging for more information.
boolean or Function. Set to true (or return true from function) to allow row dragging. |
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. |
boolean or Function. Set to true (or return true from function) to allow dragging for native drag and drop. |
Function to allow custom drag functionality for native drag and drop. |
Columns: Row Grouping
(Enterprise only) See Row Grouping
Set to true to row group by this column. |
Same as rowGroup, except only applied when creating a new column. Not applied when updating column definitions. |
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). |
Same as rowGroupIndex, except only applied when creating a new column. Not applied when updating column definitions. |
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. |
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. |
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. |
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. |
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.
Set to false to disable sorting which is enabled by default. |
If sorting by default, set it here. Set to asc or desc. |
Same as sort, except only applied when creating a new column. Not applied when updating column definitions. |
If sorting more than one column by default, specifies order in which the sorting should be applied. |
Same as sortIndex, except only applied when creating a new column. Not applied when updating column definitions. |
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] |
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. 0 valueA is the same as valueB > 0 Sort valueA after valueB < 0 Sort valueA before valueB |
Set to true if you want the unsorted icon to be shown when no sort is applied to this column. |
Columns: Spanning
By default, each cell will take up the width of one column. You can change this behaviour to allow cells to span multiple columns. |
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
The field of the tooltip to apply to the cell. |
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. |
Provide your own tooltip component for the column. |
The params used to configure tooltipComponent. |
Columns: Width
See Column Sizing for more information.
Initial width in pixels for the cell. |
Same as width, except only applied when creating a new column. Not applied when updating column definitions. |
Minimum width in pixels for the cell. |
Maximum width in pixels for the cell. |
Used instead of width when the goal is to fill the remaining empty space of the grid. |
Same as flex, except only applied when creating a new column. Not applied when updating column definitions. |
Set to false to disable resizing which is enabled by default. |
Set to true if you want this column's width to be fixed during 'size to fit' operations. |
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. |
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. |
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. |
Set to true if this group should be opened by default. |
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. |
CSS class to use for the tool panel cell. Can be a string, array of strings, or function. |
Set to true if you do not want this column or group to appear in the Columns Tool Panel. |
Set to true if you do not want this column (filter) or group (filter group) to appear in the Filters Tool Panel. |
Provide your own tooltip component for the column group. |
The params used to configure tooltipComponent. |
Context property that can be used to associate arbitrary application data with this column definition. |
Groups: Header
See Column Headers for more information.
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. |
CSS class to use for the header cell. Can be a string, array of strings, or function. |
Tooltip for the column header |
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. |
The custom header group component to be used for rendering the component header. If none specified the default AG Grid is used. |
The params used to configure the headerGroupComponent. |
Set to true if you don't want the column header for this column to span the whole height of the header container. |
If true the label of the Column Group will not scroll alongside the grid to always remain visible. |