DataScroller

DataScroller displays data with on demand loading using scroll.


import { DataScroller } from 'primereact/datascroller';
         

DataScroller displays data with on demand loading using scroll.

List of Products
  • No available options

<DataScroller value={products} itemTemplate={itemTemplate} rows={5} buffer={0.4} header="List of Products" />
         

DataScroller can listen scroll event of itself rather than document in inline mode.

Scroll Down to Load More
  • No available options

<DataScroller value={products} itemTemplate={itemTemplate} rows={5} inline scrollHeight="500px" header="Scroll Down to Load More" />
         

Instead of scrolling, a custom element can be used to load data.

Click Load Button at Footer to Load More
  • No available options

<DataScroller ref={ds} value={products} itemTemplate={itemTemplate} rows={5} loader footer={footer} header="Click Load Button at Footer to Load More" />
         

Screen Reader

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