The Toolbar
Our reporting tool comes with the Toolbar, which gives you access to the most useful features. This article explains how to use the Toolbar.
Show the Toolbar
By default, the Toolbar is hidden in WebDataRocks.
To show the Toolbar, specify the toolbar={true} prop when creating a WebDataRocks instance:
<WebDataRocksReact.Pivot
toolbar={true}
/>
Hide the Toolbar
If you want to display the component without the Toolbar, you can remove toolbar={true} from your code or set the toolbar prop to {false}:
<WebDataRocksReact.Pivot
toolbar={false}
/>
Available functionality
The Toolbar contains the following tabs:
| Connect | Allows connecting to your JSON or CSV data source. Has a drop-down menu with the following tabs: To local CSV, To local JSON, To remote CSV, and To remote JSON. |
| Open | Allows opening locally or remotely saved reports. Has a drop-down menu with the following tabs: Local report and Remote report. |
| Save | Saves your current report configuration into a local JSON file. |
| Export | Allows opening locally or remotely saved reports. Has a drop-down menu with the following tabs: Print, To HTML, To Excel, and To PDF. |
| Format | Allows printing the current report or exporting it into various formats. Has a drop-down menu with the following tabs: Format cells and Conditional formatting. |
| Options | Opens the Layout options pop-up window, where you can show/hide totals or switch between the classic, compact, and flat forms. |
| Fields | Opens the Field List, where you can select which data is shown in rows, columns, measures, and report filters. |
| Fullscreen | Switches WebDataRocks between the fullscreen and windowed mode. You can also exit fullscreen by pressing Esc. |
Specifics of the Toolbar on mobile devices
If you are using WebDataRocks on a mobile device, the mobile version of the Toolbar with a different set of tabs will be shown. For example, instead of the Connect tab, you will see CSV and JSON tabs.
To switch to the desktop Toolbar version on your mobile device, you can request the desktop site in the browser settings.
Adjust the Toolbar to your needs
You can customize the standard view and functionality of the Toolbar (e.g., add new tabs or remove the ones you don’t need). If you are interested in such an option, follow this tutorial: Customize the Toolbar.