Summary Table

This example is using DataTables to create a summary table that can able be clicked for filtering. The top table shows the total of the "Salary" column for that office, with one column showing the total on the current page, and the other column showing the total on all pages. Clicking that top table then filters the CloudTable.

This example was achieved by adding the following code into the document:

document.addEventListener('ct-ready', function (e) {
  var table = e.table;
  var editor = e.editor;
  var total;
  var selected = null;

  // Create an object that contains all the salary information
  function calculateSalaries(onPage) {
    var obj = {};
  
    table.rows({page: onPage? 'current' : 'all'}).every(function(idx) {
      var data = table.row(idx).data();

      data['l-5'].forEach(function(o) {
        var office = JSON.parse(o['dp-12'])[0].text;
  
        if (obj[office] === undefined) {
          obj[office] = {
            total: parseInt(data['dp-11']),
            colour: o.color
          };
        }
        else {
          obj[office].total = parseInt(data['dp-11']) + obj[office].total;
        }
      });
    });

    return obj;
  }

  // Initialise a DataTable for the counts
  var salaries = $('#salaries').DataTable({
    // Disable features
    searching: false,
    paging: false,
    select: {
      style: 'single'
    },
    info: false,
    columnDefs: [{
      // Render the currency field in the salaries table
      targets: [1,2],
      render: $.fn.dataTable.render.number(',', '.', 0, '$')
    }],
    initComplete: function() {
      // Add filtering when a record is clicked upon
      $('#salaries tbody').on('click', 'tr', function() {
        selected = salaries.row(this).index();
        var office = $(salaries.row(this).data()[0]).text();
        if (table.search() === office) {
          selected = null;
          table.search('').draw();
        }
        else {
          table.search(office).draw();
        }
      });
    }
  });
  
  // Update the salaries table on each draw of the CloudTable
  table.on('draw', function() {
    var onPage;
  
    //table.columns([1,5,6]).visible(false);
  
    // Only need to get the full totals once
    if (total === undefined) {
      total = calculateSalaries(false);
    }
    
    onPage = calculateSalaries(true);
  
    // Empty and then recreate the salaries table
    salaries.rows().remove();
  
    // Add the rows with a bit of colour so they match the CloudTable's pill
    for (const key in total) {
      salaries.row.add([
        '<span class="ct-content__link ct-content__pill" style="background: '
        + total[key].colour
        + '; color: #000000">'
        + key
        + '</span>',
        total[key].total,
        onPage[key] === undefined? 0 : onPage[key].total
      ]);
    }
  
    // Redraw the table now we've added the rows
    salaries.columns.adjust().draw();
    if (selected !== null) {
      salaries.row(selected).select();
    }
  });
});