Table - Bootstrap-Vue

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

by brightertools

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.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/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <div class="justify-content-center my-1 row">

    <b-form-fieldset horizontal label-text-align="right" label="Provider:" class="col-4" :label-size="4">
      <b-form-select class="form-control" :options="[{text:'Async',value:true},{text:'Sync',value:false}]" v-model="async">
      </b-form-select>
    </b-form-fieldset>

    <b-form-fieldset horizontal label-text-align="right" label="Page Size:" class="col-4" :label-size="6">
      <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-fieldset>

    <b-form-fieldset label-text-align="right" horizontal label="Filter:" class="col-4" :label-size="2">
      <b-form-input v-model="filter" placeholder="Type to Search"></b-form-input>
    </b-form-fieldset>
  </div>

  <!-- Main table element -->
  <!-- :current-page="currentPage" :per-page="perPage" :filter="filter" no-provider-filtering -->
  <b-table striped hover head-variant="inverse" :items-provider="provider" :fields="fields" :filter="filter" :current-page="currentPage" :per-page="perPage" show-empty>
    <template slot="name" scope="item">
      {{item.value.first}} {{item.value.last}}
    </template>
    <template slot="isActive" scope="item">
      {{item.value?'Yes :)':'No :('}}
    </template>
    <template slot="actions" scope="item">
      <b-btn size="sm" @click="details(item.item)">Details</b-btn>
    </template>
  </b-table>

  <div class="justify-content-center row my-1">
 ...

CSS

#app {
  padding: 20px;
  height: 500px;
}
html,body { font-size: 14px;}
table[aria-busy="false"] {
  opacity: 1;
}
table[aria-busy="true"] {
  opacity: .5;
}

JavaScript

const template = `
    <table :id="id || null"
           role="grid"
           :aria-busy="isBusy ? 'true' : 'false'"
           :class="tableClass"
    >
        <thead :class="headVariant ? ('thead-' + headVariant) : ''">
        <tr role="row">
            <th v-for="field,key in fields"
                @click="headClick($event,field,key)"
                @keydown.enter="headClick($event,field,key)"
                @keydown.space.prevent="headClick($event,field,key)"
                :class="fieldClass(field,key)"
                :aria-label="field.sortable ? (sortDesc ? labelSortAsc : labelSortDesc) : null"
                :aria-sort="(field.sortable && sortBy === key) ? (sortDesc ? 'descending' : 'ascending') : null"
                :tabindex="field.sortable?'0':null"
                v-html="field.label"
            ></th>
        </tr>
        </thead>
        <tfoot v-if="footClone" :class="footVariant ? ('thead-' + footVariant) : ''">
        <tr role="row">
            <th v-for="field,key in fields"
                @click="headClick($event,field,key)"
                @keydown.enter="headClick($event,field,key)"
                @keydown.space.prevent="headClick($event,field,key)"
                :key="key"
                :class="fieldClass(field,key)"
                :aria-label="field.sortable ? ((sortDesc) ? labelSortAsc : labelSortDesc) : null"
                :aria-sort="(field.sortable && sortBy === key) ? (sortDesc ? 'descending' : 'ascending') : null"
                :tabindex="field.sortable?'0':null"
                v-html="field.label"
            ></th>
        </tr>
        </tfoot>
        <tbody>
        <tr v-for="(item,index) in _items"
            role="row"
            :key="items_key"
            :class="rowClass(item)"
            @click="rowClicked($event,item,index)"
        >
            <td v-for="(field,key) in fields" :class="cellClass(field)">
                <slot :name="key" :value="item[key]" :item="item"...