Power Grid
Last updated
Was this helpful?
Last updated
Was this helpful?
(part of package '') Extends designtime/SolutionModel: Extends runtime:
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 .
Defines action on TEXTFIELD editor for up/down arrow keys Type:
When true the row has a checkbox for selecting/unselecting Type: Default Value: false
List all columns to be used in table as dataprovider Type:
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: Default Value: null
Called when the mouse is clicked on a row/cell
Parameters:
Called when the mouse is double clicked on a row/cell
Parameters:
Called when the right mouse button is clicked on a row/cell
Parameters:
Called when the columns data is changed
Parameters:
Called when the column's form editor is started
Parameters:
Called when the columns state is changed
Parameters:
Called when a row is dropped as a result of a drag-n-drop
Parameters:
Called when the mouse is clicked on a footer cell
Parameters:
Called when lazy loading is used, and new rows are requested to display
Parameters:
Called when the table is ready to be shown
Called when group is opened/closed
Parameters:
Called when the mouse is clicked on a row/cell
Parameters:
Add custom aggregate functions. Ex.: addAggCustomFuncs({ myAggregate: '(function (valuesArray) { return myAggValueNumber })'})
Parameters:
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:
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:
Removes column with id
Parameters:
Delete rows - in order to work, pks needs to be set using renderData, and the rowsKey objects needs to have pk
Parameters:
Start cell editing (only works when the table is not in grouping mode).
Parameters:
Export data to excel format (xlsx)
Parameters:
Export data to JSDataSet
Returns all the columns
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 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 currently expanded groups as an object like: {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}
Gets selected rows data
Returns pivot mode state
Move column
Parameters:
Adds new column at specified index. Index is 0 based.
Parameters:
Create new rows
Parameters:
Fills the table with data from a dataset. The column name from the dataset is used to match on the component column id
Parameters:
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:
Scroll viewport to matching row
Parameters:
Sets expanded groups
Parameters:
Set the currently opened form editor value
Parameters:
Sets selected rows
Parameters:
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:
If a cell is editing, it stops the editing
Parameters:
Update rows - in order to work, pks needs to be set using renderData, and the rowData objects needs to have pk
Parameters:
Information about an aggregation function used in the grid. scripting type: CustomType<aggrid-datasettable.aggFuncInfo>
aggFunc
The aggregation function implementation.
name
The name of the aggregation function.
Defines a column configuration for the grid. scripting type: CustomType<aggrid-datasettable.column>
aggFunc
Name of function to use for aggregation
Default Value: ""
autoResize
Enables auto-resizing of the column based on its content.
Default Value: true
cellRendererFunc
Function to change the cell rendering
cellStyleClassFunc
Function to determine the CSS style class for the cell dynamically.
columnDef
Map where additional column properties of ag-grid can be set
dataprovider
The data provider name associated with the column.
dndSource
Allow dragging
Default Value: false
dndSourceFunc
Boolean function for allow/disallow dragging.
editForm
Form used as custom editor
editFormSize
Size configuration for the custom cell editor form.
Default Value: {"width":300,"height":200}
editType
Type of editing used for that column
enablePivot
If the column can be used as pivot
Default Value: false
enableResize
Enables resizing for this column.
Default Value: true
enableRowGroup
Allow the user to group or ungroup the column
Default Value: true
enableSort
Enables sorting for this column.
Default Value: true
enableToolPanel
When true, the column is available in the tool panel.
Default Value: true
excluded
When true the column is excluded from the UI
Default Value: false
exportDisplayValue
If exportData api should export the display value (with format applied) instead of the raw data of the dataset
Default Value: false
filterType
The type of filter applied to this column.
footerStyleClass
CSS style class for the column footer.
footerText
The text to be displayed in the column footer.
format
Format for the type set in formatType
formatType
Type of data the format is applied on
Default Value: "TEXT"
headerGroup
Header group, that this column will be part of
headerGroupStyleClass
CSS style class for the header group.
headerIconStyleClass
(Font awesome) Styles for header icon
headerStyleClass
CSS style class for the column header.
headerTitle
The title text to be displayed in the column header.
headerTooltip
Tooltip text for the column header.
id
Used to set the column id (colId) property in the serialized column state json string of getColumnState and onColumnStateChanged
maxWidth
The maximum width allowed for the column in pixels.
minWidth
The minimum width allowed for the column in pixels.
pivotComparatorFunc
Function to sort the pivot columns
pivotIndex
Set this in columns you want to pivot by
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
Default Value: -1
showAs
Alternative display mode for the column.
styleClass
CSS style class for the cell.
tooltip
Tooltip text for the cell.
valueGetterFunc
Proxy function for getting the cell value from the model
valuelist
Value list for mapping the column's values.
valuelistConfig
Configuration settings for the value list.
visible
Visibility flag; when false the column is hidden.
Default Value: true
width
The width of the column in pixels.
Default Value: 0
Represents a simplified column value object used in the grid. scripting type: CustomType<aggrid-datasettable.columnVO>
aggFunc
The aggregation function associated with the column.
displayName
The display name for the column.
id
Unique identifier of the column.
Events that trigger auto-sizing of columns. scripting type: CustomType<aggrid-datasettable.columnsAutoSizingOn>
columnResize
Apply 'columnsAutoSizing' when columns are resized
Default Value: true
columnRowGroupChange
Apply 'columnsAutoSizing' when row grouping is changed
Default Value: true
displayedColumnsChange
Apply 'columnsAutoSizing' when columns are added/removed
Default Value: true
gridReady
Apply 'columnsAutoSizing' when grid is ready to be shown
Default Value: true
gridSizeChange
Apply 'columnsAutoSizing' when grid size changes
Default Value: true
toolPanelVisibleChange
Apply 'columnsAutoSizing' when the toolpanel visibility is changed
Default Value: true
Model representing a filter applied to a column. scripting type: CustomType<aggrid-datasettable.filterModelVO>
id
The unique identifier of the filter.
operator
The operator used in the filter (e.g., '=', '>', '<').
value
The value used for filtering.
Icon configuration for grid components. scripting type: CustomType<aggrid-datasettable.iconConfig>
iconCheckboxChecked
Icon for a checked checkbox.
iconCheckboxCheckedReadOnly
Icon for a read-only checked checkbox.
iconCheckboxIndeterminate
Icon for an indeterminate checkbox state.
iconCheckboxIndeterminateReadOnly
Icon for a read-only indeterminate checkbox.
iconCheckboxUnchecked
Icon for an unchecked checkbox.
iconCheckboxUncheckedReadOnly
Icon for a read-only unchecked checkbox.
iconClipboardCopy
Icon for copying to the clipboard.
iconClipboardPaste
Icon for pasting from the clipboard.
iconColumnGroupClosed
Icon for a closed column group.
iconColumnGroupOpened
Icon for an open column group.
iconColumnMoveAdd
Icon for adding a column.
iconColumnMoveGroup
Icon for grouping columns.
iconColumnMoveHide
Icon for hiding a column.
iconColumnMoveLeft
Icon for moving a column to the left.
iconColumnMoveMove
Icon for moving a column.
iconColumnMovePin
Icon for pinning a column.
iconColumnMovePivot
Icon for pivoting a column.
iconColumnMoveRight
Icon for moving a column to the right.
iconColumnMoveValue
Icon for moving a column's value.
iconColumnSelectClosed
Icon for a closed column selection.
iconColumnSelectOpen
Icon for an open column selection.
iconColumns
Icon representing the columns panel.
iconDropNotAllowed
Icon indicating that a drop operation is not allowed.
iconEditorChecked
Icon for a checked state in an editor.
iconEditorUnchecked
Icon for an unchecked state in an editor.
iconFilter
Icon for filtering functionality.
iconGroupContracted
Icon representing a collapsed group.
iconGroupExpanded
Icon representing an expanded group.
iconMenu
Icon for the grid menu.
iconMenuAddRowGroup
Icon for adding a row group via the menu.
iconMenuPin
Icon for pinning via the menu.
iconMenuRemoveRowGroup
Icon for removing a row group via the menu.
iconMenuValue
Icon for displaying values in the menu.
iconPivotPanel
Icon for the pivot panel.
iconRefreshData
Icon for refreshing grid data.
Default Value: "glyphicon glyphicon-refresh"
iconRowGroupPanel
Icon for the row group panel.
iconSortAscending
Icon indicating ascending sort order.
iconSortDescending
Icon indicating descending sort order.
iconSortUnSort
Icon indicating an unsorted column.
iconValuePanel
Icon for the value panel.
Configuration options for the main menu items in the grid. scripting type: CustomType<aggrid-datasettable.mainMenuItemsConfig>
autoSizeAll
Option to auto-size all columns.
Default Value: false
autoSizeThis
Option to auto-size the current column.
Default Value: false
contractAll
Option to collapse all groups in the grid.
Default Value: false
expandAll
Option to expand all groups in the grid.
Default Value: false
pinSubMenu
Configuration for the pin sub-menu.
Default Value: false
resetColumns
Option to reset columns to their default state.
Default Value: false
rowGroup
Option to group rows by this column.
Default Value: true
rowUnGroup
Option to ungroup rows.
Default Value: true
valueAggSubMenu
Configuration for the value aggregation sub-menu.
Default Value: false
Information about a row in the grid. scripting type: CustomType<aggrid-datasettable.rowInfo>
rowData
The data object for the row.
rowIndex
The index of the row in the grid.
Model representing the sorting state for a column. scripting type: CustomType<aggrid-datasettable.sortModelVO>
colId
The column identifier to which this sorting model applies.
sort
The sort direction ('asc' for ascending, 'desc' for descending).
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.
Default Value: false
suppressColumnFilter
When true, the column filter is suppressed in the tool panel.
Default Value: false
suppressColumnSelectAll
When true, the option to select all columns is suppressed in the tool panel.
Default Value: false
suppressPivotMode
When true, the pivot mode option is suppressed in the tool panel.
Default Value: false
suppressPivots
When true, pivot options are suppressed in the tool panel.
Default Value: false
suppressRowGroups
When true, row groups are suppressed in the tool panel.
Default Value: false
suppressSideButtons
When true, side buttons in the tool panel are suppressed.
Default Value: false
suppressValues
When true, values are suppressed in the tool panel.
Default Value: false
Apply 'columnsAutoSizing' for these events even if 'continuousColumnsAutoSizing' is false Type:
Apply 'columnsAutoSizing' whenever columns width are changed Type: Default Value: false
When true, pressing Enter during editing will automatically move to the next cell. Type: Default Value: false
Enables column resizing by user interaction. Type: Default Value: true
Enable column sorting by clicking on the column's header Type: Default Value: true
When false, disables user interaction with the table. Type: Default Value: true
Map where additional grid properties of ag-grid can be set Type:
Maximum allowed width (in pixels) for group rows. Type:
Minimum allowed width (in pixels) for group rows. Type: Default Value: 200
Function to customize group row rendering when gridOptions.groupDisplayType is set to 'groupRows' Type:
CSS style class applied to group rows. Type:
Fixed width (in pixels) for group rows. Type: Default Value: 200
The height (in pixels) of the table header. Type: Default Value: 33
Default icon configuration for grid controls. Type:
Callback that returns the editable state of a cell. Type:
Map where locales of ag-grid can be set Type:
Configuration options for main menu items in the grid. Type:
When true, multiple rows can be selected simultaneously. Type: Default Value: false
Called when row(s) drag-n-drop is started, to get the drag image as an html code. Type:
Callback when dragging over a row - returns one of the strings: 'copy', 'move', 'none' depending on the allowed drag operation. Type:
Pivoting allows you to take a columns values and turn them into columns Type: Default Value: false
When true, the table operates in read‑only mode. Type: Default Value: false
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: Default Value: 300
The height in pixels of the table's rows Type: Default Value: 25
Function to add style class to row Type:
When true, a dedicated columns menu tab is displayed. Type: Default Value: false
Default CSS style class for the table. Type: Default Value: "ag-theme-alpine"
The tab order index for keyboard navigation within the table. Type:
Configuration options for the grid’s tool panel. Type:
When true, the table uses lazy loading to fetch data on demand. Type: Default Value: false
Controls whether the table is visible. Type:
{} rowData The data for the clicked row.
{} [columnId] The identifier of the clicked column.
{} [cellData] The data of the clicked cell.
{} [event] The event object associated with the click.
{} [dataTarget] Optional data target identifier.
{} rowData The data for the double-clicked row.
{} [columnId] The identifier of the double-clicked column.
{} [cellData] The data of the double-clicked cell.
{} [event] The event object associated with the double-click.
{} [dataTarget] Optional data target identifier.
{} rowData The data for the right-clicked row.
{} [columnId] The identifier of the right-clicked column.
{} [cellData] The data of the right-clicked cell.
{} [event] The event object associated with the right-click.
{} [dataTarget] Optional data target identifier.
{} rowindex The index of the row where the change occurred.
{} [columnindex] The index of the column where the change occurred.
{} [oldvalue] The previous value of the cell.
{} [newvalue] The new value of the cell.
{} [event] The event that triggered the change.
{} rowData The full data object for the row.
Returns: {}
{} [rowindex] The index of the row being edited.
{} [columnindex] The index of the column being edited.
{} [value] The initial value of the cell for editing.
{} columnState A JSON string representing the new state of the columns.
{} [event] The event that triggered the change.
{} sourceRows An Array of plain objects if dragged from a power grid, or JSRecord objects if from a data grid
{} targetRow The target row where the rows were dropped.
{} event The event object associated with the drop action.
{} [columnindex] The index of the footer column that was clicked.
{} [event] The event object associated with the click.
{} [dataTarget] Optional target identifier for the click.
{} startRow The index of the first row to load.
{} endRow The index of the last row to load.
{} rowGroupCols The columns used for grouping.
{} valueCols The columns used for values.
{} pivotCols The columns used for pivoting.
{} pivotMode Indicates if pivot mode is enabled.
{} groupKeys The keys representing the current grouping.
{} filterModels The current filter models.
{} sortModels The current sort models.
{} [groupcolumnindexes] An array of column indexes associated with the group.
{} [groupkeys] The keys representing the group hierarchy.
{} [isopened] True if the group was expanded, false if collapsed.
{} rowData The data for the clicked row.
{} selected True if the row has been selected, false if deselected.
{} [event] The event object associated with the click.
{} aggFuncs Object with properties names the aggregates name, and values the custom function as string
{} 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.
{} [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.
{} id The unique identifier of the column to be removed from the component.
{} rowsKey Delete rows
{} rowindex Row index of the editing cell (0-based)
{} columnindex Column index in the model of the editing cell (0-based)
{} [fileName] The name of the file to save the exported data to. If not provided, a default name will be used.
{} [skipHeader] If true, the headers of the table will be excluded from the exported file. Defaults to false.
{} [columnGroups] If true, includes column group information in the export. Defaults to false.
{} [skipFooters] If true, the footers of the table will be excluded from the exported file. Defaults to false.
{} [skipGroups] If true, group rows will be excluded from the exported file. Defaults to false.
{} [asCSV] If true, the data will be exported in CSV format instead of XLSX. Defaults to false.
Returns: A dataset object containing the exported grid data, where the first row represents
Returns: An array of all column objects currently defined in the table.
{} id The unique identifier of the column to retrieve in the Servoy grid.
{} [forChange] Indicates whether the column is being retrieved for modifications.
Returns: The column object at the specified index.
Returns: A JSON string representing the current state of the columns, including their width, position, and grouping state.
Returns: An object representing the currently expanded groups in the table.
Returns: An array of objects representing the data of the currently selected rows in the table.
Returns: True if the pivot mode is currently enabled, otherwise false.
{} id Column id
{} index New position (0-based)
{} id The unique identifier for the new column to be added.
{} [index] 0-based index
Returns: The column object that was created and added to the table.
{} rowsData New rows
{} [appendToBeginning] If true rows will be added to the beginning of the table
{} [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.
{} [pks] List of dataprovider names; needed in case of using apis: updateRows and deleteRows
{} [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.
{} rowData RowData with at least on attribute, used to find the viewport row to scroll to
{} groups An object like {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}
{} value Form editor value
{} rowIndexes An array of 0-based row indexes to be selected in the table.
{} [cancel] 'true' to cancel the editing (ie don't accept changes)
{} rowsData Update rows
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type: