Power Grid
(part of package 'Servoy NG-Grids') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent
Power Grid is an editable table component providing advanced functionality such as row grouping, pivoting, summaries and powerful analytics. It's data is loaded from a JSDataSet, and the changed data (if it is edited) can be exported back as a dataset.
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-datasettable.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-datasettable.columnsAutoSizingOn>
continuousColumnsAutoSizing
Apply 'columnsAutoSizing' whenever columns width are changed Type: Boolean Default Value: false
editNextCellOnEnter
When true, pressing Enter during editing will automatically move to the next cell. Type: Boolean Default Value: false
enableColumnResize
Enables column resizing by user interaction. Type: Boolean Default Value: true
enableSorting
Enable column sorting by clicking on the column's header Type: Boolean Default Value: true
enabled
When false, disables user interaction with the table. Type: Enabled Default Value: true
gridOptions
Map where additional grid properties of ag-grid can be set Type: Json
groupMaxWidth
Maximum allowed width (in pixels) for group rows. Type: Number
groupMinWidth
Minimum allowed width (in pixels) for group rows. Type: Number Default Value: 200
groupRowRendererFunc
Function to customize group row rendering when gridOptions.groupDisplayType is set to 'groupRows' Type: Clientfunction
groupStyleClass
CSS style class applied to group rows. Type: Styleclass
groupWidth
Fixed width (in pixels) for group rows. Type: Number Default Value: 200
headerHeight
The height (in pixels) of the table header. Type: Number Default Value: 33
iconConfig
Default icon configuration for grid controls. Type: CustomType<aggrid-datasettable.iconConfig>
isEditableFunc
Callback that returns the editable state of a cell. Type: Clientfunction
localeText
Map where locales of ag-grid can be set Type: Map
mainMenuItemsConfig
Configuration options for main menu items in the grid. Type: CustomType<aggrid-datasettable.mainMenuItemsConfig>
multiSelect
When true, multiple rows can be selected simultaneously. Type: Boolean Default Value: false
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
pivotMode
Pivoting allows you to take a columns values and turn them into columns Type: Boolean Default Value: false
readOnly
When true, the table operates in read‑only mode. 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
rowStyleClassFunc
Function to add style class to row Type: Clientfunction
showColumnsMenuTab
When true, a dedicated columns menu tab is displayed. Type: Boolean Default Value: false
styleClass
Default CSS style class for the table. Type: Styleclass Default Value: "ag-theme-alpine"
tabSeq
The tab order index for keyboard navigation within the table. Type: Tabseq
toolPanelConfig
Configuration options for the grid’s tool panel. Type: CustomType<aggrid-datasettable.toolPanelConfig>
useLazyLoading
When true, the table uses lazy loading to fetch data on demand. Type: Boolean Default Value: false
visible
Controls whether the table is visible. Type: Visible
Events
onCellClick(rowData,columnId,cellData,event,dataTarget)
Called when the mouse is clicked on a row/cell
Parameters:
onCellDoubleClick(rowData,columnId,cellData,event,dataTarget)
Called when the mouse is double clicked on a row/cell
Parameters:
onCellRightClick(rowData,columnId,cellData,event,dataTarget)
Called when the right mouse button is clicked on a row/cell
Parameters:
onColumnDataChange(rowindex,columnindex,oldvalue,newvalue,event,rowData)
Called when the columns data is changed
Parameters:
{Number} rowindex The index of the row where the change occurred.
{Number} [columnindex] The index of the column where the change occurred.
{Object} [oldvalue] The previous value of the cell.
{Object} [newvalue] The new value of the cell.
{JSEvent} [event] The event that triggered the change.
{Object} rowData The full data object for the row.
Returns: {Boolean}
onColumnFormEditStarted(rowindex,columnindex,value)
Called when the column's form editor is started
Parameters:
onColumnStateChanged(columnState,event)
Called when the columns state is changed
Parameters:
onDrop(sourceRows,targetRow,event)
Called when a row is dropped as a result of a drag-n-drop
Parameters:
{Array<Object>} sourceRows An Array of plain objects if dragged from a power grid, or JSRecord objects if from a data grid
{Object} targetRow The target row where the rows were dropped.
{JSEvent} event The event object associated with the drop action.
onFooterClick(columnindex,event,dataTarget)
Called when the mouse is clicked on a footer cell
Parameters:
onLazyLoadingGetRows(startRow,endRow,rowGroupCols,valueCols,pivotCols,pivotMode,groupKeys,filterModels,sortModels)
Called when lazy loading is used, and new rows are requested to display
Parameters:
{Long} startRow The index of the first row to load.
{Long} endRow The index of the last row to load.
{Array<CustomType<aggrid-datasettable.columnVO>>} rowGroupCols The columns used for grouping.
{Array<CustomType<aggrid-datasettable.columnVO>>} valueCols The columns used for values.
{Array<CustomType<aggrid-datasettable.columnVO>>} pivotCols The columns used for pivoting.
{Boolean} pivotMode Indicates if pivot mode is enabled.
{Array<String>} groupKeys The keys representing the current grouping.
{Array<CustomType<aggrid-datasettable.filterModelVO>>} filterModels The current filter models.
{Array<CustomType<aggrid-datasettable.sortModelVO>>} sortModels The current sort models.
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] The keys representing the group hierarchy.
{Boolean} [isopened] True if the group was expanded, false if collapsed.
onRowSelected(rowData,selected,event)
Called when the mouse is clicked on a row/cell
Parameters:
API
addAggCustomFuncs(aggFuncs)
Add custom aggregate functions. Ex.: addAggCustomFuncs({ myAggregate: '(function (valuesArray) { return myAggValueNumber })'})
Parameters:
{Map} aggFuncs Object with properties names the aggregates name, and values the custom function as string
appendLazyRequestData(dataset,lastRowIndex)
When useLazyLoading is set, this method is used to append the new rows to the table from inside the onLazyLoadingGetRows callback.
The new rows are passed using a dataset.
"lastRowIndex" specifies the index of the last row on the server; if not set, the lazy loading will behave like an infinite scroll, and onLazyLoadingGetRows will be called called until "lastRowIndex" will be set
Parameters:
{JSDataset} dataset The dataset containing the new rows to append to the table. The dataset's structure must align with the table's columns for proper data binding.
{Long} [lastRowIndex] The index of the last row available on the server. If not provided, lazy loading will function as infinite scrolling until this value is set.
autoSizeAllColumns()
Automatically adjusts the widths of all columns to fit their content. This method ensures that each column's width is sized according to the data it contains, without leaving extra unused space.
Example:
// Auto-size all columns in the grid
powerGridInstance.autoSizeAllColumns();deleteColumn(id)
Removes column with id
Parameters:
{String} id The unique identifier of the column to be removed from the component.
deleteRows(rowsKey)
Delete rows - in order to work, pks needs to be set using renderData, and the rowsKey objects needs to have pk
Parameters:
{Array<Object>} rowsKey Delete rows
editCellAt(rowindex,columnindex)
Start cell editing (only works when the table is not in grouping mode).
Parameters:
exportData(fileName,skipHeader,columnGroups,skipFooters,skipGroups,asCSV)
Export data to excel format (xlsx)
Parameters:
{String} [fileName] The name of the file to save the exported data to. If not provided, a default name will be used.
{Boolean} [skipHeader] If true, the headers of the table will be excluded from the exported file. Defaults to false.
{Boolean} [columnGroups] If true, includes column group information in the export. Defaults to false.
{Boolean} [skipFooters] If true, the footers of the table will be excluded from the exported file. Defaults to false.
{Boolean} [skipGroups] If true, group rows will be excluded from the exported file. Defaults to false.
{Boolean} [asCSV] If true, the data will be exported in CSV format instead of XLSX. Defaults to false.
exportToDataset()
Export data to JSDataSet
Returns: JSDataset A dataset object containing the exported grid data, where the first row represents
getAllColumns()
Returns all the columns
Returns: Array<CustomType<aggrid-datasettable.column>> An array of all column objects currently defined in the table.
getColumn(id,forChange)
Gets the column with id. If changes will be made on the returned column, it should be called with forChange set to true
Parameters:
Returns: CustomType<aggrid-datasettable.column> The column object at the specified index.
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 A JSON string representing the current state of the columns, including their width, position, and grouping state.
getExpandedGroups()
Returns currently expanded groups as an object like: {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}
Returns: Object An object representing the currently expanded groups in the table.
getSelectedRows()
Gets selected rows data
Returns: Array<Object> An array of objects representing the data of the currently selected rows in the table.
isPivotMode()
Returns pivot mode state
Returns: Boolean True if the pivot mode is currently enabled, otherwise false.
moveColumn(id,index)
Move column
Parameters:
newColumn(id,index)
Adds new column at specified index. Index is 0 based.
Parameters:
Returns: CustomType<aggrid-datasettable.column> The column object that was created and added to the table.
newRows(rowsData,appendToBeginning)
Create new rows
Parameters:
{Array<Object>} rowsData New rows
{Boolean} [appendToBeginning] If true rows will be added to the beginning of the table
renderData(dataset,pks)
Fills the table with data from a dataset. The column name from the dataset is used to match on the component column id
Parameters:
{JSDataset} [dataset] The dataset containing the data to populate the table. The dataset's column names must match the component's column IDs to bind data correctly.
{Array<String>} [pks] List of dataprovider names; needed in case of using apis: updateRows and deleteRows
restoreColumnState(columnState)
Restore columns state to a previously save one, using getColumnState. If no argument is used, it restores the columns to designe time state. It won't re-create deleted columns.
Parameters:
{String} [columnState] A JSON string representing the saved state of the columns, including width, position, and grouping state. If not provided, the columns will be restored to their design-time state.
scrollToRow(rowData)
Scroll viewport to matching row
Parameters:
{Object} rowData RowData with at least on attribute, used to find the viewport row to scroll to
setExpandedGroups(groups)
Sets expanded groups
Parameters:
{Object} groups An object like {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}
setFormEditorValue(value)
Set the currently opened form editor value
Parameters:
{Object} value Form editor value
setSelectedRows(rowIndexes)
Sets selected rows
Parameters:
{Array<Number>} rowIndexes An array of 0-based row indexes to be selected in the table.
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)
updateRows(rowsData)
Update rows - in order to work, pks needs to be set using renderData, and the rowData objects needs to have pk
Parameters:
{Array<Object>} rowsData Update rows
Types
aggFuncInfo
Information about an aggregation function used in the grid. scripting type: CustomType<aggrid-datasettable.aggFuncInfo>
aggFunc
The aggregation function implementation.
Type: clientfunction
name
The name of the aggregation function.
Type: string
column
Defines a column configuration for the grid. scripting type: CustomType<aggrid-datasettable.column>
aggFunc
Name of function to use for aggregation
Type: string
Default Value: ""
autoResize
Enables auto-resizing of the column based on its content.
Type: boolean
Default Value: true
cellRendererFunc
Function to change the cell rendering
Type: clientfunction
cellStyleClassFunc
Function to determine the CSS style class for the cell dynamically.
Type: clientfunction
columnDef
Map where additional column properties of ag-grid can be set
Type: json
dataprovider
The data provider name associated with the column.
Type: string
dndSource
Allow dragging
Type: boolean
Default Value: false
dndSourceFunc
Boolean function for allow/disallow dragging.
Type: clientfunction
editForm
Form used as custom editor
Type: form
editFormSize
Size configuration for the custom cell editor form.
Type: dimension
Default Value: {"width":300,"height":200}
editType
Type of editing used for that column
Type: string
enablePivot
If the column can be used as pivot
Type: boolean
Default Value: false
enableResize
Enables resizing for this column.
Type: boolean
Default Value: true
enableRowGroup
Allow the user to group or ungroup the column
Type: boolean
Default Value: true
enableSort
Enables sorting for this column.
Type: boolean
Default Value: true
enableToolPanel
When true, the column is available in the tool panel.
Type: boolean
Default Value: true
excluded
When true the column is excluded from the UI
Type: boolean
Default Value: false
exportDisplayValue
If exportData api should export the display value (with format applied) instead of the raw data of the dataset
Type: boolean
Default Value: false
filterType
The type of filter applied to this column.
Type: string
footerStyleClass
CSS style class for the column footer.
Type: styleclass
footerText
The text to be displayed in the column footer.
Type: tagstring
format
Format for the type set in formatType
Type: format
formatType
Type of data the format is applied on
Type: string
Default Value: "TEXT"
headerGroup
Header group, that this column will be part of
Type: tagstring
headerGroupStyleClass
CSS style class for the header group.
Type: styleclass
headerIconStyleClass
(Font awesome) Styles for header icon
Type: styleclass
headerStyleClass
CSS style class for the column header.
Type: styleclass
headerTitle
The title text to be displayed in the column header.
Type: tagstring
headerTooltip
Tooltip text for the column 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
maxWidth
The maximum width allowed for the column in pixels.
Type: int
minWidth
The minimum width allowed for the column in pixels.
Type: int
pivotComparatorFunc
Function to sort the pivot columns
Type: clientfunction
pivotIndex
Set this in columns you want to pivot by
Type: int
Default Value: -1
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
Alternative display mode for the column.
Type: string
styleClass
CSS style class for the cell.
Type: styleclass
tooltip
Tooltip text for the cell.
Type: string
valueGetterFunc
Proxy function for getting the cell value from the model
Type: clientfunction
valuelist
Value list for mapping the column's values.
Type: valuelist
valuelistConfig
Configuration settings for the value list.
Type: valuelistConfig
visible
Visibility flag; when false the column is hidden.
Type: boolean
Default Value: true
width
The width of the column in pixels.
Type: int
Default Value: 0
columnVO
Represents a simplified column value object used in the grid. scripting type: CustomType<aggrid-datasettable.columnVO>
aggFunc
The aggregation function associated with the column.
Type: string
displayName
The display name for the column.
Type: string
id
Unique identifier of the column.
Type: string
columnsAutoSizingOn
Events that trigger auto-sizing of columns. scripting type: CustomType<aggrid-datasettable.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
filterModelVO
Model representing a filter applied to a column. scripting type: CustomType<aggrid-datasettable.filterModelVO>
id
The unique identifier of the filter.
Type: string
operator
The operator used in the filter (e.g., '=', '>', '<').
Type: string
value
The value used for filtering.
Type: string
iconConfig
Icon configuration for grid components. scripting type: CustomType<aggrid-datasettable.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 state.
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 columns.
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 a closed column selection.
Type: styleclass
iconColumnSelectOpen
Icon for an open column selection.
Type: styleclass
iconColumns
Icon representing the columns panel.
Type: styleclass
iconDropNotAllowed
Icon indicating that a drop operation is not allowed.
Type: styleclass
iconEditorChecked
Icon for a checked state in an editor.
Type: styleclass
iconEditorUnchecked
Icon for an unchecked state in an editor.
Type: styleclass
iconFilter
Icon for filtering functionality.
Type: styleclass
iconGroupContracted
Icon representing a collapsed group.
Type: styleclass
iconGroupExpanded
Icon representing an expanded group.
Type: styleclass
iconMenu
Icon for the grid menu.
Type: styleclass
iconMenuAddRowGroup
Icon for adding a row group via the menu.
Type: styleclass
iconMenuPin
Icon for pinning via the menu.
Type: styleclass
iconMenuRemoveRowGroup
Icon for removing a row group via the menu.
Type: styleclass
iconMenuValue
Icon for displaying values in the menu.
Type: styleclass
iconPivotPanel
Icon for the pivot panel.
Type: styleclass
iconRefreshData
Icon for refreshing grid data.
Type: styleclass
Default Value: "glyphicon glyphicon-refresh"
iconRowGroupPanel
Icon for the row group panel.
Type: styleclass
iconSortAscending
Icon indicating ascending sort order.
Type: styleclass
iconSortDescending
Icon indicating descending sort order.
Type: styleclass
iconSortUnSort
Icon indicating an unsorted column.
Type: styleclass
iconValuePanel
Icon for the value panel.
Type: styleclass
mainMenuItemsConfig
Configuration options for the main menu items in the grid. scripting type: CustomType<aggrid-datasettable.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 collapse all groups in the grid.
Type: boolean
Default Value: false
expandAll
Option to expand all groups in the grid.
Type: boolean
Default Value: false
pinSubMenu
Configuration for the pin sub-menu.
Type: boolean
Default Value: false
resetColumns
Option to reset columns to their default state.
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
rowInfo
Information about a row in the grid. scripting type: CustomType<aggrid-datasettable.rowInfo>
sortModelVO
Model representing the sorting state for a column. scripting type: CustomType<aggrid-datasettable.sortModelVO>
colId
The column identifier to which this sorting model applies.
Type: string
sort
The sort direction ('asc' for ascending, 'desc' for descending).
Type: string
toolPanelConfig
Configuration options for the grid's tool panel. scripting type: CustomType<aggrid-datasettable.toolPanelConfig>
suppressColumnExpandAll
When true, the option to expand all columns is suppressed in the tool panel.
Type: boolean
Default Value: false
suppressColumnFilter
When true, the column filter is suppressed in the tool panel.
Type: boolean
Default Value: false
suppressColumnSelectAll
When true, the option to select all columns is suppressed in the tool panel.
Type: boolean
Default Value: false
suppressPivotMode
When true, the pivot mode option is suppressed in the tool panel.
Type: boolean
Default Value: false
suppressPivots
When true, pivot options are suppressed in the tool panel.
Type: boolean
Default Value: false
suppressRowGroups
When true, row groups are suppressed in the tool panel.
Type: boolean
Default Value: false
suppressSideButtons
When true, side buttons in the tool panel are suppressed.
Type: boolean
Default Value: false
suppressValues
When true, values are suppressed in the tool panel.
Type: boolean
Default Value: false
Last updated
Was this helpful?