Page History

...

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).

Code Block

language	js

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

Code Block

language	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

Page tree

Versions Compared

Old Version 4

New Version 5

Key

Extension structure

Content of table-renderer.js

Content of table-styles.css

Sample extension