CODEWITHSUNDEEP
twitter-bootstrapvue.jsbootstrap-vue
Rugo
Rugo

Reputation: 383

BootstrapVue conditional column in b-table

I'd like to only show one of my columns if the current user is an admin. I'm not sure how to do this with bootstrapVue. Any ideas?

Upvotes: 2

Views: 6347

Answers (1)

Hiws
Hiws

Reputation: 10334

Here's a snippet based on Troy's comment.

I've added a custom property to the field object called requiresAdmin. This is not part of standard Bootstrap-Vue.

You can use this to filter out all the fields that require's the user to be an admin in a computed property. Based on whether the user is an admin or not. This makes it easy to add and remove fields that require's the user to be an admin.

new Vue({
  el: '#app',
  computed: {
    computedFields() {
      // If the user isn't an admin, filter out fields that require auth.
      if(!this.isUserAdmin)
        return this.fields.filter(field => !field.requiresAdmin);
        
      // If the user IS an admin, return all fields.
      else
        return this.fields;
    }
  },
  data() {
      return {
        isUserAdmin: false,
        fields: [
          { key: 'first', label: 'First Name' },
          { key: 'last', label: 'Last Name' },
          { key: 'age', label: 'Age' },
          { key: 'sex', label: 'Sex' },
          { key: 'secretActions', label: 'Secret Actions', requiresAdmin: true },
        ],
        items: [
          { first: 'John', last: 'Doe', sex: 'Male', age: 42 },
          { first: 'Jane', last: 'Doe', sex: 'Female', age: 36 },
          { first: 'Rubin', last: 'Kincade', sex: 'Male', age: 73 },
          { first: 'Shirley', last: 'Partridge', sex: 'Female', age: 62 }
        ]
      }
    }
})
<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.js"></script>

<div id="app" class="p-3">
  <b-btn @click="isUserAdmin = !isUserAdmin">
    Toggle admin user ({{ isUserAdmin }})
  </b-btn>
  <br /><br />
  <b-table :fields="computedFields" :items="items">
    <template v-slot:cell(secretActions)>
      <b-btn>Edit User</b-btn>
      <b-btn>Delete User</b-btn>
    </template>
  </b-table>
</div>

Upvotes: 5

Related Questions