No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to make qtable columns visible according to user role?

    Help
    3
    5
    1743
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      mecjos last edited by

      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 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @mecjos last edited by 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

        M 1 Reply Last reply Reply Quote 0
        • M
          mecjos @dobbel last edited by

          @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 1 Reply Last reply Reply Quote 0
          • beets
            beets @mecjos last edited by

            @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. 🙂

            M 1 Reply Last reply Reply Quote 0
            • M
              mecjos @beets last edited by

              @beets 😉 thank you.

              1 Reply Last reply Reply Quote 0
              • First post
                Last post