Custom component themes
After reading how to apply predefined themes to the component, the next step is to create a custom theme:
Create a theme using the custom theme builder
Our custom theme builder is a tool to help you create themes for WebDataRocks. Here is how to use it:
Step 1. Download or clone the custom theme builder from GitHub:
git clone https://github.com/WebDataRocks/custom-theme-builder cd custom-theme-builder
Step 2. Install npm packages with the npm install command.
Step 3. Go to the theme builder’s folder and open webdatarocks.less — a file with WebDataRocks’ styles. Customize them by setting your colors and fonts as variables’ values.
Step 4. Run the theme builder to get CSS files with your theme:
npm start
After the files are generated, you can find them in the custom‑theme‑builder/generated‑theme/ folder.
Step 5. Include your newly created theme to a file where you embed WebDataRocks:
<link rel="stylesheet" type="text/css" href="custom-theme-builder\generated-theme\webdatarocks.min.css" />
Now open WebDataRocks in the browser — the component is styled with your custom theme.
Create a theme manually
Step 1. Open the webdatarocks/theme/ folder, create a new folder inside, and name it respectively to the name of your theme, e.g., original‑theme/.
Step 2. Copy the contents of any predefined theme folder (e.g., lightblue/) to the original‑theme/ folder.
Step 3. Now you need to replace theme colors with your custom ones. There are two possible approaches:
Approach #1 We recommend using Less – it’s a language extension for CSS. Less allows quick setting the values to several variables which later are compiled into CSS code. WebDataRocks provides Less source code available in the webdatarocks.less file of each theme.
Choose colors that you want to apply and set them inside the webdatarocks.less file from the original‑theme/ folder. Having replaced the necessary colors, you need to compile webdatarocks.less into webdatarocks.css and webdatarocks.min.css. Read how to do it in Less documentation. You need to install an npm package manager previously.
Approach #2 Of course, you can also edit colors right inside webdatarocks.css from your theme’s folder. However, we don’t recommend this approach – it complicates the updating of your own theme when the updates are made in the component’s CSS.
Step 4. Now include the reference to CSS or minified CSS. Then your new theme will be applied to the pivot table.
<link rel="stylesheet" type="text/css" href="theme/original-theme/webdatarocks.css" />
Example
Let’s make a custom turquoise theme. Our main color will be #48D1CC. It’s a medium turquoise color. For light and dark shades we choose #AFEEEE and #00CED1 respectively. We suppose you’ve already created a new folder with theme files. Name it turquoise/. Find the next lines of code in theme/turquoise/webdatarocks.less:
/* ===== theme colors ===== */ @theme-color: #03A9F4; @theme-color-dark: #039BE5; @theme-color-superdark: #039BE5; @theme-color-midlight: #03A9F4; //not used @theme-color-light: #03A9F4; //not used @theme-color-superlight: #E1F5FE; @theme-color-supersuperlight: #F3FAFD;
And change them to:
@theme-color: #48D1CC;
@theme-color-dark: #00CED1;
@theme-color-superdark: #00CED1;
@theme-color-midlight: #03A9F4;
@theme-color-light: #edfffe;
@theme-color-superlight: #AFEEEE;
@theme-color-supersuperlight: #e0ffff;
Then find where the grid colors are:
/* ===== grid ===== */
and change
@grid-selection-canvas-color: rgba(121, 204, 255, 0.2);
to
@grid-selection-canvas-color: rgba(175, 238, 238, 0.2);
Now compile Less file to CSS and minified CSS.
Update and enjoy the new theme!
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 prop when creating a WebDataRocks instance:
<Pivot
toolbar
/>
Hide the Toolbar
If you want to display the component without the Toolbar, you can remove the toolbar prop from your code:
<Pivot />
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.
See also
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" property when creating a WebDataRocks instance:
<app-wbr-pivot
[toolbar]="true">
</app-wbr-pivot>
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 property to "false":
<app-wbr-pivot
[toolbar]="false">
</app-wbr-pivot>
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.
See also
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.
See also
You can change the default number formatting of the report. WebDataRocks offers many options for formatting your numerical data such as:
- Align of the text
- Thousand and decimal separators
- Quantity of decimal places
- Currency symbols
- Currency align
- Null (default) value
- Percent formatting
To format numbers
- Go to the Format tab () on the Toolbar.
- Select Format cells.
- Select the value which formatting should be changed.
- Set the properties of formatting.
- Apply the changes.
You can change the default number formatting of the report. WebDataRocks offers many options for formatting your numerical data such as:
- Align of the text
- Thousand and decimal separators
- Quantity of decimal places
- Currency symbols
- Currency align
- Null (default) value
- Percent formatting
To format numbers
- Go to the Format tab () on the Toolbar.
- Select Format cells.
- Select the value which formatting should be changed.
- Set the properties of formatting.
- Apply the changes.
You can change the default number formatting of the report. WebDataRocks offers many options for formatting your numerical data such as:
- Align of the text
- Thousand and decimal separators
- Quantity of decimal places
- Currency symbols
- Currency align
- Null (default) value
- Percent formatting
To format numbers
- Go to the Format tab () on the Toolbar.
- Select Format cells.
- Select the value which formatting should be changed.
- Set the properties of formatting.
- Apply the changes.
Use the drill-through feature to see from which non-aggregated records the value in the cell is composed.
To drill through the cell
- Double-click the cell.
- Look through all the information about the cell in the drill-through pop-up window.
To specify what information to show in the drill-through view, open the Field List (
).
Note that if you change the values in the drill-through pop-up window, the changes are not applied to the values from the initial grid. They are “view-only”.
Use the drill-through feature to see from which non-aggregated records the value in the cell is composed.
To drill through the cell
- Double-click the cell.
- Look through all the information about the cell in the drill-through pop-up window.
To specify what information to show in the drill-through view, open the Field List ().
Note that if you change the values in the drill-through pop-up window, the changes are not applied to the values from the initial grid. They are “view-only”.
Use the drill-through feature to see from which non-aggregated records the value in the cell is composed.
To drill through the cell
- Double-click the cell.
- Look through all the information about the cell in the drill-through pop-up window.
To specify what information to show in the drill-through view, open the Field List ().
Note that if you change the values in the drill-through pop-up window, the changes are not applied to the values from the initial grid. They are “view-only”.