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

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

@metalsadman The table control is still disappearing

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.

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

Re: QDataTable help

I am having issues with the pagination scheme. If I try to override my q-table’s rowsPerPage option to say 7, then I see that the tables now display 7 as the initial amount. As an example, suppose that I have 12 items for that table and I only display 7. The user then has the option to change the rows per page to [3, 5, 7, 10, 15, 20, 25, 50, All] as a default . However, if they were to choose between 15-50 as their rowsPerPage, then the option to choose a different rowsPerPage disappears.

I am using windows/chrome. I am implementing the initial pagination’s rowPerPage option by doing :pagination.sync="pagination" and in data data () { pagination: {rowsPerPage: 7}}.

@Hawkeye64 The issue is that there are many rows. I am currently implementing a pagination scheme but if the user overrides it by trying to view more, then this issue occurs.

@Hawkeye64 I’m looking for a solution to how this handles the scrolling https://amphiluke.github.io/handy-scroll/. I’m currently trying to implement this with no luck

I have a q-table that has many rows that often extends past the visible page. Additionally, there are many columns so users often have to scroll the x-scroll to the left and right. However, since many rows exist, users have to scroll to the bottom of the web document in order to view the x-scrollbar, scroll left and right, and finally go back to the desired position. The documentation on q-table does not have options for controlling the placement of this scroll bar.

I have already tried adding an overflow property on the css styling. I have tried wrapping by q-table in a div and giving css properties to that div class.

Below is an example of the problem. Notice that there is a y-scrollbar but no x-scrollbar.

I have to scroll to the bottom of the document to see the x-scrollbar like in this image. I want that x-scrollbar to visible at all times similar to the y-scrollbar.

I still have not been able to get this one… I tried on very small sets of data to no avail

I know I’ve already asked several times but is there a way to programatically restart the q-infinite-scroll? I was thinking that whenever the user changes one of the variables to just call this function. That way it would just do it properly.

I tried using push on this.items instead and I still have the same issue

<script>
import { scroll } from 'quasar'
const { getScrollTarget, setScrollPosition } = scroll
import ResultsCollateTable from '../components/ResultsCollateTable.vue'
import { mapState, mapGetters } from 'vuex'
import fuzzysort from 'fuzzysort'

export default {
  name: 'CollateResultsPage',
  components: {
    ResultsCollateTable
  },
  data () {
    return {
      items: [],
      idx: 0,
      turnOff: false,
      itemLoad: 3,
      delay: 1000
    }
  },
  computed: {
    ...mapState('appCompareDatas', ['searchText']),
    ...mapState('compareDatas', [
      'reviewItems',
      'selectedPendingItems',
      'selectedApprovedItems'
    ]),
    ...mapState('persistCompareDatas', [
      'autoColumns'
    ]),
    ...mapGetters('persistCompareDatas', [
      'currentColumnPreset',
      'currentRowPreset'
    ]),
    ...mapGetters('compareDatas', [
      'fetchItemsLoading',
      'haveReviewItems',
      'rollItems'
    ]),
    allItems () {
      return [
        ...this.selectedPendingItems,
        ...this.selectedApprovedItems
      ]
    },
    fieldRecords () {
      const items = this.allItems, fields = this.autoColumns
      const fieldSet = fields.reduce((o, f) => {
        items.forEach(i => {
          f.name in o ? o[f.name].add(i[f.name]) : o[f.name] = new Set([i[f.name]])
        })
        return o
      }, {})
      return fields.map(f => ({
        name: f.name,
        label: f.label,
        value: Array.from(fieldSet[f.name])
      }))
    },
    commonTags () {
      return this.fieldRecords.filter(r => r.value.length === 1)
        .map(r => ({...r, value: r.value[0]}))
    },
    nonCommonTags () {
      return this.fieldRecords.filter(r => r.value.length !== 1)
    },
    nonCommonColumnNames () {
      return this.nonCommonTags.map(f => f.name)
    },
    rolledItems () {
      return this.rollItems(this.allItems)
    },
    rolledCheckNames () {
      return this.rolledItems.checks
    },
    filteredRolledCheckNames () {
      let names = [...this.rolledCheckNames]
      if (this.currentRowPreset.value === 'hideZero') {
        names = names.filter(name => (this.groupVioCount(name) > 0))
      } else if (this.currentRowPreset.value === 'hidePendingZero') {
        names = names.filter(name => (this.groupPendingVioCount(name) > 0))
      } else if (this.currentRowPreset.value === 'showOnlyZero') {
        names = names.filter(name => (this.groupVioCount(name) === 0))
      }
      return names
    },
    rolledTargets () {
      return this.filteredRolledCheckNames.map(t => fuzzysort.prepare(t))
    },
    filteredCheckNames () {
      return !this.searchText
        ? this.filteredRolledCheckNames.map(name => ({target: name}))
        : fuzzysort.go(this.searchText, this.rolledTargets, {
          threshold: -10000,
          allowTypo: true,
          limit: 200
        })
    },
    showing () {
      return `${this.filteredCheckNames.length}/${this.rolledCheckNames.length}`
    }
  },
  methods: {
    loadMore (index, done) {
      // If there is more than 1 Data loaded, then add a delay to the rendering
      if (this.selectedPendingItems.length + this.selectedApprovedItems.length === 1) {
        this.delay = 0
      }
      // Mechanism for loading more violations
      if (this.turnOff === false) {
        setTimeout(() => {
          let items = []
          // Load violations in steps of itemLoad
          for (var i = this.idx; i < this.idx + this.itemLoad; i++) {
            if (i < this.filteredCheckNames.length) {
              items.push(this.filteredCheckNames[i])
            } else {
              this.turnOff = true
            }
          }
          this.idx = i
          this.items = this.items.concat(items)
          done()
        }, this.delay)
      }
    },
    orderItems (resultsMap) {
      return this.rolledItems.ids
        .filter(id => id in resultsMap)
        .map(id => resultsMap[id])
    },
    highlight (result) {
      return result ? fuzzysort.highlight(result, '<span class="text-primary">', '</span>') : ''
    },
    groupVioCount (groupName) {
      const group = this.rolledItems.map[groupName]
      const oids = Object.keys(group)
      return oids.map(id => group[id])
        .map(item => item.count)
        .reduce((a, c) => a + c, 0)
    },
    groupPendingVioCount (groupName) {
      const group = this.rolledItems.map[groupName]
      const oids = Object.keys(group)
      return oids.map(id => group[id])
        .filter(item => item.scope === 'pending')
        .map(item => item.count)
        .reduce((a, c) => a + c, 0)
    },
    detectColumnPreset () {
      const flaggedChecks = !this.searchText
        ? this.filteredRolledCheckNames.map(name => ({target: name}))
        : fuzzysort.go(this.searchText, this.rolledTargets, {
          threshold: -10000,
          allowTypo: true,
          limit: 1
        })
      flaggedChecks[0].target = flaggedChecks[0].target.startsWith('/') ? flaggedChecks[0].target.substring(1) : flaggedChecks[0].target
      const numberElements = flaggedChecks[0].target.split('/')
      return numberElements.length > 1
        ? 'test1' : 'test2'
    },
    scrollToElement (el) {
      let target = getScrollTarget(el)
      let offset = el.offsetTop - el.scrollHeight
      let duration = 1000
      setScrollPosition(target, offset, duration)
    }
  },
  filters: {
    sanitizedTagValues: v => v.toUpperCase()
  },
  mounted () {
    this.currentColumnPreset.value = this.detectColumnPreset()
  }
}
</script>

