Table - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/tables

by Max Sinev

HTML

<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css">
<div id="app">
  <b-table id="my-table" class="mb-20" :borderless="true" :items="merchants" :fields="fields" selectedVariant="success" :tbody-tr-class="rowClass" :per-page="perPage" :current-page="currentPage" small responsive>
    <template slot="HEAD_index" slot-scope="data">
                <b-form-checkbox @change="selectAll" :checked="selectedItems.length === merchants.length"></b-form-checkbox>
            </template>

    <template slot="index" slot-scope="data">
                <b-form-checkbox name="selected-items" v-model="selectedItems" :value="data.item">
                </b-form-checkbox>
            </template>

    <template slot="outlet" slot-scope="data">
                {{ data.item.name }}
            </template>

    <template slot="orderacc" slot-scope="data">
                on
            </template>

    <template slot="taskcomp" slot-scope="data">
                40%
            </template>
  </b-table>
</div>

CSS

#app {
  padding: 20px;
  height: 500px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
  	selectedItems: [],
    merchants: [{
      uuid: '8d319276-a4de-412e-8790-a3d88f4a143a',
      name: 'Super Snacks',
      available: false,
      contact_number: '+6567745898',
      address: '29 Prince Georges Park, Singapore 118426',
      country: 'SG',
      timezone: 'Asia\/Singapore',
      dine_in_available: false,
      take_away_available: false,
      pick_up_available: false,
      apps: ['com.jadon.yqueue.campus'],
      integrations: {
        paylah: false,
        wirecard: false,
        securepay: false
      },
    }, {
      uuid: '8d2dbc63-d20d-4ea1-b719-fe8d7085d1ad',
      name: 'Boom Boom Burgers',
      available: false,
      contact_number: '+61755383718',
      address: '7-9 Burra St, Surfers Paradise QLD 4217, Australia',
      country: 'AU',
      timezone: 'Australia\/Brisbane',
      dine_in_available: false,
      take_away_available: false,
      pick_up_available: false,
      apps: [],
      integrations: {
        paylah: false,
        wirecard: false,
        securepay: false
      },
    }, {
      uuid: '8d2dbb49-c36f-4ea2-85c3-e2f7b78013ed',
      name: 'Best Bite Pizza',
      available: false,
      contact_number: '+61433145774',
      address: 'Shop 1\/28 Coomera Grand Dr, Upper Coomera QLD 4209, Australia',
      country: 'AU',
      timezone: 'Australia\/Brisbane',
      dine_in_available: false,
      take_away_available: false,
      pick_up_available: false,
      apps: [],
      integrations: {
        paylah: false,
        wirecard: false,
        securepay: false
      },
    }, {
      uuid: '8d2daede-a0b4-4712-9209-73b1f4500c43',
      name: 'Cooly Kebabs',
      available: false,
      contact_number: '+61408154422',
      address: '5\/122 Griffith St, Coolangatta QLD 4225, Australia',
      country: 'AU',
      timezone: 'Australia\/Brisbane',
      dine_in_available: false,
      take_away_available: false,
      pick_up_available: false,
      apps: [],
     ...