This feature is available since BellaDati 2.9.4
It is possible to define a custom renderer which will be used to display a specific chart or table. This renderer is defined in an extension. The user then has the option to select the renderer in chart appearance or table appearance settings.
Extension structure
- Empty HTML head and HTML body
- Resources
- table-renderer.js implementing rendeTable_ext(containerDiv, tableJSON) function
- table-styles.js defining styles of the table
Content of table-renderer.js
Javascript responsible for rendering HTML content of the table. Function takes two parameters containerDiv selector and tableJSON holding JSON table data produced by BellaDati (see Report API).
var renderTable_ext#EXT_ID# = function(containerDiv, tableJSON) { var data = tableJSON.data; containerDiv.empty(); // create TABLE inside containerDiv var table = $("<table></table>"); table.addClass("bd-table_ext#EXT_ID#"); containerDiv.append(table); // create THEAD inside TABLE var thead = $("<thead></thead>"); thead.appendTo(table); // iterate over all rows in header for (i = 0; i < data.header.length; i++) { // insert new row into THEAD var theadRow = $("<tr></tr>"); theadRow.appendTo(thead); // iterate over all cells in a row var columns = data.header[i]; for (j = 0; j < columns.length; j++) { var column = columns[j]; if (column) { // insert new TH with value var theadCell = $("<th></th>"); theadCell.appendTo(theadRow); theadCell.append(column.value); // set colspan/rowspan attributes if (typeof column.colspan != 'undefined') { theadCell.attr('colspan', column.colspan); } if (typeof column.rowspan != 'undefined') { theadCell.attr('rowspan', column.rowspan); } } } } // create TBODY inside TABLE var tbody = $("<tbody><tbody>"); tbody.appendTo(table); // iterate over all rows in body for (i = 0; i < data.body.length; i++) { // insert new TR inside TBODY var tbodyRow = $("<tr></tr>"); tbodyRow.appendTo(tbody); // iterate over all cells in a row var columns = data.body[i]; for (j = 0; j < columns.length; j++) { var column = columns[j]; if (column) { // insert new TD var tbodyCell = $("<td></td>"); tbodyCell.appendTo(tbodyRow); tbodyCell.append(column.value); // set colspan/rowspan attributes if (typeof column.colspan != 'undefined') { tbodyCell.attr('colspan', column.colspan); } if (typeof column.rowspan != 'undefined') { tbodyCell.attr('rowspan', column.rowspan); } } } } }
Content of table-styles.css
@import url(https://fonts.googleapis.com/css?family=Open+Sans); @import url(https://fonts.googleapis.com/css?family=Heebo); .bd-table-container_ext#EXT_ID# { overflow: auto; } .bd-table_ext#EXT_ID# { background-color: light-blue !important; border-collapse: collapse; width: 100%; } .bd-table_ext#EXT_ID# tbody th, .bd-table_ext#EXT_ID# tbody td { border-right: 1px solid #d6d7d9; border-bottom: 1px solid #d6d7d9; font-size: 15px; padding: 5px; font-family: 'Open Sans'; font-style: 'Regular'; text-align: right; background-color: #ffffff !important; } .bd-table_ext#EXT_ID# tbody tr:hover td { color: #ffffff !important; background-color: #0162af !important; font-family: 'Open Sans'; font-style: 'Medium'; } .bd-table_ext#EXT_ID# thead th { padding: 5px; border-right: 1px solid #d6d7d9; border-bottom: 1px solid #d6d7d9; background-color: #ffffff !important; color: #0162af; text-align: center; font-family: 'Heebo'; font-weight: bold; font-size: 15px; } .bd-table_ext#EXT_ID# thead th:hover { cursor: pointer; } .bd-table_ext#EXT_ID# tbody tr:nth-child(odd) { background-color: white; font-family: 'Open Sans'; font-style: 'Light'; } .bd-table_ext#EXT_ID# tbody tr:nth-child(even) { background-color: white; font-family: 'Open Sans'; font-style: 'Light'; } .bd-table_ext#EXT_ID# td { padding: 6px; } .viewContentCell_ext#EXT_ID# { vertical-align: top !important; }
Overview
Content Tools