<template>
  <div>
    <b-form-checkbox switch v-model="enableSortAble">
      <span :class="enableSortAble ? 'font-weight-bold text-primary' : 'text-secondary'">Sortable</span>
    </b-form-checkbox>

    <b-table :items="items" :fields="fields" responsive="sm"></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      enableSortAble: false,
      fields: [
        { key: "last_name" },
        { key: "first_name" },
        { key: "age" },
        { key: "isActive" }
      ],
      items: [
        {
          isActive: true,
          age: 40,
          first_name: "Dickerson",
          last_name: "Macdonald"
        },
        { isActive: false, age: 21, first_name: "Larsen", last_name: "Shaw" },
        { isActive: false, age: 89, first_name: "Geneva", last_name: "Wilson" },
        { isActive: true, age: 38, first_name: "Jami", last_name: "Carney" }
      ]
    };
  },
  watch: {
    enableSortAble(newVal) {
      this.fields = this.fields.map(el => {
        return { ...el, sortable: newVal };
      });
    }
  }
};
</script>