This extension can be used to change the layout of your table in BellaDati. This extension can be used to display table like following:

MANAGING EXTENSION

Download extension from here.

Import extension to BellaDati.

Go to parameters and add id of the view with table which you would like to render with custom layout.

In order to get the view id, switch to developer mode, click on newly displayed button API.

Display view with custom table in the report

  1. Source report should have disabled option to display drill-down and cell controls – select option Hide drilldown cell controls in Table appearance settings.

     

  2. Create custom content view which will display iFrame with custom table
    1. Create custom content view
    2. Switch to html mode

    3. Use html code like following:

      <iframe id="tableExtension" src="http://localhost:8080/extension/detail/5"></iframe>
<script>

var iframe = document.getElementById("tableExtension");
// get view container
var viewContainer = $(iframe).parents('div.t-bdlayout-content');
iframe.width = viewContainer.width();
iframe.height = viewContainer.height() - 90;
</script>
  3. Hide view with the source table - source table probably will not be necessary to display in the report. Go to table appearance and select option Hide view in view mode.

Adjusting the custom table layout

Table layout is defined by the CSS stylesheet stored in the extension. This section describes examples how to adjust 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.