This extension can be used to change the layout of your table in BellaDati. Although BellaDati to dramatically change the appearance of tables, in some cases even that might not be enough. Therefore BellaDati provides Custom table renderer extension which enables the user to create tables with a completely different look. This extension can be used as-it-is or it can easily be modified to fulfill the needs of the user.
Pricing
Version | Unlimited |
Number of Users | Unlimited* |
Price | Free |
*limited to the number of users of the BellaDati license
Installation
- Download the ZIP file with extension by clicking on button in top right corner.
- Go to BellaDati Extension gallery and upload the ZIP file.
- Activate the extension.
Usage
Once the extension with custom renderer is activated, users can navigate to a report containing a table and select the renderer in table appearance settings.
- Open report containing a table.
- Open table appearance settings.
- Select custom table renderer.
- Save the settings.
Images
Options
Table layout is defined by the CSS stylesheet stored in the extension. This section describes examples how to adjust the layout of custom tables. In order to access the definition of stylesheet, go to section Text and binary resources and click the file table-styles.css.
- Changing color of header
Background color of table header can be changed by updating code of parameter background in tag .bd-table thead. Color of font can be changed by updating parameter color in tag .bd-table thead. - Changing color of table body
Background color of table body can be changed by updating code of parameter background in tag .bd-table tbody tr:nth-child(odd) for odd rows and tag .bd-table tbody tr:nth-child(even) for even rows. Font color can be changed by updating parameter color in tag .bd-table tbody tr:nth-child(odd) for odd rows and tag .bd-table tbody tr:nth-child(even) for even rows. - Changing font applied in the table
Applied fonts are defined by parameter font-family in tag .bd-table. In order to change applied fonts replace existing font with different ones.