CODEWITHSUNDEEP
vue.jstwitter-bootstrap-3
Louis Charles
Louis Charles

Reputation: 360

Show/Hide columns dynamically with a bootstrap-vue component and bootstrap 3

I am currently trying to show/hide dynamically with a bootstrap-vue table (https://bootstrap-vue.js.org/docs/components/table).

So far, I only managed to hide the header but the cells won't disappear, which is a problem because the cells are not in front of the good headers (the numbers should be under days and 'ingredient' should be under item.

enter image description here

Here what's 'worked':

fields: [
{key: "day", label: "Day",sortable: true, thStyle:"display:none"},
{key: "item", label: "Item",sortable: true}
]

I was wondering if it was possible to maybe do that outside of vueJS, and change the properties of the column with CSS directly..

Thanks for the help !

Louis

Upvotes: 3

Views: 7932

Answers (1)

Hiws
Hiws

Reputation: 10404

You could add an additional property to your fields. For example visible and create a computed property that filters out all fields with visible: false.

That way you can simply toggle this property to show/hide your columns.

window.onload = () => {
  new Vue({
    el: '#app',
    computed: {
      visibleFields() {
        return this.fields.filter(field => field.visible)
      }
    },
    data() {
      return {
        items: [
          { id: 1, first: 'Mike', last: 'Kristensen', age: 16 },
          { id: 2, first: 'Peter', last: 'Madsen', age: 52 },
          { id: 3, first: 'Mads', last: 'Mikkelsen', age: 76 },
          { id: 4, first: 'Mikkel', last: 'Hansen', age: 34 },
        ],
        fields: [
          { key: 'id', label: 'ID', visible: true },
          { key: 'first', label: 'First Name', visible: true },
          { key: 'last', label: 'Last Name', visible: true },
          { key: 'age', label: 'Age', visible: true },
        ]
      }
    }
  })
}
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<div id='app'>
<b-checkbox
    :disabled="visibleFields.length == 1 && field.visible"
    v-for="field in fields" 
    :key="field.key" 
    v-model="field.visible" 
    inline
  >
  	{{ field.label }}
  </b-checkbox>
  <br /><br />
  <b-table :items="items" :fields="visibleFields" bordered>
  </b-table>
</div>

Upvotes: 15

Related Questions