Bootstrap-vue - How to show/hide a b-table column programmatically

EdenMachine_47167 0
Viewed 6555

How could I show/hide a column in the BootstrapVue b-table example below based on some event that changes the data model.

<template>
  <button @click="showHideAge=!showHideAge">Show/Hide Age</button>
  <b-table striped hover :items="items"></b-table>
</template>

<script>
const 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' }
]

export default {
  data () {
    return {
      items: items,
      showHideAge: true
    }
  }
}
</script>
bootstrap-vue vuejs2 vue-component vue.js javascript
2 Answers

You could use computed property to get person details according to the state given by show/hide age button

<template>
    <div>
        <button @click="showHideAge=!showHideAge">Show/Hide Age</button>
        <b-table striped hover :items="persons"></b-table>
    </div>
</template>

<script>
    const 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' }
    ]

    export default {
        data () {
            return {
                items: items,
                showHideAge: true
            }
        },
        computed: {
            persons() {
                if(this.showHideAge) {
                     return this.items
                } else {
                    return items.map(x => ({
                        isActive: x.isActive,
                        first_name: x.first_name,
                        last_name: x.last_name
                   }))
                }
            }
        }
    }
</script>
user_81728570

I realise this is old, but the question is still valid. There are v-slots for headers and cells. You can use v-show on a div in the slot to show/hide both header and cells that the whole column is hidden.

`<template>


<div>
      <button @click="showHideAge=!showHideAge">Show/Hide Age</button>
      <b-table striped hover :items="items">
       <template v-slot:cell(age)="row">
        <div v-show="showHideAge">{{ row.item.age }}</div>
       </template>
       <template v-slot:head(age)="field">
        <div v-show="showHideAge">{{ field.label }}</div>
       </template>
      </b-table>
   </div>
</template>

<script>
  const 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' }
    ]

     export default {
           data () {
             return {
               items: items,
               showHideAge: true
              }
          },
         
       }
 </script>`
user_55085440
Related