DataScroller

DataScroller displays data with on demand loading using scroll.

Demo is at the bottom of this page.

Import via Module


import { DataScroller } from 'primereact/datascroller';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/datascroller/datascroller.min.js"></script>

Getting Started

DataScroller requires a collection of items as its value, number of rows to load and a template content to display. Here is a sample DataScroller that displays a list of cars where each load event adds 10 more rows if available.


<DataScroller value={products} itemTemplate={itemTemplate} rows={10}></DataScroller>


const itemTemplate = (item) => {
    // custom item content
}

Inline

By default DataScroller listens to the scroll event of window, the alternative is the inline mode where container of the DataScroller element itself is used as the event target. Set inline option to true to enable this mode.


<DataScroller value={products} itemTemplate={itemTemplate} rows={10} inline></DataScroller>

Lazy Loading

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 everytime paging happens. To implement lazy loading, enable lazy property and provide a method callback using onLazyLoad that actually loads the data from a remote datasource. onLazyLoad gets an event object that contains information about what to load.


<DataScroller value={products} itemTemplate={itemTemplate} rows={10} lazy onLazyLoad={loadData}></DataScroller>


const loadData = (event) => {
    //event.first = First row offset
    //event.rows = Number of rows per page
    //add more records to the cars array
}

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
value	array	null	An array of objects to display.
rows	number	null	Number of rows to fetch in a load event.
inline	boolean	false	Defines if the event target to listen the scroll event is the element itself.
scrollHeight	any	null	Max height of the content area in inline mode.
loader	boolean	null	Determines whether data is loaded by a target element.
buffer	number	0.9	Number of buffer size.
style	string	null	Inline style of the component.
className	string	null	Style class of the component.
itemTemplate	function	null	Function that gets an item in the value and returns the content for it.
header	any	null	Label of header.
footer	any	null	Label of footer.
emptyMessage	any	No records found	Text to display when there is no data.

Events

Name	Parameters	Description
onLazyLoad	event.first = First row offset event.rows = Number of rows per page	Callback to invoke in lazy mode to load new data.

Styling

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.