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

    RowsPerPage option disappears if using pagination.sync in QTable

    Help
    3
    14
    3530
    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.
    • metalsadman
      metalsadman last edited by metalsadman

      use a model for your q-table’s :rows-per-page-options="rowsOptions" and change the array of that model according to your condition. in this sense giving it an empty array will hide it.

      from docs: https://quasar-framework.org/components/datatable.html
      rows-per-page-options type:Array description:Array of Numbers representing options for user to select how many rows per page should be shown. Example: ‘[3, 5, 7, 0]’. Notice value 0 means “All” and empty array hides the selection.

      watch: {
        'pagination' () {
          if (this.pagination.rowsPerPage === 0 || (this.pagination.rowsPerPage > 15 && this.pagination.rowsPerPage < 50)) {
            this.rowsOptions = []
          }
        }
      }
      
      1 Reply Last reply Reply Quote 0
      • C
        carlos_proj last edited by carlos_proj

        @metalsadman I tried your solution. I did :rows-per-page-options="rowsOptions". In data, I now have

        data () {
            return {
              rowsOptions: [3, 5, 7, 10, 15, 25, 50, 0],
              pagination: {
                rowsPerPage: 7,
                page: 1
              }
        }
        

        I implemented the watch but instead of giving it a blank array, because I don’t want it to be empty, I go ahead and re-establish this.rowsOptions to what I want it to be.

        watch: {
            'pagination' () {
              console.log(this.pagination.rowsPerPage)
              if (this.pagination.rowsPerPage === 0 || (this.pagination.rowsPerPage >= 15 && this.pagination.rowsPerPage < 50)) {
                this.rowsOptions = [3, 5, 7, 10, 15, 25, 50, 0]
              }
            }
          }
        

        However, the Rows per page still disappears on the UI if the user selects a Rows per page greater than the amount of items.

        1 Reply Last reply Reply Quote 0
        • C
          carlos_proj last edited by

          I also notice that on https://v0-15.quasar-framework.org/components/datatable.html#Controlling-pagination-custom-controls-amp-watching-for-page-navigation the example is basically what I have. They setup :pagination.sync="paginationControl" and paginationControl: { rowsPerPage: 3, page: 1 }. The rest of the example is just fancy stuff but the fact that the Rows per page doesn’t disappear on the UI is what I am lacking.

          1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman last edited by metalsadman

            you need to put an else to set it back to default. example:

            data () { 
              ...
              defaultOpts: [3, 5, 7, 10, 15, 25, 50, 0],
              rowsOptions: [3, 5, 7, 10, 15, 25, 50, 0]
             ...
             },
            watch: {
                'pagination' () {
                  console.log(this.pagination.rowsPerPage)
                  if (this.pagination.rowsPerPage === 0 || (this.pagination.rowsPerPage >= 15 && this.pagination.rowsPerPage < 50)) {
                     this.rowsOptions = []
                  } else {       
                     this.rowsOptions = this.defaultOpts
                  }
                }
              }
            
            1 Reply Last reply Reply Quote 0
            • C
              carlos_proj last edited by

              @metalsadman The table control is still disappearing 😞

              1 Reply Last reply Reply Quote 0
              • C
                carlos_proj last edited by

                @metalsadman I got it. It was a dumb mistake. I have a condition :hide-bottom="items.length < pagination.rowsPerPage" Where the intention was to hide the table controls but this is obviously bad code. Thanks for your help!

                1 Reply Last reply Reply Quote 0
                • C
                  carlos_proj last edited by

                  However, while I have you here @metalsadman… This component is being spawned multiple. Imagine 5 different tables that all use this same component. If a user selects a different Rows per page on one of the tables, how can I reflect that across all tables?

                  1 Reply Last reply Reply Quote 0
                  • metalsadman
                    metalsadman last edited by metalsadman

                    you’ll need vuex for that to store the state of your pagination object and share it across your component.
                    https://quasar-framework.org/guide/app-vuex-store.html
                    https://vuex.vuejs.org/

                    1 Reply Last reply Reply Quote 0
                    • C
                      carlos_proj last edited by

                      @metalsadman I am a noob with vuex. I created a store with the property pagination in the structure we require. From my component, I am calling mapState from my file/variable. It sets my pagination how I want but I am not able to change it. I understand that I am supposed to use a mapMutation to change the store value but what is the event that handles the changing of the Rows per page selection?

                      1 Reply Last reply Reply Quote 0
                      • metalsadman
                        metalsadman last edited by

                        no event in q-table that exposes that, just do same like the example i gave you, use watch hook on your vuex key.

                        1 Reply Last reply Reply Quote 0
                        • C
                          carlos_proj last edited by

                          @metalsadman I’m sorry but I can’t get it.

                          In my store, store.js I have

                          export default {
                            state: {
                              pagination: {
                                rowsPerPage: 7,
                                page: 1
                              }
                            }
                          

                          And from my table I have

                          import { mapState } from 'vuex'
                          export default {
                            computed: {
                              ...mapState('store', [
                                'pagination'
                              ])
                          }
                          

                          I’m not sure how to implement the watch functionality like in your example if we are no longer using a v-model.

                          1 Reply Last reply Reply Quote 0
                          • metalsadman
                            metalsadman last edited by metalsadman

                            :pagination.sync="pagination" :rows-per-page-options="rowsOptions", also add the rowOptions in your state and add actions or mutations so you can change its values, then same as the example:

                                'pagination' () {
                                  console.log(this.pagination.rowsPerPage)
                                  if (this.pagination.rowsPerPage === 0 || (this.pagination.rowsPerPage >= 15 && this.pagination.rowsPerPage < 50)) {
                                     this.setRowOptionAction([])
                                  } else {       
                                     this.setRowOptionAction(this.defaultOpts)
                                  }
                                }
                              }
                            
                            1 Reply Last reply Reply Quote 0
                            • Hawkeye64
                              Hawkeye64 last edited by

                              Because pagination is an object, and depending on how you set it’s properies, you may have to write your watch a different way.
                              if you use this.$set(this.pagination, 'rowsPerPage', value) then you’re good. Otherwise, you need to write your watch like this:
                              https://vuejs.org/v2/api/#watch

                              pagination: {
                                  handler: function (value) {
                                      console.log(this.pagination.rowsPerPage)
                                      if (this.pagination.rowsPerPage === 0 || (this.pagination.rowsPerPage >= 15 && this.pagination.rowsPerPage < 50)) {
                                         this.setRowOptionAction([])
                                      } else {       
                                         this.setRowOptionAction(this.defaultOpts)
                                      }
                                  },
                                  deep: true
                              }
                              
                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post