Enhanced b-table

Enhanced b-table

by Bootstrap Vue

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>
<!-- b-table example -->
<div id="app" v-cloak>
  <div class="justify-content-center my-1 row">
    <div class="col-6">
      <b-form-fieldset horizontal label-text-align="right" label="Page Size:" :label-cols="6">
        <b-form-select :disabled="isBusy" class="form-control" :options="[5, 10, 15]" v-model="perPage">
        </b-form-select>
      </b-form-fieldset>
    </div>
    <div class="col-6">
      <b-form-fieldset label-text-align="right" horizontal label="Filter:" :label-cols="3">
        <b-form-input :disabled="isBusy" v-model="filter" placeholder="Type to Search"></b-form-input>
      </b-form-fieldset>
    </div>
  </div>
  <div class="justify-content-center row my-1">
    <b-pagination v-if="!isBusy" size="md" :total-rows="totalRows" :per-page="perPage" limit="5" v-model="currentPage">
    </b-pagination>
    <div v-else class="my-2">Fetching Data...</div>
  </div>

  <!-- Main table element -->
  <b-table id="table" small striped hover foot-clone show-empty head-variant="inverse" v-model="tableValues" :busy="isBusy" :items="items" :fields="fields" :filter="filter" :current-page="currentPage" :per-page="perPage" @head-clicked="clearSelected">
    <template slot="name" scope="item">{{item.value.first}} {{item.value.last}}</template>
    <template slot="FOOT_name" scope="item">Showing {{tableValues.length}} items</template>

    <template slot="isActive" scope="item">{{item.value?'Yes':'No'}}</template>

    <template slot="HEAD_actions" scope="head">
      {{head.label}} &nbsp;
      <input...

CSS

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

[v-cloak] {
  display: none;
}

html,
body {
  font-size: 13px;
}

table[aria-busy="false"] {
  opacity: 1;
}

table[aria-busy="true"] {
  opacity: .5;
}

table tfoot .sorting:after {
  position: absolute;
  bottom: .9em;
  display: block;
  opacity: .3;
}

table tfoot .sorting_asc:before,
table tfoot .sorting_desc:after {
  opacity: 1 !important;
}

table.table-sm .sorting:before,
table.table-sm .sorting:after {
  bottom: .45em !important;
}

JavaScript

const items = [{
  isActive: true,
  age: 40,
  name: {
    first: 'Dickerson',
    last: 'Macdonald'
  }
}, {
  isActive: false,
  age: 21,
  name: {
    first: 'Larsen',
    last: 'Shaw'
  }
}, {
  state: 'success',
  isActive: false,
  age: 9,
  name: {
    first: 'Minni',
    last: 'Navarro'
  }
}, {
  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'
  }
}, {
  state: 'danger',
  isActive: false,
  age: 102,
  name: {
    first: 'Woodrow',
    last: 'Wilson'
  }
}, {
  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'
  }
}];



new Vue({
  el: '#app',
  data: {
    isBusy: false,
    currentPage: 1,
    perPage: 5,
    totalRows: items.length,
    filter: null,
    checkedItems: [],
    tableValues: [],
    allSelected: false,
    fields: {
      name: {
        label: 'Person Full name',
        sortable: true
      },
      age: {
        label: 'Person age',
        sortable: true
      },
      isActive: {
        label: 'Is Active?'
      },
      actions: {
        label: 'Select All',
        'class': 'text-right'
      }
    },
    items: items
  },
  computed: {
    myProvider(ctx) {
        // we are usig provider wrappers here to trigger our aysn watcher
        if (this.async === 'promise') {
          return this.promiseProvider;
        } else if (this.async === 'callback') {
          return this.callbackProvider;
        } else if (this.async === 'sync')...