JSFiddle - React, Tailwind, and code Playground

by jeffory

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/bulma.css">
<script type="text/x-template" id="table_template">
<table class="table">
  <tr v-for="row in data">
    <td v-for="(column, index) in row">
      <div v-if="index == controls_column">
        <slot name="controls"></slot>
      </div>

      <template v-else :name="column">
        {{ column }}
      </template>
    </td>
  </tr>
</table>
</script>

<div id="app">
<datatable :data="table_data" :columns="table_columns" :controls_column="3">
  <div slot="controls">
      <button class="button is-primary">Lookup</button>
  </div>
</datatable>
</div>

Babel + JSX

Vue.component('datatable', {
  props: [
    'data', 'columns', 'query', 'controls_column'
  ],
  template: '#table_template'
})

var app = new Vue({
	el: '#app',
  data: {
  	table_columns: [
      'Item', 'Price', 'Quantity', 'Controls'
    ],
    table_data: [
      ['Milk', 2.5, 45, ''],
      ['Bread', 4, 10, ''],
      ['Coke', 5, 20, ''],
      ['Biscuits', 2, 40, ''],
      ['Capsicum', 4, 2, ''],
      ['Califlower', 6, 1, ''],
      ['Beans', 3, 4, ''],
      ['Zuchini', 5, 4, '']
    ],
    search: ''
  }
});