I quickly put together a hacked wrapper component for the data table in order to support sticky headers as it is a must for a project I am working on. The issue that I currently have is passing custom slot templates into the child data table and getting them to recognize/render. I am rather new to both Vue and Quasar so I may eventually get it, but currently have to move on with what I have. Hopefully this is not an impossible feat as this type of functionality is crucial to our application layout?
The wrapper component also has a custom footer so I could determine the placement independent of the table. The purpose of an independent footer was to have the application layout contain a top toolbar, sticky search bar, full page scrolling table, and then the footer always pinned to the bottom while in desktop view.
Below is a pen demonstrating what I quickly hacked together. Would love to see a built-in wrapper component within quasar which accomplishes similar functionality.

https://codepen.io/bobbyross/pen/ZjGVpa

Sorry for the delay… QInifiniteScroll does not really fit the bill as for mobile rendering of large lists it will react slowly and will require reaching the bottom of a page before more is loaded. What I would like to do is allow a user to scroll halfway down a list of say 20,000 items and have the item-fn called once to load the current page of data based on the bounds of the slice size.
In the documentation there is an example for using virtual scroll and QTable where when you reach the end of a list it does load more items, but you can only scroll to the end of the current page, whereas the item-fn allows you to scroll anywhere within the length specified (say 100,000 items) and then it will make a call to render the items. This would provide a much better user experience as the concept of paging would not be evident to the user.
What I find odd is when using the item-fn on a list of 100000 items as in the examples shown is not reliable. If the slice size is set to say 300 items the item-fn call is delayed and is not initially called until the index reaches about halfway through the first range of 300. After the initial item-fn call it then calls on each scroll from that point on. If it was only called once as you scrolled towards the end of the slice size it would possibly allow for a better paging scenario.
Hopefully this makes sense…

The virtual scroll component currently provides the ability to dynamically generate items via the item-fn. I had thought to leverage this to attempt a more traditional paging model for retrieving data from the server. Basically go get items 100-200 as the user scrolls within a threshold.

I am running into a couple of issues when attempting to use the function to page data:

• First the itemFn is initially not called until reaching the end of the item slice size. After the initial call it will then call as items are scrolled. Is there a reason that the virtual-scroll component operates in this manner or is this possibly a bug?
• The only values available from within the itemFn is from and size which are not helpful. I can calculate the current index, but there is no option such as a threshold to control how often it is called. It would be beneficial to have a threshold parameter and page event which supplies a to and from value of what the next page should be based on the slice size specified. The page event would only be called when a new page of data is needed and data returned is appended to the list as the user scrolls. It would also be helpful to know the direction.

My question is if anyone is using this in a more traditional way and how they are accomplishing it, or is it possible to get this in as a feature request. Any help is appreciated.

I have discovered an issue with input fields when wrapped in columns having a width of 4 or less while using Firefox. If the column width is set to a size of 4 or greater after icons are clickable and the handler will fire, when less than 4 the cursor does not change to indicate the icon has an action and clicking does not fire the handler.

Below is a demonstration of what I am talking about…
I also have Fiddle here, though the handler never fires on the Fiddle no matter what which is something else because the same code works locally. In the fiddle you will notice that the small input after button does not react to hover or click actions within Firefox.

<div id="q-app">
  <div class="row">
    <div class="col-3">
      <q-input  float-label="Does not work in firefox" v-model="value" type="number" :after="[{icon: 'zoom_out_map', content: true, sayHello }]" />
    </div>
    <div class="col-8">
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <q-input  float-label="Works" v-model="value" type="number" :after="[{icon: 'zoom_out_map', content: true, sayHello }]" />
    </div>
  </div>
</div>

new Vue({
  el: '#q-app',
  data: function () {
    return {
      value: 12345
    }
  },
  
  methods: {
  	sayHello() {
    	alert('Hey there!!')
    }
	}
})

Thank you for any help…

I quickly put together a hacked wrapper component for the data table in order to support sticky headers as it is a must for a project I am working on. The issue that I currently have is passing custom slot templates into the child data table and getting them to recognize/render. I am rather new to both Vue and Quasar so I may eventually get it, but currently have to move on with what I have. Hopefully this is not an impossible feat as this type of functionality is crucial to our application layout?
The wrapper component also has a custom footer so I could determine the placement independent of the table. The purpose of an independent footer was to have the application layout contain a top toolbar, sticky search bar, full page scrolling table, and then the footer always pinned to the bottom while in desktop view.
Below is a pen demonstrating what I quickly hacked together. Would love to see a built-in wrapper component within quasar which accomplishes similar functionality.

https://codepen.io/bobbyross/pen/ZjGVpa