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

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

.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 {
}

Sample extension

Extension-SimpleTableRenderer.zip