Bulma Table

by WILLIAM CORREA

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css">
<div id="app">
  <h1>{{ title }}</h1>
  
  <b-paginate-select v-model="perPage"></b-paginate-select>
  <hr>
  <b-paginate v-model="currentPage" :last="totalPages"></b-paginate>
  <b-table :header="header" :table="table"></b-table>
  <b-paginate v-model="currentPage" :last="totalPages"></b-paginate>
</div>

CSS

body {
  padding: 10px
}
.pagination a {
  max-width: 80px
}

JavaScript

Vue.component('b-paginate-select', Vue.extend({
	props: ['value'],
  data: () => ({ perPage: 0}),
  mounted () {
  	this.perPage = this.value;
  },
	template: `<span class="select">
    <select v-model="perPage" @change="$emit('input', perPage)">
      <option :value="3">3</option>
      <option :value="5">5</option>
      <option :value="10">10</option>
    </select>
  </span>`
}));

Vue.component('b-paginate', Vue.extend({
  props: ['value', 'last'],
	template: `
  <nav class="pagination is-centered">
    <a class="pagination-previous" @click="$emit('input', 1)" :disabled="value === 1">First</a>
    <a class="pagination-next" @click="$emit('input', last)" :disabled="value === last">Last</a>
    <ul class="pagination-list">
      <li v-for="__page in last" @click="$emit('input', __page)">
        <a :class="['pagination-link', value === __page ? 'is-current' : '']">{{ __page }}</a>
      </li>
    </ul>
  </nav>
  `
}))

Vue.component('b-table', Vue.extend({
template: 
  `<div>
  	<table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th v-for="_head in header">{{ _head.label }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(_row, $index) in table">
          <th scope="row">{{ $index + 1 }}</th>
          <td v-for="(_key, $id) in columns"> {{ _row[_key] }}</td>
        </tr>
      </tbody>
    </table>
  </div>`,
  props: {
    header: {
      required: true
    },
    table: {
      required: true
    }
  },
  data: () => ({
  	columns: []
  }),
  created () {
  	this.columns = this.header.map((_item) => {
    	return _item.column;
    });
  }
}));

new Vue({
	el: '#app',
  data: {
  	title: 'Bulma Table',
    currentPage: 0,
    perPage: 3,
    totalPages: 1,
    header: [
    	{
      	column: 'firstName',
        label: 'First Name'
      },
    	{
      	column: 'lastName',
        label: 'Last Name'
      },
    	{
      	column: 'userName',
        label: 'Username'
      }
    ],
    table: [],
    all: [
...