Show hide table column base on selection vuejs

Question

It should be display show, display hide base on checkboxes click it is not working. Can anyone help where is the mistake ?

Once we click on ID it should hide the ID column if we click on first it should hide/show base on checkboxes click and so on with the checkbox event triggered.

<html>
  <head>
    <title>VueJs Demo Example</title>
    <script src="https://unpkg.com/vue@3"></script>
    </script>
  </head>
  <body>
    <h1 id="app">{{ message }}
      <div v-for="field in fields">
        <input type="checkbox" :disabled="visibleFields.length == 1 && field.visible" :key="field.key" v-model="field.visible" inline />
        <label>{{field.label}}</label>
      </div>
      <tr>
        <th> ID </th>
        <th>first</th>
        <th>last</th>
        <th>age</th>
      </tr>
      <div v-for="item in items" :fields="visibleFields">
        <table>
          <tr>
            <td>{{item.id}}</td>
            <td>{{item.first}}</td>
            <td>{{item.last}}</td>
            <td>{{item.age}}</td>
          </tr>
        </table>
      </div>
    </h1>
    <script>
      const {
        createApp
      } = Vue
      createApp({
        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
            }, ]
          }
        },
        computed: {
          visibleFields() {
            return this.fields.filter(field => field.visible)
          }
        },
      }).mount('#app')
    </script>
  </body>
</html>

I hope it is cleared please do write if anything is required in term of clarifications.

Thanks in advance

Nikola Pavicevic · Accepted Answer · 2022-11-05 15:05:03Z

2

Please take a look at following snippet (you can use v-if and method that returns if column visible or not):

const app = Vue.createApp({
  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}, ]
    }
  },
  computed: {
    visibleFields() {
      return this.fields.filter(field => field.visible)
    }
  },
  methods: {
    isVisible(id) {
      return this.visibleFields.find(v => v.key === id)
    },
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(field, i) in fields" :key="i"> 
    <input type="checkbox" :disabled="visibleFields.length == 1 && field.visible" :key="field.key" v-model="field.visible" inline />
    <label>{{ field.label }}</label> 
  </div>
  <table>
    <tr>
      <th v-for="(field, i) in fields" :key="i"> 
        <label v-if="isVisible(field.key)">{{ field.label }}</label> 
      </th>
    </tr>
    <tr v-for="(item, i) in items" :key="i">
      <td v-for="(itm, key, i) in item" :key="i">
        <div v-if="isVisible(key)">{{ itm }}</div>
      </td>
    </tr>
  </table>
</div>

edited Nov 5, 2022 at 15:05

answered Nov 5, 2022 at 13:08

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

simon Over a year ago

Thanks Nikola that is fine but header should also disappear there will be two section one is for table where header and table body data exists other section will have option to display show or hide with checkboxes

simon Over a year ago

I did by this <table> <tr> <th v-for="(field, key, i) in items[0]" :key="i"> <span v-if="isVisible(key)">{{key}}</span> </th> </tr> <tr v-for="(item, i) in items" :key="i"> <td v-for="(itm, key, i) in item" :key="i"> <div v-if="isVisible(key)">{{ itm }}</div> </td> </tr> </table> is this correct way ?

Nikola Pavicevic Over a year ago

@simon hey mate, check again pls, I updated my answer

Collectives™ on Stack Overflow

Show hide table column base on selection vuejs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related