How to make qtable columns visible according to user role?

mecjos

Hi. How Can I make qtable columns visible according to user roles? There isn’t any options to hide or visible columns in column properties. Is there an easy way?

dobbel

@mecjos

you can use visible-columns property of Q-table:

https://quasar.dev/vue-components/table#Example--Visible-columns%2C-custom-top-and-fullscreen

https://quasar.dev/vue-components/table#Example--Visible-columns

mecjos

@dobbel Thanks. I made it by changing table data with computed property according to user role… Actually I’m looking for something like a boolean show property :

columns: [ name: 'name', label: 'label', hide: 'function(roles)']

But it doesn’t exist I gues… it’s solved… thank again…

beets

@mecjos A couple of other thoughts, you could try:

A ) Hide column with a class:

columns: [
  { 
    name: 'calories', 
    label: 'Calories', 
    field: 'calories', 
    sortable: true,
    classes: this.userCanSee(this.user, 'calories') ? '' : 'hidden',
    headerClasses: this.userCanSee(this.user, 'calories') ? '' : 'hidden',
  }, 
  // ...
]

B ) Make columns computed:

computed: {
  columns() {
    const columns = []
    // these next two everyone can see
    columns.push({ name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true })
    columns.push({ name: 'carbs', label: 'Carbs (g)', field: 'carbs' })

    // conditionally push the next column
    if(this.userCanSee(this.user, 'calories')) {
        columns.push({ name: 'calories', label: 'Calories', field: 'calories', sortable: true })
    }
    return columns
  }
}

To be honest, @dobbel ‘s answer is probably best here, these are just examples to get your noggin’ joggin’. Usually every feature doesn’t need to exist in Quasar, since you can accomplish it in a variety of other ways.

mecjos

@beets thank you.