TableWidget

by ti2005

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div id="editor">
</div>

CSS

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

JavaScript

function setCustomStyle(elId, propertyObject) {
  var el = document.getElementById(elId);
  for (var property in propertyObject) {
    el.style[property] = propertyObject[property];
  }
}

function TableWidget(id, config) {
  if (id && config.datatype && config.containerId) {
    this._id = id; // Mandatory Property
    this.datatype = config.datatype; // Mandatory Property
    this.containerId = config.containerId; // Mandatory Property
    this.data = config.data || {};
    this.options = config.options || {};

    this.render();
  }
}

TableWidget.prototype.getId = function() {
  return this._id;
};

TableWidget.prototype.create = function() {
  var generateHeader = function(self) {
    var headerColumn = '<tr>';
    for (var i = 0; i < self.data.header.length; i++) {
      headerColumn += '<th>' + self.data.header[i].title + '</th>';
    }

    return headerColumn + '</tr>';
  }(this);

  var generateBody = function(self) {
    var body = '';
    if (self.data.hasOwnProperty('body') && self.data.body.length > 0) {
      for (var i = 0; i < self.data.body.length; i++) {
        body += '<tr>';
        for (var k in self.data.body[i]) {
          if (self.data.body[i].hasOwnProperty(k)) {
            body += '<td id="' + k + '_' + i + '">';
            body += self.data.body[i][k].value;
            body += '</td>';
          }
        }
        body += '</tr>';
      }
    } else {
    	var headerColumnLength = self.data.header.length;
      body += '<tr><td colspan="'+ headerColumnLength + '">' + self.options.noDataMessage || 'No Data Found !' + '</td></tr>';
    }

    return body;
  }(this);

  var generateTable = function(self) {
    var table = '<table>';
    if (self.data.hasOwnProperty('header') && self.data.header.length > 0) {
      table += '<thead>' + generateHeader + '</thead>';
    }
    table += '<tbody>' + generateBody + '</tbody>';
    table += '</table>';
    return table;
  }(this);

  return generateTable;
};

TableWidget.prototype.render =...