I am trying to use quasar infinite-scroll to enhance rendering time with large amounts of data in my website. I am querying data from a sever and sorting that data into tables. The tables are then put into cards. Each card can have up to 100 rows of data with up to 10 columns. Additionally, the card heights are variable and the number of cards are also variable. Finally, users can change information that is fed into the card generation or table information thus I need the infinite scroll to “restart” whenever one of these variables change.

So far I have a “working” state of the infinite scroll meaning that I see that not all the data is loaded at once. The part I need help on is the reactivity portion. The content of the web page does not refresh whenever one of the variables are updated from the user side. Please let me know if these things don’t make sense

I should add that I the website was reactive when the cards weren’t wrapped around the q-infinite-scroll component. I just took a huge hit on rendering time since everything was trying to be loaded at once.

I am also open to suggestions on other methods of enhancing rendering

<q-infinite-scroll
      class="col-12 justify-center"
      :handler="loadMore"
      :offset="40"
    >
      <div class="row col-12 shadow-1 q-mt-md q-pa-lg results-card"
        v-for="(item, index) in items" :key="index"
        ref="collate"
      >
        <!-- check title -->
        <div
          v-if="searchText"
          class="col-12 text-weight-light uppercase"
          v-html="highlight(item)"
        />
        <div v-else
          class="col-12 text-weight-light uppercase"
        >
          {{item.target}}
        </div>
        <!-- collation table -->
        <results-collate-table
          dense
          class="col-12 no-shadow"
          :visibleColumns="[...currentColumnPreset.selections, ...nonCommonColumnNames]"
          :items="orderItems(rolledItems.map[item.target])"
        />
      </div>
      <q-spinner-dots
        class="offset-sm-6"
        color="primary"
        :size="40"
        v-if="!turnOff">
      </q-spinner-dots>
    </q-infinite-scroll>


methods: {
loadMore (index, done) {
      // If there is more than 1 dispo loaded, then add a delay to the rendering
      if (this.selectedPendingItems.length + this.selectedApprovedItems.length === 1) {
        this.delay = 0
      }
      // Mechanism for loading more violations
      if (this.turnOff === false) {
        setTimeout(() => {
          let items = []
          // Load violations in steps of itemLoad
          for (var i = this.idx; i < this.idx + this.itemLoad; i++) {
            if (i < this.filteredCheckNames.length) {
              items.push(this.filteredCheckNames[i])
            } else {
              this.turnOff = true
            }
          }
          this.idx = i
          this.items = this.items.concat(items)
          done()
        }, this.delay)
      }
    },

filteredchecknames is an object of strings that are keys to see what data to load
this is what users choose