Table example with rowspans and colspans
var renderer = new reportjs.reportjs.Renderer(),
adapter = new reportjs.reportjs.JQueryAdapter(),
options = {
data: {
dimensions: [{ id: 'Measures'}, { id: 'Year' }, { id: 'Month' }, { id: 'Category' }],
dimensionValues: [
[{ id: 'count', caption: 'My Count' }, { id: 'sum', caption: 'My Sum' }],
[{ id: '2013' }, { id: '2014' }],
[{ id: 'January' }, { id: 'February' }, { id: 'March' }],
[{ id: 'Category 1' }, { id: 'Category 2' }]
],
cells: [
{value: 10, dimensionValues: [0, 0, 0, 0]},
{value: 20, dimensionValues: [0, 0, 0, 1]},
{value: 15, dimensionValues: [0, 0, 1, 0]},
{value: 15, dimensionValues: [0, 0, 2, 0]},
{value: 10, dimensionValues: [0, 1, 0, 0]},
{value: 20, dimensionValues: [0, 1, 0, 1]},
{value: 15, dimensionValues: [0, 1, 1, 0]},
{value: 15, dimensionValues: [0, 1, 2, 0]},
{value: 10, dimensionValues: [1, 1, 0, 0]},
{value: 20, dimensionValues: [1, 1, 0, 1]},
{value: 15, dimensionValues: [1, 1, 1, 0]},
{value: 15, dimensionValues: [1, 1, 2, 0]},
{value: 10, dimensionValues: [1, 0, 0, 0]},
{value: 20, dimensionValues: [1, 0, 0, 1]},
{value: 15, dimensionValues: [1, 0, 1, 0]},
{value: 15, dimensionValues: [1, 0, 2, 0]}
]
},
layout: {
type: 'table',
rows: ['Year', 'Month'],
columns: ['Measures', 'Category']
}
},
table = renderer.render(options);
adapter.renderTableTo($('#mydiv'), table);
The result