The example below renders a Table for the rounds played and avg. round duration by user's country and browser at Gameplay, our fictitious example demo.

<div id="example"></div>

  joola.on('ready', function() {
    new joola.viz.Table({
      container: '#example',
      caption: 'Table example',
      query: {
        timeframe: 'last_30_days', 
        interval: 'day', 
        dimensions: ['', 'device.browser'],
        metrics: ['rounds.played', {key: 'rounds.duration', aggregation: 'avg'],
        collection: 'Gameplay'


The Table visualization display a set of metrics grouped by a set of dimensions.

new joola.viz.Table(options, callback);


Options are passed via JavaScript.

container String Required. A valid selector for the target container.
caption String Optional. A caption for the chart.
query Object Required. The query object.
summary.enabled boolean false Optional. Show a summary row of metrics.
summary.placement string top Optional. Summary header row (top
pickers.primary.enabled boolean false Optional. Show a primary dimensions picker.
pickers.add_dimension.enabled boolean false Optional. Show an Add Dimension picker.
pickers.add_metric.enabled boolean false Optional. Show an Add Metric picker.


The callback function receives two parameters:

  • err includes an err object detailing the exception and its stack.
  • ref reference to the visualization object itself.


The Table class exposes a few events for hooking into its functionality.

table.init.start Fired when the Table starts loading
table.init.finish Fired when the Table finishes loading

HTML Template

<div class="table-caption"></div>
<div class="controls">
  <div class="primary-dimension-picker"></div>
  <div class="add-dimension-picker"></div>
  <div class="add-metric-picker"></div>
  <button class="btn export" style="float:right">
    <span class="icon icon-download"></span>

  <div class="search-wrapper">
    <input class="search" type="text" placeholder="Search..."/>
  <div class="clearfix"></div>
<div class="table-wrapper">
  <table class="jio table">
<div class="paging">
  <div class="paging-wrapper">
    <div class="page-size">
      <span class="caption">Show rows: </span>
  <div class="showing"></div>
  <div class="navigation">
    <div class="prev chevron before left"></div>
    <div class="next chevron before right"></div>