Example of Dynamic Binding in React Pivot Table Component

All Controls
/
Pivot-table
/
DynamicBinding

This sample showcases how to dynamically load data from multiple data sources in the Pivot Table, including local and remote JSON/CSV files, as well as an OLAP(XMLA) data source via customized toolbar menu options. Additionally, you can save and reload Pivot Table report(s) as JSON files for future analysis.

More Details...

Loading....
Description

This sample demonstrates how to dynamically load data from various sources into the Pivot Table at runtime. You can load one data source at a time using the custom toolbar option. You can also save and load Pivot Table report(s) using the custom toolbar options, which are explained below one by one.

Open a Data Source:

JSON
  • Local JSON Data: Hover over the first toolbar option, then hover over the JSON menu option and select the Local submenu option. This allows you choose and load a JSON data source file from your machine.
  • Remote JSON Data: Hover over the first toolbar option, then hover over the JSON menu option and select the Remote submenu option. A popup will appear where you can enter the remote JSON data source file URL in the input box to load data into the Pivot Table.
CSV
  • Local CSV Data: Hover over the first toolbar option, then hover over the CSV menu option and select the Local submenu option. This allows you choose and load a CSV data source file from your machine.
  • Remote CSV Data: Hover over the first toolbar option, then hover over the CSV menu option and select the Remote submenu option. A popup will appear where you can enter the remote CSV data source file URL in the input box to load data into the Pivot Table.
OLAP(XMLA)
  • Hover over the first toolbar option and click the OLAP(XMLA) menu option to open the connection popup.
  • Enter the OLAP server URL in the URL input box and click Connect. This will load the available data sources from the OLAP server.
  • Select a data source from the Data Sources dropdown. This will load the available catalogs for that data source.
  • Select a catalog from the Catalogs dropdown. This will load the available cubes for that catalog.
  • Select a cube from the Cubes dropdown, then click OK to load the selected cube and begin your analysis.

Load a Pivot Report:

You can load previously saved Pivot Report(s), which are in JSON file format, at any time to restore the exact analysis state.

  • Local JSON Pivot Report: Hover over the second toolbar option, then hover over the Load Pivot Report menu option and select the Local JSON submenu option to choose and load a JSON Pivot Report file from your machine.
  • Remote JSON Pivot Report: Hover over the second toolbar option, then hover over the Load Pivot Report menu option and select the Remote JSON submenu option. A popup will appear where you can enter the remote JSON Pivot Report file URL in the input box to load the report into the Pivot Table.

Save a Pivot Report:

You can save the Pivot Table report as a JSON file by clicking the third toolbar option (Save Pivot Report as JSON) to preserve configurations such as filtering, sorting, field arrangements, formatting, aggregations, and more. In this example, the report configurations are saved excluding the data source, but you can customize this behavior as needed.


More information on the Essential® JS2 Pivot Table can be found in these Data Binding and Save and load report as a JSON file documentation sections.