Data Grid
(part of package 'Servoy NG-Grids') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent
Data Grid is a table with advanced functionality that operates on JSFoundset data (so it can work directly with the database). It is designed to work with a large number of rows, potentially infinite, since data is loaded lazily into the table, even when grouped.
This is a reference page; many components have detailed usage guides here.
Properties
arrowsUpDownMoveWhenEditing
Defines action on TEXTFIELD editor for up/down arrow keys Type: String
checkboxSelection
When true the row has a checkbox for selecting/unselecting Type: Boolean Default Value: false
columns
List all columns to be used in table as dataprovider Type: Array<CustomType<aggrid-groupingtable.column>>
columnsAutoSizing
Auto sizing for columns. SIZE_COLUMNS_TO_FIT: make the currently visible columns fit the screen. AUTO_SIZE: the grid will work out the best width to fit the contents of the 'visible' cells in the column. NONE: no auto sizing action performed Type: String Default Value: null
columnsAutoSizingOn
Apply 'columnsAutoSizing' for these events even if 'continuousColumnsAutoSizing' is false Type: CustomType<aggrid-groupingtable.columnsAutoSizingOn>
continuousColumnsAutoSizing
Apply 'columnsAutoSizing' whenever columns width are changed Type: Boolean Default Value: false
customMainMenu
Menu items to append to the columns menu, beside the default aggrid menus. Type: JSMenu
editNextCellOnEnter
Determines whether the focus should move to the next cell when Enter is pressed. Type: Boolean Default Value: false
enableColumnMove
If moving of columns is enabled Type: Boolean Default Value: true
enableColumnResize
Allow the user to resize columns Type: Boolean Default Value: true
enableSorting
Enable column sorting by clickin on the column's header Type: Boolean Default Value: true
enabled
Flag indicating if the grid is enabled for user interaction. Type: Enabled Default Value: true
gridOptions
Map where additional grid properties of ag-grid can be set Type: Json
groupCheckbox
When true the group has checkbox for selecting/unselecting all child rows Type: Boolean Default Value: false
groupUseEntireRow
When true the group takes the entire row Type: Boolean Default Value: true
iconConfig
Custom icon configuration for grid features (e.g., sort, filter, group icons). Type: CustomType<aggrid-groupingtable.iconConfig>
localeText
Map where locales of ag-grid can be set Type: Map
mainMenuItemsConfig
Configuration for main menu items (customizes options like column pinning, sorting, etc.). Type: CustomType<aggrid-groupingtable.mainMenuItemsConfig>
myFoundset
The foundset where data are fetched from Type: JSFoundset Default Value: {"foundsetSelector":""}
onDragGetImageFunc
Called when row(s) drag-n-drop is started, to get the drag image as an html code. Type: Clientfunction
onDragOverFunc
Callback when dragging over a row - returns one of the strings: 'copy', 'move', 'none' depending on the allowed drag operation. Type: Clientfunction
readOnly
Flag indicating if the grid is in read‑only mode, disabling editing. Type: Boolean Default Value: false
responsiveHeight
Table's height to be set in a responsive form. When responsiveHeight is set to 0, the table will use 100% height of the parent container. When responsiveHeight is set to -1, the table will auto-size it's height to the number of rows displayed inside the grid - in this case there is no vertical scrollbar and all rows are rendered Type: Number Default Value: 300
rowHeight
The height in pixels of the table's rows Type: Number Default Value: 25
rowStyleClassDataprovider
Use dataSource calculation as rowStyleClassDataprovider to set styleClass conditionally to rows. The calculation should return the class name (or names) to be applied to the row Type: Dataprovider
showColumnsMenuTab
If the column selection panel should be shown in the column menu Type: Boolean Default Value: false
showGroupCount
When true the number of rows for groups is shown, beside the name Type: Boolean Default Value: false
showLoadingIndicator
When true, shows a loading indicator while data is being fetched or refreshed. Type: Boolean Default Value: true
styleClass
CSS class for the cell. Type: Styleclass Default Value: "ag-theme-alpine"
tabSeq
Tab sequence index used for keyboard navigation in the grid. Type: Tabseq
toolPanelConfig
Configuration object for the ag‑grid tool panel (e.g., which panels to show, button behavior). Type: CustomType<aggrid-groupingtable.toolPanelConfig>
tooltipTextRefreshData
Tooltip text shown when hovering the refresh button Type: Tagstring Default Value: "Refresh for latest data !"
visible
Controls the visibility of the grid component. Type: Visible
Events
onCellClick(foundsetindex,columnindex,record,event,dataTarget)
Called when the mouse is clicked on a row/cell. The foundsetindex is always -1 when there are grouped rows. If a column is disabled (enabled = false), ensure that you only execute code for that column if columnindex corresponds to it.
@private
Parameters:
{Number} foundsetindex - The index of the clicked row in the foundset (or -1 for grouped rows).
{Number} columnindex - The index of the clicked column in the grid.
{JSRecord} record - The record object corresponding to the clicked row. (Optional)
{JSEvent} [event] - The event object associated with the click. (Optional)
{String} [dataTarget] - Optional identifier indicating the target data context. (Optional)
onCellDoubleClick(foundsetindex,columnindex,record,event,dataTarget)
Called when the mouse is double-clicked on a row/cell. The foundsetindex is always -1 when there are grouped rows. If a column is disabled (enabled = false), ensure that you only execute code for that column if columnindex corresponds to it.
@private
Parameters:
{Number} foundsetindex - The index of the double-clicked row in the foundset (or -1 for grouped rows).
{Number} [columnindex] - The index of the double-clicked column in the grid. (Optional)
{JSRecord} [record] - The record object corresponding to the double-clicked row. (Optional)
{JSEvent} [event] - The event object associated with the double-click. (Optional)
{String} [dataTarget] - Optional identifier indicating the target data context. (Optional)
onCellRightClick(foundsetindex,columnindex,record,event,dataTarget)
Called when the right mouse button is clicked on a row/cell. The foundsetindex is always -1 when there are grouped rows. If a column is disabled (enabled = false), ensure that you only execute code for that column if columnindex corresponds to it.
@private
Parameters:
{Number} foundsetindex - The index of the row where the right-click occurred (or -1 for grouped rows).
{Number} [columnindex] - The index of the right-clicked column in the grid. (Optional)
{JSRecord} [record] - The record object corresponding to the right-clicked row. (Optional)
{JSEvent} [event] - The event object associated with the right-click. (Optional)
{String} [dataTarget] - Optional identifier indicating the target data context. (Optional)
onColumnDataChange(foundsetindex,columnindex,oldvalue,newvalue,event,record)
Called when the columns data is changed
Parameters:
{Number} foundsetindex The index of the row that changed (1-based).
{Number} [columnindex] The index of the column that changed (0-based).
{Object} [oldvalue] The previous value of the cell.
{Object} [newvalue] The new value of the cell.
{JSEvent} [event] The event object associated with the data change.
{JSRecord} [record] The record object representing the changed row.
Returns: {Boolean}
onColumnFormEditStarted(foundsetindex,columnindex,value)
Called when the column's form editor is started
Parameters:
onColumnStateChanged(columnState,event)
Called when the columns state is changed
Parameters:
onCustomMainMenuAction(menuItemName,colId)
Called when a custom main menu item is chosen.
Parameters:
onDrop(sourceRows,targetRecord,event)
Called when a row is dropped as a result of a drag-n-drop
Parameters:
{Array<Object>} sourceRows An Array of JSRecord objects if dragged from a data grid, or plain objects if from a power grid
{JSRecord} targetRecord The target record where the rows were dropped.
{JSEvent} event The event object associated with the drop action.
onElementDataChange()
onFooterClick(columnindex,event,dataTarget)
Called when the mouse is clicked on a footer cell
Parameters:
onReady()
Called when the table is ready to be shown
onRowGroupOpened(groupcolumnindexes,groupkeys,isopened)
Called when group is opened/closed
Parameters:
{Array<Number>} [groupcolumnindexes] An array of column indexes associated with the group.
{Array<Object>} [groupkeys] An array of keys representing the group hierarchy.
{Boolean} [isopened] True if the group is opened; false if closed.
onSelectedRowsChanged(isgroupselection,groupcolumnid,groupkey,groupselection)
Called when the selected rows have changed.
Parameters:
{Boolean} [isgroupselection] Indicates if the selection change pertains to a group row.
{String} [groupcolumnid] The ID of the column used for grouping, if applicable.
{Object} [groupkey] The key identifying the group whose selection has changed.
{Boolean} [groupselection] True if the entire group is selected; false if deselected.
onSort(columnindexes,sorts)
Called when sort has changed
Parameters:
{Array<Number>} [columnindexes] An array of column indexes that have been sorted.
{Array<String>} [sorts] An array of sort orders (e.g., 'asc', 'desc') corresponding to the sorted columns.
API
addFunctionCall(alias,f)
Add a Servoy solution function to the grid, that can be called from AGGRID using params.context.componentParent.executeFunctionCall
Example:
function onLoad(event) {
var f = function(params) {
var generalMenuItems = ['pinSubMenu'];
var saveLayoutItem = {
name: 'Save Layout',
action: function() {
params.context.componentParent.executeFunctionCall('saveLayout', 'myLayout');
}
};
generalMenuItems.push(saveLayoutItem);
return generalMenuItems;
}
elements.datagrid_2.addFunctionCall('saveLayout', saveLayout);
elements.datagrid_2.gridOptions = { "getMainMenuItems": application.generateBrowserFunction(String(f)) };
}Parameters:
autoSizeAllColumns()
Auto-sizes all columns based on content.
editCellAt(foundsetindex,columnindex)
Start cell editing (only works when the table is not in grouping mode).
Parameters:
getCheckboxGroupSelection()
Returns the selected headers or groups in the table when the headerCheckbox or groupCheckbox property is used. The returned value is an array of objects, where each object represents a selected group or header. Each object includes a `colId` representing the column identifier and, for groups, a `groupkey` representing the group key. For headers, the `groupkey` property is not included.
Example:
// Example of returned data
[
{ colId: 'country', groupkey: 'USA' }, // Group selection
{ colId: 'region' } // Header selection
]Returns: Array<Object> The selected headers or groups. Each object has the following structure: - `colId` (String): The identifier of the column. - `groupkey` (String, optional): The key of the group (not included for headers).
getColumn(index)
Gets the column at index. Index is 0 based.
Example:
elements.myElement.getColumn()Parameters:
{Number} index Index between 0 and columns length -1
Returns: CustomType<aggrid-groupingtable.column> The column object at the specified index.
getColumnById(colId)
Gets the column with id colId
Example:
elements.myElement.getColumnById('myid')Parameters:
{String} colId Id of the column
Returns: CustomType<aggrid-groupingtable.column> The column object corresponding to the provided id.
getColumnIndex(colId)
Return the column index for the given column id. Can be used in combination with getColumnState to retrieve the column index for the column state with colId in the columnState object.
Example:
// get the state
var state = elements.table.getColumnState();
// parse the state of each column
var columnsState = JSON.parse(state).columnState;
for (var index = 0; index < columnsState.length; index++) {
// skip column hidden by the user
if (!columnsState[index].hide) {
// get the column using the colId of the columnState
var columnIndex = elements.table.getColumnIndex(columnsState[index].colId);
if (columnIndex > -1) {
var column = elements.table.getColumn(columnIndex);
// do something with column
}
}
}@public
Parameters:
{String} colId The unique identifier of the column whose index is to be retrieved.
Returns: Number The 0-based index of the column corresponding to the given column id, or -1 if the column id is not found.
getColumnState()
Returns the current state of the columns (width, position, grouping state) as a json string that can be used to restore to this state using restoreColumnState
Returns: String The current state of the columns as a JSON string for restoring the state.
getColumnsCount()
Gets the number of columns
Example:
elements.myElement.getColumnsCount()Returns: Number The total number of columns in the specified element.
getExpandedGroups()
Returns currently expanded groups as an object like: {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}
Returns: Object An object representing the currently expanded groups, where each key is a group name, and its value is an object detailing any expanded subgroups.
getGroupedSelection()
Returns the selected rows when in grouping mode
Returns: Array<JSRecord> An array of JSRecord objects representing the selected rows in grouping mode.
getViewColumnById(colId)
Returns the view column corresponding to the given column ID.
Parameters:
{String} colId - The unique identifier of the column.
Returns: CustomType<aggrid-groupingtable.viewColumn> The view column object corresponding to the specified column ID.
getViewColumns()
Returns an array of view columns currently visible in the grid.
Returns: Array<CustomType<aggrid-groupingtable.viewColumn>> An array of view column objects representing the columns currently displayed.
isToolPanelShowing()
Returns true if the ToolPanel is showing
Returns: Boolean `true` if the ToolPanel is showing otherwise `false`
moveColumn(id,index)
Move column
Parameters:
newColumn(dataprovider,index)
Adds new column at specified index. Index is 0 based.
Example:
var column = elements.myElement.newColumn('dataproviderid')Parameters:
Returns: CustomType<aggrid-groupingtable.column> The newly created column object at the specified index with the given dataprovider.
notifyDataChange()
Notify the component about a data change. Makes the component aware of a data change that requires a refresh data.
Call this method when you are aware of a relevant data change in the foundset which may affect data grouping (e.g. group node created or removed). The component will alert the user of the data change and it will suggest to the user to perform a refresh.
Please note that it’s not necessary to notify the table component if the component is not visible; the component will always present the latest data when rendered again.
@public
refreshData()
Force a full refresh of the data.
WARNING ! be aware that calling this API results in bad user experience since all group nodes will be collapsed instantaneously.
@public
removeAllColumns()
Removes all columns.
Example:
elements.myElement.removeAllColumns()Returns: Boolean True if all columns were successfully removed; otherwise, false.
removeColumn(index)
Removes column from specified index. Index is 0 based.
Example:
elements.myElement.removeColumn(0)Parameters:
{Number} index Index between 0 and columns length -1
Returns: Boolean True if the column was successfully removed, false otherwise.
requestFocus(columnindex)
Request focus on the given column
Parameters:
{Number} columnindex Column index in the model of the editing cell (0-based)
restoreColumnState(columnState,onError,columns,filter,sort)
Restore columns state to a previously save one, using getColumnState.
If no argument is used, it restores the columns to designe time state. If the columns from columnState does not match with the columns of the component, no restore will be done.
The optional boolean arguments: columns, filter, sort can be used to specify what to restore: - the columns size/position/visibility (default true), - the filter state (default false), - the sort state (default false).
Parameters:
{String} [columnState] A JSON string representing the saved state of the columns, including width, position, visibility, filters, and sorting. If omitted, the columns will be restored to their design-time state.
{Function} [onError] A callback function to handle errors during the restore process, such as mismatched column configurations.
{Boolean} [columns] Specifies whether to restore the columns' size, position, and visibility. Defaults to true.
{Boolean} [filter] Specifies whether to restore the columns' filter state. Defaults to false.
{Boolean} [sort] Specifies whether to restore the columns' sort state. Defaults to false.
scrollToSelection()
Scroll to the selected row
setCheckboxGroupSelection(groups)
Sets the selected headers or groups in the table when the headerCheckbox or groupCheckbox property is used. The input should be an array of objects where each object represents a selected group or header. The objects should have a `colId` representing the column identifier, and optionally a `groupkey` representing the key of the group. For headers, the `groupkey` should not be included.
Example:
// Example of selecting groups
const selectedGroups = [
{ colId: 'country', groupkey: 'USA' },
{ colId: 'country', groupkey: 'Canada' }
];
elements.myTable.setCheckboxGroupSelection(selectedGroups);Example:
// Example of selecting headers
const selectedHeaders = [
{ colId: 'country' },
{ colId: 'region' }
];
elements.myTable.setCheckboxGroupSelection(selectedHeaders);Parameters:
{Array<Object>} groups The selected headers or groups. Each object should have the following structure: - `colId` (String): The identifier of the column. - `groupkey` (String, optional): The key of the group (not included for headers).
setExpandedGroups(groups)
Sets expanded groups
Parameters:
{Object} groups An object like {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}
setFilterModel(filterModel)
Set the filter model. This api maps to ag-grid's setFilterModel; for more details on the model's structure check this page: https://www.ag-grid.com/angular-data-grid/filter-api/ To clear the filter, use an empty object ({}) as filterModel;
NOTE: The name of the columns from the model are the id properties of the column.
Example:
var filterModel = {
"country": {
"filterType":"text",
"type":"contains",
"filter":"Argentina"
}
};
var filterModelWithCondition = {
"freight": {
"filterType":"number",
"operator":"OR",
"condition1": {
"filterType":"number",
"type":"equals",
"filter":66
},
"condition2": {
"filterType":"number",
"type":"equals",
"filter":23
}
}
};
elements.groupingtable_1.setFilterModel(filterModelWithCondition);
//clear filter
//elements.groupingtable_1.setFilterModel({});@public
Parameters:
{Object} filterModel The filter model object defining the filtering criteria for the grid. Each key represents a column's id, and its value specifies the filter configuration, including filter type, conditions, and operator. To clear all filters, pass an empty object ({} ).
setFormEditorValue(value)
Set the currently opened form editor value
Parameters:
{Object} value Form editor value
setGroupedSelection(selectedRecords)
Set the selection in grouping mode 111. The table must be already in grouping mode, and the record already loaded (the group of the record expanded - see: setExpandedGroups)
Parameters:
{Array<JSRecord>} selectedRecords Form editor value
setReadOnly(readonly,columnids)
Set the table read-only state. If no columnids is used, all columns read-only state is set, otherwise only for the columns specified.
Parameters:
{Boolean} readonly Read-only state
{Array<String>} [columnids] Array of column ids to make ready-only
showToolPanel(show)
Show or hide the ToolPanel
Parameters:
{Boolean} show A flag indicating whether to show (true) or hide (false) the ToolPanel in the Servoy component.
sizeColumnsToFit()
Adjusts the columns' widths to fit the available viewport, ensuring that all visible columns are resized to fill the table's width. This method dynamically resizes columns to ensure no empty space remains in the grid's horizontal viewport.
Example:
elements.myTable.sizeColumnsToFit();stopCellEditing(cancel)
If a cell is editing, it stops the editing
Parameters:
{Boolean} [cancel] 'true' to cancel the editing (ie don't accept changes)
Types
column
Type definition for a grid column. scripting type: CustomType<aggrid-groupingtable.column>
autoResize
Enables auto-resizing for the column.
Type: boolean
Default Value: true
columnDef
Map where additional column properties of ag-grid can be set
Type: json
dataprovider
Data provider identifier for the column.
Type: dataprovider
dndSource
Allow dragging
Type: boolean
Default Value: false
dndSourceDataprovider
Boolean dataprovider for allow/disallow dragging.
Type: dataprovider
editForm
Form used as custom editor
Type: form
editFormSize
Size configuration for the custom editor form.
Type: dimension
Default Value: {"width":300,"height":200}
editType
Type of editing used for that column
Type: modifiable
enableResize
Allows resizing of the column.
Type: boolean
Default Value: true
enableRowGroup
Allow the user to group or ungroup the column
Type: boolean
Default Value: true
enableSort
Allows sorting on this column.
Type: boolean
Default Value: true
enableToolPanel
If the column should be visible in the tool panel
Type: boolean
Default Value: true
enabled
Flag indicating if the column is enabled.
Type: boolean
Default Value: true
excluded
When true the column is excluded from the UI
Type: boolean
Default Value: false
filterType
Filter type to be used for this column.
Type: string
footerStyleClass
CSS class for the column footer.
Type: styleclass
footerText
Footer text to display in the column.
Type: tagstring
footerTextShowAs
Defines how the footer text is rendered (e.g., inline, tooltip).
Type: string
format
Format pattern for the column's data.
Type: format
headerCheckbox
When true the column has checkbox for selecting/unselecting all rows
Type: boolean
Default Value: false
headerGroup
Header group, that this column will be part of
Type: tagstring
headerGroupStyleClass
CSS class for the header group.
Type: styleclass
headerIconStyleClass
(Font awesome) Styles for header icon
Type: styleclass
headerStyleClass
CSS class for the column header.
Type: styleclass
headerTitle
If the column has a database linked dataprovider, the default value of the headerTitle is the title text of the database column or if that is not set, the database column name.
Type: titlestring
headerTooltip
Tooltip text for the header.
Type: tagstring
id
Used to set the column id (colId) property in the serialized column state json string of getColumnState and onColumnStateChanged
Type: string
isEditableDataprovider
Use a Servoy calculation as isEditableDataprovider to set edit state conditionally to the table cell
Type: dataprovider
maxWidth
Maximum width in pixels.
Type: int
minWidth
Minimum width in pixels.
Type: int
rowGroupIndex
Set the rowGroupIndex to group on the column; the index defines the order of the group when there are multiple grouped columns
Type: int
Default Value: -1
showAs
Defines an alternative display mode for the column.
Type: string
stopEditingOnChange
When true, editing stops on change.
Type: boolean
Default Value: false
styleClass
CSS class for the cell.
Type: styleclass
styleClassDataprovider
Use a Servoy calculation as styleClassDataprovider to set styleClass conditionally to the table cell
Type: dataprovider
tooltip
Tooltip text for the cell.
Type: dataprovider
valuelist
Value list used to map column values.
Type: valuelist
valuelistConfig
Configuration for the value list.
Type: valuelistConfig
visible
Visibility state of the column.
Type: boolean
Default Value: true
width
Column width in pixels.
Type: int
Default Value: 0
columnsAutoSizingOn
Events that trigger auto-sizing of columns. scripting type: CustomType<aggrid-groupingtable.columnsAutoSizingOn>
columnResize
Apply 'columnsAutoSizing' when columns are resized
Type: boolean
Default Value: true
columnRowGroupChange
Apply 'columnsAutoSizing' when row grouping is changed
Type: boolean
Default Value: true
displayedColumnsChange
Apply 'columnsAutoSizing' when columns are added/removed
Type: boolean
Default Value: true
gridReady
Apply 'columnsAutoSizing' when grid is ready to be shown
Type: boolean
Default Value: true
gridSizeChange
Apply 'columnsAutoSizing' when grid size changes
Type: boolean
Default Value: true
toolPanelVisibleChange
Apply 'columnsAutoSizing' when the toolpanel visibility is changed
Type: boolean
Default Value: true
functionCall
Definition for a Servoy solution function call. scripting type: CustomType<aggrid-groupingtable.functionCall>
gridConfig
Grid configuration options. scripting type: CustomType<aggrid-groupingtable.gridConfig>
enableColResize
Enables column resizing.
Type: boolean
Default Value: true
enableSorting
Enables column sorting.
Type: boolean
Default Value: true
groupUseEntireRow
When true, group rows span the entire row.
Type: boolean
Default Value: true
groupedColumn
Type definition for a grouped column. scripting type: CustomType<aggrid-groupingtable.groupedColumn>
columnid
Original column identifier associated with this group.
Type: string
dataprovider
Data provider for the grouped column.
Type: dataprovider
format
Format pattern for the grouped column.
Type: format
id
Unique identifier for the grouped column.
Type: string
styleClassDataprovider
Calculation to conditionally set CSS classes for the group.
Type: dataprovider
valuelist
Value list for mapping grouped column data.
Type: valuelist
hashedFoundset
Type definition for a hashed foundset. scripting type: CustomType<aggrid-groupingtable.hashedFoundset>
columns
Column configuration for the foundset.
Type: groupedColumn[]
foundset
The foundset object reference.
Type: foundset
foundsetUUID
Unique identifier for the foundset.
Type: foundsetRef
uuid
Unique hash identifier.
Type: string
iconConfig
Icon configuration for various grid features. scripting type: CustomType<aggrid-groupingtable.iconConfig>
iconCheckboxChecked
Icon for a checked checkbox.
Type: styleclass
iconCheckboxCheckedReadOnly
Icon for a read-only checked checkbox.
Type: styleclass
iconCheckboxIndeterminate
Icon for an indeterminate checkbox.
Type: styleclass
iconCheckboxIndeterminateReadOnly
Icon for a read-only indeterminate checkbox.
Type: styleclass
iconCheckboxUnchecked
Icon for an unchecked checkbox.
Type: styleclass
iconCheckboxUncheckedReadOnly
Icon for a read-only unchecked checkbox.
Type: styleclass
iconClipboardCopy
Icon for copying to the clipboard.
Type: styleclass
iconClipboardPaste
Icon for pasting from the clipboard.
Type: styleclass
iconColumnGroupClosed
Icon for a closed column group.
Type: styleclass
iconColumnGroupOpened
Icon for an open column group.
Type: styleclass
iconColumnMoveAdd
Icon for adding a column.
Type: styleclass
iconColumnMoveGroup
Icon for grouping a column.
Type: styleclass
iconColumnMoveHide
Icon for hiding a column.
Type: styleclass
iconColumnMoveLeft
Icon for moving a column to the left.
Type: styleclass
iconColumnMoveMove
Icon for moving a column.
Type: styleclass
iconColumnMovePin
Icon for pinning a column.
Type: styleclass
iconColumnMovePivot
Icon for pivoting a column.
Type: styleclass
iconColumnMoveRight
Icon for moving a column to the right.
Type: styleclass
iconColumnMoveValue
Icon for moving a column's value.
Type: styleclass
iconColumnSelectClosed
Icon for closed column selection.
Type: styleclass
iconColumnSelectOpen
Icon for open column selection.
Type: styleclass
iconColumns
Icon for the columns panel.
Type: styleclass
iconDropNotAllowed
Icon indicating drop is not allowed.
Type: styleclass
iconEditorChecked
Icon for a checked editor state.
Type: styleclass
iconEditorUnchecked
Icon for an unchecked editor state.
Type: styleclass
iconFilter
Icon for filtering.
Type: styleclass
iconGroupContracted
Icon indicating a contracted group.
Type: styleclass
iconGroupExpanded
Icon indicating an expanded group.
Type: styleclass
iconMenu
Icon for the menu.
Type: styleclass
iconMenuAddRowGroup
Icon for adding a row group via the menu.
Type: styleclass
iconMenuPin
Icon for pinning in the header menu.
Type: styleclass
iconMenuRemoveRowGroup
Icon for removing a row group via the menu.
Type: styleclass
iconMenuValue
Icon for displaying values in the header menu.
Type: styleclass
iconPivotPanel
Icon for the pivot panel.
Type: styleclass
iconRefreshData
Icon for refreshing data.
Type: styleclass
iconRowGroupPanel
Icon for the row group panel.
Type: styleclass
iconSortAscending
Icon for ascending sort.
Type: styleclass
iconSortDescending
Icon for descending sort.
Type: styleclass
iconSortUnSort
Icon for unsorted state.
Type: styleclass
iconValuePanel
Icon for the value panel.
Type: styleclass
mainMenuItemsConfig
Configuration options for main menu items. scripting type: CustomType<aggrid-groupingtable.mainMenuItemsConfig>
autoSizeAll
Option to auto-size all columns.
Type: boolean
Default Value: false
autoSizeThis
Option to auto-size the current column.
Type: boolean
Default Value: false
contractAll
Option to contract all groups.
Type: boolean
Default Value: false
expandAll
Option to expand all groups.
Type: boolean
Default Value: false
pinSubMenu
Configuration for the pin sub-menu.
Type: boolean
Default Value: false
resetColumns
Option to reset columns to default.
Type: boolean
Default Value: false
rowGroup
Option to group rows by this column.
Type: boolean
Default Value: true
rowUnGroup
Option to ungroup rows.
Type: boolean
Default Value: true
valueAggSubMenu
Configuration for the value aggregation sub-menu.
Type: boolean
Default Value: false
toolPanelConfig
Configuration options for the ag‑grid tool panel. scripting type: CustomType<aggrid-groupingtable.toolPanelConfig>
suppressColumnExpandAll
Suppress the "expand all" option in the tool panel.
Type: boolean
Default Value: false
suppressColumnFilter
Suppress the column filter in the tool panel.
Type: boolean
Default Value: false
suppressColumnSelectAll
Suppress the "select all" option in the tool panel.
Type: boolean
Default Value: false
suppressRowGroups
Suppress row groups in the tool panel.
Type: boolean
Default Value: false
suppressSideButtons
Suppress side buttons in the tool panel.
Type: boolean
Default Value: false
viewColumn
Type definition for a view column. scripting type: CustomType<aggrid-groupingtable.viewColumn>
colId
Unique identifier for the view column.
Type: string
hide
When true, the column is hidden.
Type: boolean
rowGroup
Indicates if the column is used for grouping.
Type: boolean
rowGroupIndex
Grouping order index.
Type: int
sort
Sorting order (e.g., asc, desc).
Type: string
sortIndex
Index for multi-column sorting.
Type: int
width
Width of the view column.
Type: int
Last updated
Was this helpful?