Woowahan table plugin sample

main-view.js

import Woowahan from 'woowahan';
import template from './main.handlebars';

export const Main = Woowahan.View.create('Main', {
  template,

  initialize() {
    this.setModel({
      myList: [
        { all: '부각용', wait: '7', ad: '10', deal: '8' },
        { all: '광선검', wait: '17', ad: '32', deal: '18' },
        { all: '홍길동', wait: '2', ad: '1', deal: '3' },
        { all: '옴하하', wait: '11', ad: '3', deal: '1' },
      ]
    });

    this.super();
  }
});

main.handlebars

<div>
  
  <table data-role="plugin" data-plugins="myList => tablePlugin" border="1" width="100%">
    <thead>
      <th data-column-name="all" data-align="left">전체</th>
      <th data-column-name="wait" data-align="center" data-format="$v건">승인대기</th>
      <th data-column-name="ad" data-align="center" data-format="$v건">광고중</th>
      <th data-column-name="deal" data-align="right" data-format="$v건">거래중</th>
    </thead>
    <tbody></tbody>
  </table>
  
</div>

main.js

import Woowahan from 'woowahan';
import mainView from './main-view';
import { tablePlugins } from './table-plugin';

global.$ = global.jQuery = Woowahan.$;

const app = new Woowahan();

app.use([
  Woowahan.Plugin('tablePlugin', tablePlugins),
]);

app.start({
  url: '/', 
  view: mainView, 
  container: '.container'
});

table-plugin.js

export const tablePlugins = function(element, collection) {
  if (!Array.isArray(collection)) return;

  let columns = {};
  let tds = Array.from(element.querySelectorAll('thead th'));

  tds.forEach(td => {
    let { columnName, align = 'left', format = '$v' } = td.dataset;

    columns[columnName] = {
      align, format
    };
  });

  let rows = collection.map(row => {
    let tdString = Object.keys(columns).map(colName => {
      return `<td align="${columns[colName].align}">${columns[colName].format.replace('$v', row[colName])}</td>`;
    }).join('\n');

    return `<tr>${tdString}</tr>`;
  }).join('\n');

  element.querySelector('tbody').innerHTML = rows;
}