Custom Table Renderer

by BellaDati
for BellaDati 2.9.4 and newer

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.

Custom Table Renderer

Pricing

Version Unlimited
Number of Users Unlimited*
Price Free

*limited to the number of users of the BellaDati license

Installation

  1. Download the ZIP file with extension by clicking on button in top right corner.
  2. Go to BellaDati Extension gallery and upload the ZIP file.
  3. 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.

  1. Open report containing a table.
  2. Open table appearance settings.
  3. Select custom table renderer.
  4. Save the settings.

Images

Getting View ID parameter
Setting View ID parameter

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.

  1. 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.
  2. 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.
  3. 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.