The New QVirtualScroll Component
Showing lots of data, really fast!
The new QVirtualScroll component recently brought out in version 1.1.0 of Quasar was created due to the popular demand of the community. Many had been asking for a more performant way to display lots of data.
Imagine needing to render a list with tons of rows or a report of data with lots and lots of rows of data. QVirtualScroll helps with this kind of displaying of major amounts of data.
Now, if you happen to be experienced with Quasar, you might be asking:
What’s the difference between this component and QInfiniteScroll?
Well, the major difference is, with QVirtualScroll the data being rendered and shown to the user (which is just a small fraction of all, at any point in time) is the only data Vue has to deal with. This, in turn, means QVirtualScroll is much less resource-intensive than QInfiniteScroll and allows for a much more performant rendering of larger lists of data.
To explain this further, QVirtualScroll requires the minimum size of the data (in the item-size prop) to be available to the component upfront, before the component renders, yet it only renders the data in the area you determine (with the virtual-scroll-item-size prop) within the component.
QInfiniteScroll, on the other hand, will build on the list it is showing, getting the data in chunks as the user scrolls. This retrieval of data usually shows up as some sort of delay in rendering (with a loading indicator showing).
Here is QInfiniteScroll in action:
With QVirtualScroll, the loading of data is up-front, so a delay may be present initially, but then the data can all be displayed much more quickly.
The QVirtualScroll component comes with two versions and a horizontal scrolling version.
Here is the basic list version…
Using this version is quite simple.
Notice you have a default slot, where you can enter basically anything you want. Above, you see QItem as the slotted component in use.
Render Data Asynchronously
You can also have the internal component rendering the data asynchronously too. To do this, your initial list of data can be held to just the id of the data and the first set of viewable data will render asynchronously (meaning a quicker initial load of the data). As the user scrolls, data can be then continuously asynchronously retrieved from a server to then be rendered.
Here is example <template> code (note some-component — change it to your own):
Some important things to note.
- The setTimeout() is simulating a possible server call.
- Notice the getItems() method being offered to the items-fn prop. This is the method, which allows you to asynchronously load data into QVirtualScroll.
Below is how the asynchronous loading of data might look in action (the async component is a QChatMessage).
There is also the horizontal version.
All you need is the virtual-scroll-horizontal prop to make the component work horizontally.
<template>
<q-virtual-scroll
:items="heavyList"
virtual-scroll-horizontal
>
....And lastly, there is the markup table version.
To get the table version going, you only need to use the type prop.
<template>
<div class="q-pa-md">
<q-virtual-scroll
type="table"
style="max-height: 70vh"
:virtual-scroll-item-size="48"
:virtual-scroll-sticky-size-start="48"
:virtual-scroll-sticky-size-end="32"
:items="heavyList"
>
....You’ll also notice this version of the virtual table has a sticky header and footer, which are controlled by there respective props.
Bonus Tip
One of the team, @metalsadman (Aldrin), has also created an example of making gridlike cards for a mobile view of data in a QVirtualScroll list.
Pretty cool, huh?
Let us know what you think of the new component in the comments below.
If you want to learn more about Quasar:
The Quasar website: https://quasar.dev
GitHub: https://github.com/quasarframework/quasar
Getting Started: https://quasar.dev/start
Discord Chat Server: https://chat.quasar.dev
Forum: https://forum.quasar.dev
Twitter: https://twitter.quasar.dev
Facebook: https://facebook.quasar.dev
Donate: https://donate.quasar.dev
