RowsPerPage option disappears if using pagination.sync in QTable

[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
      }
    }
  }

[carlos_proj]

@metalsadman The table control is still disappearing

[carlos_proj]

@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!

[carlos_proj]

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?

[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/

[carlos_proj]

@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?

[metalsadman]

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

[carlos_proj]

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

[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)
      }
    }
  }

[Hawkeye64]

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
}