You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

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;
}
  • No labels