Changing component themes
WebDataRocks offers customization of the pivot table.
It’s useful if you want to enhance the Look & Feel of your web reporting tool and make the visitors’ interaction with your website a more pleasant experience.
WebDataRocks goes with a set of eight predefined themes:
- Dark
- Default
- Light blue
- Orange
- Teal
- Green
- Striped-Blue
- Striped-Teal
How to change the theme
Step 1. Include the CSS file
All files with themes are located in webdatarocks/theme/ folder. If you don’t specify a theme, a component will use the default one.
Open the CSS file with WebDataRocks styles (e.g., src/styles.css). Include a CSS file of the theme you like.
In our sample, we’ve chosen the Light blue theme:
@import "@webdatarocks/webdatarocks/theme/lightblue/webdatarocks.css";
In case you want to create a custom theme, turn to the detailed tutorial on custom report themes.
Step 2. Update the webpage
Save the applied results and reload the page to see how your pivot table looks now.
Example
Applying the Light blue theme to the pivot table:
See also
WebDataRocks offers customization of the pivot table.
It’s useful if you want to enhance the Look & Feel of your web reporting tool and make the visitors’ interaction with your website a more pleasant experience.
WebDataRocks goes with a set of eight predefined themes:
- Dark
- Default
- Light blue
- Orange
- Teal
- Green
- Striped-Blue
- Striped-Teal
How to change the theme
Step 1. Include the CSS file
All files with themes are located in webdatarocks/theme/ folder. If you don’t specify a theme, a component will use the default one.
Open the CSS file with WebDataRocks styles (e.g., src/index.css). Include a CSS file of the theme you like.
In our sample, we’ve chosen the Light blue theme:
@import "@webdatarocks/webdatarocks/theme/lightblue/webdatarocks.css";
In case you want to create a custom theme, turn to the detailed tutorial on custom report themes.
Step 2. Update the webpage
Save the applied results and reload the page to see how your pivot table looks now.
Example
Applying the Light blue theme to the pivot table:
See also
Export all the contents, layout, and a structure of a pivot table to a file in which format is the most convenient for you – PDF, Excel or HTML. Besides, you can print it as well.
To export a pivot table
- Go to the Export tab () on the Toolbar.
- Choose the format and export the report to the local file system of your device.
To print a pivot table
- Go to the Export tab () on the Toolbar.
- Select Print.
Export all the contents, layout, and a structure of a pivot table to a file in which format is the most convenient for you – PDF, Excel or HTML. Besides, you can print it as well.
To export a pivot table
- Go to the Export tab () on the Toolbar.
- Choose the format and export the report to the local file system of your device.
To print a pivot table
- Go to the Export tab () on the Toolbar.
- Select Print.
Export all the contents, layout, and a structure of a pivot table to a file in which format is the most convenient for you – PDF, Excel or HTML. Besides, you can print it as well.
To export a pivot table
- Go to the Export tab () on the Toolbar.
- Choose the format and export the report to the local file system of your device.
To print a pivot table
- Go to the Export tab () on the Toolbar.
- Select Print.
You can change the default size of the cells with a few clicks.
To resize the rows and columns
- Drag the header border of the row/column to resize its height/width.
- Drag the header border of the row to resize its height.
Example
Resize the columns widths:
To return the cells to the initial size, click twice on the header of the row or column:
You can change the default size of the cells with a few clicks.
To resize the rows and columns
- Drag the header border of the row/column to resize its height/width.
- Drag the header border of the row to resize its height.
Example
Resize the columns widths:
To return the cells to the initial size, click twice on the header of the row or column:
You can change the default size of the cells with a few clicks.
To resize the rows and columns
- Drag the header border of the row/column to resize its height/width.
- Drag the header border of the row to resize its height.
Example
Resize the columns widths:
To return the cells to the initial size, click twice on the header of the row or column:
Use the conditional formatting feature to highlight important values and make your report look more personalized.
To apply conditional formatting
To implement your own logic of highlighting the data, follow the steps below:
- On the Toolbar, choose the Format tab () > Conditional formatting.
- Select the plus-sign icon.
- Choose a value that you want to format (e.g., Sum of Price). If necessary, you can format all values at once.
- Add a rule; for example, “Less than 100” will apply the changes to all the cells with a value less than 100.
- Select colors for the text and background, and change the font if necessary.
- Press the Apply button to see the changes on the grid.
You can add multiple conditions of formatting to the same measure. All of them are saved within a Conditional Format Object.
Use the conditional formatting feature to highlight important values and make your report look more personalized.
To apply conditional formatting
To implement your own logic of highlighting the data, follow the steps below:
- On the Toolbar, choose the Format tab () > Conditional formatting.
- Select the plus-sign icon.
- Choose a value that you want to format (e.g., Sum of Price). If necessary, you can format all values at once.
- Add a rule; for example, “Less than 100” will apply the changes to all the cells with a value less than 100.
- Select colors for the text and background, and change the font if necessary.
- Press the Apply button to see the changes on the grid.
You can add multiple conditions of formatting to the same measure. All of them are saved within a Conditional Format Object.