TableView.js

import $ from 'jquery';
import dataTable from 'datatables';
import template from './table.hbs';

$.fn.dataTable = dataTable;

export default class TableView
{
  /**
   * A table view that displays tabular data bound to it
   * @param {Element} el
   * @param {Object<string>} columns
   */
  constructor(el, columns)
  {
    this.el = el;
    this.columns = columns;
    this.model = null;
  }

  render()
  {
    let html = template(this);
    let container = document.createElement('div');
    container.innerHTML = html;

    this.el.appendChild(container.childNodes[0]);

    let config = this._getDataTableConfig();
    $(this.el).find('.sbp-table').dataTable(config);
  }

  /**
   * Get the config for the data tables
   * @private
   */
  _getDataTableConfig()
  {
    this._renderCustomColumnTypes(this.columns);

    return {
      data: this.model.data,
      columns: this.columns,
      lengthChange: false,
      searching: false
    };
  }

  _renderCustomColumnTypes()
  {
    let mappings = {
      image: (data) => '<img src="' + data + '" />'
    };

    this.columns.forEach(c => {
      if (mappings[c.type]) {
        c.render = mappings[c.type];
      }
    });
  }
}