PivotTable Example
copy linkIntroduction
Visual element used to draw interactive pivot tables in various formats, both tabular and graphic (example related to the RD3 graphics engine).
Based on the web component
PivotTable.
Attached you can also find the example project for the FLUID graphics engine.
Can be used to create forms like this one:

Definition in the IDE
Firstly, in the project, a client library was created called Widget Pivot Table, and its properties, value lists, events, and methods were defined:

By using an Instant Developer component to contain our Pivot Table object, we can then export it and use it in other projects.
Inside the Pivot Table component is the Test Pivot Table form, and you have to refer to it in your application, even by just creating an instance of it in a procedure, to make sure that Instant Developer creates all the JavaScript files required for the component to function.
Client-side wrapper class
The files required for the component to function were copied into the custom directory of the Pivot Table component. A JavaScript file, WidgetPivotTable.js, containing the code of our wrapper class was also created.
The resources required for the JavaScript component to function will be loaded into the WidgetPivotTable.Init function:
- pivot.css
- pivot.min.css
- export_renderers.min.js
- jquery.min.js
- jquery.ui.touch-punch.min.js
- jquery-ui.min.js
- pivot.min.js
- plotly_renderers.min.js
- plotly-basic-latest-min.js
In the dist directory we find the language localization files that are loaded when the language is selected using the local property or by the browser settings if not specified.
In the Realize function, the div is created that has to contain the component, and it is assigned an ID with a name that is automatically generated so that it can then be searched.

Operation of the component
The PivotTable component can be viewed directly in a form frame or in a panel label.
To be able to enable any scrollbars on the frame that contains the component, if using it inside a label, you can add a specific CSS class, as in this code, to be put in custom.css for the application.
.pvtContainer .frame-content-container {
overflow: auto !important;
}
Then, the CSS class pvtContainer must be set to the label that contains the PivotTable component.
The properties of the component are:
- cols
List of names of the data source columns to be included in the pivot table columns, separated by commas. - rows
List of names of the data source rows by which to group the pivot table, separated by commas. - vals
List of names of the data source columns to run through the aggregation functions, separated by commas. You can specify one or two columns depending on the aggregator selected. - renderName
Used to select the display type for the pivot table data. - aggregatorName
Used to select the data aggregation function for the pivot table. - colOrder
Specifies the column order. - rowOrder
Specifies the row order. - showUI
If set to false, only the pivot table is displayed, without the interactive portion. - unusedAttrsVertical
If set to true, the unused columns will always be listed vertically. If set to false, the unused columns will always be listed horizontally. Leave empty for automatic handling. - hiddenFromAggregators
List of names of the data source columns that should not be listed as input for the aggregation function. - hiddenFromDragDrop
List of data source columns that should not be available for drag&drop as columns or as rows of the pivot table. - local
Localization code for the table interface and formats (for example, it, fr, etc.). The browser language is used by default.
The component events are:
- restoreConfig
Event fired every time the pivot table changes configuration. - onCellClick
Event fired when the user clicks in the data table (tabular view only).
The component methods are:
- restoreConfig
Used to restore a configuration read previously using the onConfigChange event. - addData
Used to add a data row to pass to the component.
Notes
Integration of this JavaScript component has only been tested to function with the RD3 graphics engine.
Use of the component is not supported in the Bootstrap and BootstrapZen themes.
Changed on: 17/11/2023 / From version: 22.0.8500