Conditionally show / hide b-table column based on store getters - vue.js

Question

I want to show / hide table column 'first_name' based on if user isAdmin or not.
This is my table:
<b-table
striped
hover
small
stacked="sm"
selectable
select-mode="single"
show-empty
:items="allProducts"
:fields="productsFieldsForBTable"
:busy="isLoading"
primary-key="id"
>
<template slot="actions" slot-scope="data">
<select v-model="data.selected">
<option v-for="user in users" :key="user.id" :value="user.id">{{user.first_name}}</option>
</select>
</template>
</b-table>
This is productsFieldsForBTable in store getters.
productsFieldsForBTable: () => {
return [
{
key: 'product_name',
sortable: true,
},
{
key: 'buying_price',
sortable: true,
},
{
key: 'notes',
sortable: true,
},
{
key: 'first_name',
label: 'User',
sortable: true,
},
// A virtual column for additional action buttons
{ key: 'actions', label: 'Actions' }
]
}
store getters have isAdmin flag that will be used to hide / show column
I am not sure what syntax to use and where to check conditions? (in b-table tag or in computed?)
Updated -
How do I access isAdmin value from store itself? its in getters as shown below:
getters: {
isAdmin: (state, getters) => { return getters.isLoggedIn && state.user.role === 'Admin' }, ....
if(getter.isAdmin){ // how to access getters' isAdmin here? // this.$store.getters.isAdmin is not working here.
fields.push({
key: 'first_name',
label: 'User',
sortable: true
})
}

Answer 1

You could use mapGetters from Vuex and map productFieldsForBTable as computed property to your component. Then in your getter instead of returning an array in line do something like this:
productsFieldsForBTable: (state, getters) => {
var fields = [
{
key: 'product_name',
sortable: true,
},
{
key: 'buying_price',
sortable: true,
},
{
key: 'notes',
sortable: true,
},
{
key: 'first_name',
label: 'User',
sortable: true,
},
// A virtual column for additional action buttons
{ key: 'actions', label: 'Actions' }
]
if(getters.isAdmin){
fields.push({
key: 'admin_field',
sortable: true,
})
}
return fields
}
If you didn't want the admin fields at the end of the table you could always the splice function instead of push. Something like below would put the admin item before the actions:
var index = 4 // index you want to insert the new column at
fields.splice(index, 0, { key: 'admin_field', sortable: true })