customTable.js

(function(){
  'use strict';

  var CUSTOMTABLE = React.createClass({displayName: 'CUSTOMTABLE',
      render: function() {

        var tableBodyData = this.props.scope.tableBodyData,
          tableHeaderData = this.props.scope.tableHeaderData,
          rows = [],
          headerFields = [],
          rowIndex,
          columnIndex,
          columns,
          col,
          clickFn;

        // Draw table header
        for (var l = 0; tableHeaderData !== null && l < tableHeaderData.length; l++) {
          if (tableHeaderData[l].visibleInResultTable){
              if (!tableHeaderData[l].via){
              headerFields.push(React.createElement('th', null,
                  this.props.filter('translate')(tableHeaderData[l].entity) + '.' + 
                  this.props.filter('translate')(tableHeaderData[l].property)
                )
              );
            } else {
              var sup = React.createElement('sup', {
                  className:'fa fa-question',
                  'title': 'via: ' + this.props.filter('translate')(tableHeaderData[l].via)
                });
              
              headerFields.push(React.createElement('th', null,
                  [
                    this.props.filter('translate')(tableHeaderData[l].entity) + '.' + 
                    this.props.filter('translate')(tableHeaderData[l].property),
                    sup
                  ]
                )
              );
            }
          }
        }

        if (!tableBodyData || tableBodyData.length === 0) {
          columns = React.createElement('td', {
            className:'text-center',
            colSpan: 8
          }, this.props.filter('translate')('NO_RESULTS'));
          rows.push(React.createElement('tr', null, columns));
        } else {
          for (rowIndex = 0; tableBodyData !== null && rowIndex < tableBodyData.length; rowIndex++) {
              columns = [];
              for (columnIndex = 0; columnIndex < tableBodyData[rowIndex].length; columnIndex++) {
                col = [];
                if (tableHeaderData[columnIndex].visibleInResultTable){
                
                  if (tableHeader[columnIndex].type === 'date'){
                    col.push(React.createElement('span', null,
                      this.props.filter('date')(tableBodyData[rowIndex][columnIndex], 'dd.MM.yyyy'))
                    );
    
                  } else if (tableHeaderData[columnIndex].weblink){
                    var icon, text;
                    
                    text = React.createElement('span', null,
                      this.props.filter('translate')('OPEN_PAGE'));
                      
                    icon = React.createElement('span', {
                      className: 'fa fa-external-link'
                    });
                    
                    col.push(React.createElement('a', {
                        target: '_blank',
                        href: tableBodyData[rowIndex][columnIndex]
                      },
                      text, icon
                    ));
                  } else {
                    col.push(React.createElement('span', null,
                      tableBodyData[rowIndex][columnIndex]));
                  }
                }
                columns.push(React.createElement('td', null, [col]));
              }
              clickFn = this.props.scope.$apply.bind(
                this.props.scope,
                this.props.scope.navigate.bind(null, tableBodyData[rowIndex])
              );
              rows.push(React.createElement('tr', {
                  onClick: clickFn
                }, columns)
              );
          }
        }

        var header = React.createElement('tr', null, headerFields);

        return (React.createElement('table', {className: 'table table-hover'},
            [
              React.createElement('thead', null, header),
              React.createElement('tbody', null, rows)
            ])
        );
      }
  });
  
  function customTableComponent($filter, $rootScope){
    return {
      restrict: 'EA',
      scope: {
        tableBodyData: '=',
        tableHeaderData: '='
      },
      controller: function(scope){
        gotoDetail(row) {
          // Check how many params we get to allow navigate to:
        }
      },
      link: function(scope, element, attr, ctrl){
        scope.$watch('tableData', (newV)=>{
          if (!newV) {return;}
          React.render(
            React.createElement(CUSTOMTABLE, {
              scope: scope,
              filter: $filter
            }),
            element[0]
          );
        });
        $rootScope.$on('$translateChangeSuccess', ()=>{
          React.render(
            React.createElement(CUSTOMTABLE, {
              scope: scope,
              filter: $filter
            }),
            element[0]
          );
        });
        scope.navigate = function(row){
          ctrl.gotoDetail(row);
        };
      }
    };
  }

  angular
    .module('table.module')
    .directive('customTableComponent', customTableComponent);
})();