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.
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); } } } } } |
.bd-table-container_ext#EXT_ID# { } .bd-table_ext#EXT_ID# { } .bd-table_ext#EXT_ID# tbody th, .bd-table_ext#EXT_ID# tbody td { } .bd-table_ext#EXT_ID# tbody tr:hover td { } .bd-table_ext#EXT_ID# thead th { } .bd-table_ext#EXT_ID# thead th:hover { } .bd-table_ext#EXT_ID# tbody tr:nth-child(odd) { } .bd-table_ext#EXT_ID# tbody tr:nth-child(even) { } .bd-table_ext#EXT_ID# td { } |
Extension-SimpleTableRenderer.zip