Can sorting be enabled for all columns in the b-table component?

Question

From the bootstrap-vue documentation i can see how to enable sorting per column but is it possible to do it for the entire table?

Answer 1

It's not possible but you could use a computed property to deal with that easily by mapping fields property and adding sortable key with true value like :

new Vue({
  el: "#app",
  data() {
    return {
      // Note 'isActive' is left out and will not appear in the rendered table
      fields: [{
          key: 'last_name'

        },
        {
          key: 'first_name'

        },
        {
          key: 'age',
          label: 'Person age',

        }
      ],
      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'
        }
      ]
    }
  },
  computed: {
    sortable_cols() {
      return this.fields.map(f => {
        let tmp = f;
        tmp.sortable = true;
        return tmp
      })

    }
  }

})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table striped hover :items="items" :fields="sortable_cols"></b-table>
</div>

if you're not defining the fields property you could use the following code :

new Vue({
  el: "#app",
  data() {
    return {

      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'
        }
      ]
    }
  },
  computed: {
    sortable_cols() {
      return Object.keys(this.items[0]).map(f => {
        let tmp = {};
        tmp.sortable = true;
        tmp.key = f;
        return tmp
      })
    }
  }

})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table striped hover :items="items" :fields="sortable_cols"></b-table>
</div>