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

Question

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.

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

At first I just want to hide them, but at last I wanted to do something like this : datatables.net/examples/api/show_hide.html — Louis Charles
– Louis Charles, Commented Jan 21, 2020 at 8:56

Hiws · Accepted Answer · 2020-01-21 09:05:14Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related