DataScroller displays data with on demand loading using scroll.
import { DataScroller } from 'primereact/datascroller';
DataScroller displays data with on demand loading using scroll.
<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.
<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.
<DataScroller ref={ds} value={products} itemTemplate={itemTemplate} rows={5} loader footer={footer} header="Click Load Button at Footer to Load More" />
Following is the list of structural style classes
| Name | Element |
|---|---|
| p-datascroller | Container element. |
| p-datascroller-header | Header section. |
| p-datascroller-footer | Footer section. |
| p-datascroller-content | Wrapper of item container. |
| p-datascroller-list | Item container element. |
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.
Component does not include any built-in interactive elements.