VirtualScroller

VirtualScroller is a performant approach to handle huge data efficiently.


import { VirtualScroller } from 'primereact/virtualscroller';
         

VirtualScroller is a performant approach to handle huge data efficiently. VirtualScroller is used to display huge data. It periodically adds special elements defined according to the scroll's position to the DOM. The itemSize and itemTemplate properties 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} itemTemplate={basicItemTemplate} />
<VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} orientation="horizontal" />
<VirtualScroller items={multiItems} itemSize={[50, 100]} itemTemplate={multiItemTemplate} orientation="both" />
         

Scroll Delay

0ms Delay
150ms Delay
250ms Delay

<VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} />
<VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} delay={150} />
<VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} delay={250} />
         

VirtualScroller has a special loader. It can be activated with the showLoader property. In addition, loadingTemplate can be used to add custom loaders to item elements.


<VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} showLoader delay={250}/>
<VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} showLoader delay={250} loadingTemplate={basicLoadingTemplate} />
         

Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking onLazyLoad callback.


<VirtualScroller items={lazyItems} itemSize={50} itemTemplate={basicItemTemplate} lazy onLazyLoad={onLazyLoad} showLoader loading={lazyLoading} />
         

VirtualScroller has a HTML div element to wrap the all items. But in some cases, it may be desirable to define a completely special wrapper element instead of the HTML div element. The contentTemplate property can be used for this. This will be especially necessary to maintain the DOM layout and provide accessibility.


<VirtualScroller items={templateItems} itemSize={25 * 7} itemTemplate={itemTemplate} showLoader delay={250} loadingTemplate={loadingTemplate} />
         

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-virtualscrollerContainer element.
p-virtualscroller-contentContent element.
p-virtualscroller-loaderLoader element.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Screen Reader

VirtualScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also customized for accessibility using listProps property.

Keyboard Support

Component does not include any built-in interactive elements.

Visit the API documentation for detailed information about all the properties, events and methods of the component.