Table - Bootstrap-Vue

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

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-form-group horizontal label="Page Size:">
    <b-form-select class="form-control" :options="[{text:5,value:5},{text:10,value:10},{text:15,value:15}]" v-model="perPage">
    </b-form-select>
  </b-form-group>
  <div class="card">
    <div class="card-body">
      <b-table stacked="sm" striped hover :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" show-empty>
        <template slot="name" slot-scope="item">
          {{item.value.first}} {{item.value.last}}
        </template>
        <template slot="isActive" slot-scope="item">
          {{item.value?'Yes :)':'No :('}}
        </template>
        <template slot="actions" slot-scope="item">
          <b-btn size="sm" @click="details(item.item)">Details</b-btn>
        </template>
      </b-table>

      <div class="justify-content-center row my-1">
        <b-pagination size="md" :total-rows="items.length" :per-page="perPage" v-model="currentPage" />
      </div>
    </div>
  </div>
</div>

CSS

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

JavaScript

new Vue({
  el: '#app',
  data: {
    fields: {
      name: {
        label: 'Person Full name',
        sortable: true
      },
      age: {
        label: 'Person age',
        sortable: true,
        class: "d-sm-none d-md-table-cell"
      },
      isActive: {
        label: 'is Active',
        "class": "d-sm-none d-md-table-cell"
      },
      actions: {
        sortable: false,
        class: 'text-right',
        label: ' '
      }
    },
    items: [{
      isActive: true,
      age: 40,
      name: {
        first: 'Dickerson',
        last: 'Macdonald'
      }
    }, {
      isActive: false,
      age: 21,
      name: {
        first: 'Larsen',
        last: 'Shaw'
      }
    }, {
      isActive: false,
      age: 9,
      state: 'success',
      name: {
        first: 'Minni',
        last: 'Navarro'
      }
    }, {
      isActive: false,
      age: 102,
      name: {
        first: 'Woodrow',
        last: 'Wilson'
      }
    }, {
      isActive: true,
      age: 38,
      name: {
        first: 'Jami',
        last: 'Carney'
      }
    }, {
      isActive: false,
      age: 42,
      name: {
        first: 'Justin',
        last: 'Truedeau'
      }
    }, {
      isActive: true,
      age: 72,
      name: {
        first: 'Dickerson',
        last: 'Macdonald Sr.'
      }
    }, {
      isActive: false,
      age: 12,
      name: {
        first: 'Larsen',
        last: 'Shaw Jr.'
      }
    }, {
      isActive: false,
      age: 26,
      name: {
        first: 'Mitzi',
        last: 'Navarro'
      }
    }, {
      isActive: false,
      age: 22,
      name: {
        first: 'Geneva',
        last: 'Wilson'
      }
    }, {
      isActive: true,
      age: 38,
      name: {
        first: 'Janice',
        last: 'Carney'
      }
    }, {
      isActive: false,
      age: 27,
      name: {
        first: 'Essie',
        last: 'Dunlap'
      }
    }],
    currentPage: 1,
    perPage: 5,
    filter: null,
    async: true
  },
  methods: {
   ...