VirtualScroller is a performant approach to handle huge data efficiently.
+
+import VirtualScroller from 'primevue/virtualscroller';
+
+VirtualScroller is used to display huge data. It periodically adds special elements defined according to the scroll's position to the DOM.
+ The item and itemSize properties and item template are required on component. In addition, an initial array is required based on the total number of items to display.
+ VirtualScroller automatically calculates how many items will be displayed in the view according to itemSize using a specified scroll height. Its scroll height can be adjusted with scrollHeight
+ property or height property of CSS.
+<VirtualScroller :items="basicItems" :itemSize="50">
+ <template v-slot:item="{ item, options }">
+ <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+ </template>
+</VirtualScroller>
+
+
+export default {
+ data() {
+ return {
+ basicItems: null
+ }
+ },
+ mounted() {
+ this.basicItems = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
+ }
+}
+
+VirtualScroller has a special loader. It can be activated with the showLoader property. + In addition, loader template can be used to add custom loaders to item elements.
+ +
+<VirtualScroller :items="basicItems" :itemSize="50" showLoader :delay="250">
+ <template v-slot:item="{ item, options }">
+ <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+ </template>
+ <template v-slot:loader="{ options }">
+ <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px" >
+ <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
+ </div>
+ </template>
+</VirtualScroller>
+
+Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking lazy-load event.
+ +
+<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" :lazy=true @lazy-load="onLazyLoad">
+ <template v-slot:item="{ item, options }">
+ <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+ </template>
+</VirtualScroller>
+
+
+export default {
+ data() {
+ return {
+ lazyItems: null,
+ lazyLoading: false,
+ loadLazyTimeout: null,
+ }
+ },
+ mounted() {
+ this.lazyItems = Array.from({ length: 100000 });
+ },
+ methods: {
+ onLazyLoad(event) {
+ this.lazyLoading = true;
+
+ if (this.loadLazyTimeout) {
+ clearTimeout(this.loadLazyTimeout);
+ }
+
+ //imitate delay of a backend call
+ this.loadLazyTimeout = setTimeout(() => {
+ const { first, last } = event;
+ const lazyItems = [...this.lazyItems];
+
+ for (let i = first; i < last; i++) {
+ lazyItems[i] = `Item #${i}`;
+ }
+
+ this.lazyItems = lazyItems;
+ this.lazyLoading = false;
+
+ }, Math.random() * 1000 + 250);
+ }
+ }
+}
+
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| items | +array | +null | +An array of objects to display. | +
| itemSize | +number / [number, number] | +null | +The height/width of item according to orientation. | +
| scrollHeight | +string | +null | +Height of the scroll viewport. | +
| scrollWidth | +string | +null | +Width of the scroll viewport. | +
| orientation | +string | +'vertical' | +The orientation of scrollbar, valid values are 'vertical', 'horizontal' and 'both'. | +
| numToleratedItems | +number | +null | +Determines how many additional elements to add to the DOM outside of the view. + According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number. + Default value is half the number of items shown in the view. |
+
| delay | +number | +0 | +Delay in scroll before new data is loaded. | +
| lazy | +boolean | +false | +Defines if data is loaded and interacted with in lazy manner. | +
| showLoader | +boolean | +false | +Whether to show loader. | +
| style | +any | +null | +Inline style of the component. | +
| class | +string | +null | +Style class of the component. | +
| Name | +Parameters | +Description | +
|---|---|---|
| scroll | +event: Browser event | +Callback to invoke when scroll position changes. | +
| scroll-index-change | +event.first: First index of the new data range to be loaded. + event.last: Last index of the new data range to be loaded. + |
+ Callback to invoke when scroll position and item's range in view changes. | +
| lazy-load | +event.first: First index of the new data range to be loaded. + event.last: Last index of the new data range to be loaded. + |
+ Callback to invoke in lazy mode to load new data. | +
| Name | +Parameters | +Description | +
|---|---|---|
| scrollTo | +
+ left: Left position of scroll. + top: Top position of scroll + behavior: Behavior of scroll, valid values are 'auto' and 'smooth' + |
+ Scroll to move to a specific position. | +
| scrollToIndex | +
+ index: Index of item according to orientation mode. + behavior: Behavior of scroll, valid values are 'auto' and 'smooth' + |
+ Scroll to move to a specific item. | +
| scrollInView | +
+ index: Index of item according to orientation mode. + to: Defines the location of the item in view, valid values are 'to-start' and 'to-end'. + behavior: Behavior of scroll, valid values are 'auto' and 'smooth' + |
+ It is used to move the specified index into the view. It is a method that will usually be needed when keyboard support is added to the virtualScroller component. | +
| getRenderedRange | +- | +Returns the range of items added to the DOM. | +
| Name | +Parameters | +
|---|---|
| item | +item: Item instance + options: Options of the item instance |
+
| loader | +options: Options of the loader items | +
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-virtualscroller | +Container element. | +
| p-virtualscroller-content | +Content element. | +
| p-virtualscroller-loader | +Loader element. | +
None.
+ +