index.js

import angular from 'angular';
import Table from 'table';
import sampleData from './sample-data/data.json';

let App = angular.module('ExampleApp', []);

App.directive('sbpTable', () => {
  return {
    link: (scope, element, attrs) => {

      // Define the row header statically
      let columns = [{
        data: 'display',
        rowHeader: true
      }];

      // Dynamically define the table columns config to make it easier
      // to handle dynamic data sets
      for (let brand of sampleData.data) {
        for (let event of brand.children) {
          let alreadyDefined = false;
          let index = brand.children.indexOf(event);

          // If we find the event already exists in the column config
          // then bounce out
          for (let c of columns) {
            if (c.title === event.id) {
              alreadyDefined = true;
              break;
            }
          }

          // Add the event to the column config if it isn't already there
          // and define an `afterRender` callback that displays a sentiment
          // indicator based on a defined conditional
          if (alreadyDefined) break;
          columns.push({
            data: 'children.' + index + '.children',
            title: event.display,
            afterRender: (cell, cellData) => {

              // Get the highest of the pos, neg, and none sentiment values
              let highestSentiment;
              for (let sentiment of cellData) {
                if (!highestSentiment || sentiment.value > highestSentiment.value) {
                  highestSentiment = sentiment;
                }
              }

              let sentimentIndicators = {
                pos: '+',
                neg: '-',
                none: 'o'
              };

              // Show a +, -, or o to indicate the sentiment
              cell.innerHTML = sentimentIndicators[highestSentiment.display];
            }
          });
        }
      }

      let table = new Table(element[0], sampleData.data, {
        columns: columns,
        paginate: 10,
        onCellClick: (data) => console.log(data)
      });

      table.render();
    }
  };
});