No Translation available yet
You have Czech selected as language but this page has not been translated yet. Translate the page or view the content in the default space language below.
Display default
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
.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