Source: https://primereact.org/datascroller/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

DataScroller

DataScroller displays data with on demand loading using scroll.

Import#

import { DataScroller } from 'primereact/datascroller';

Copy

Basic#

DataScroller displays data with on demand loading using scroll.

List of Products

Bamboo Watch

Product Description

Accessories

$65Add to CartINSTOCK
Black Watch

Product Description

Accessories

$72Add to CartINSTOCK
Blue Band

Product Description

Fitness

$79Add to CartLOWSTOCK
Blue T-Shirt

Product Description

Clothing

$29Add to CartINSTOCK
Bracelet

Product Description

Accessories

$15Add to CartINSTOCK
<DataScroller value={products} itemTemplate={itemTemplate} rows={5} buffer={0.4} header="List of Products" />

Copy

Inline#

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

Scroll Down to Load More

Bamboo Watch

Product Description

Accessories

$65Add to CartINSTOCK
Black Watch

Product Description

Accessories

$72Add to CartINSTOCK
Blue Band

Product Description

Fitness

$79Add to CartLOWSTOCK
Blue T-Shirt

Product Description

Clothing

$29Add to CartINSTOCK
Bracelet

Product Description

Accessories

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

Copy

Loader#

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

Click Load Button at Footer to Load More

Bamboo Watch

Product Description

Accessories

$65Add to CartINSTOCK
Black Watch

Product Description

Accessories

$72Add to CartINSTOCK
Blue Band

Product Description

Fitness

$79Add to CartLOWSTOCK
Blue T-Shirt

Product Description

Clothing

$29Add to CartINSTOCK
Bracelet

Product Description

Accessories

$15Add to CartINSTOCK

Load

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

Copy

Accessibility#

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.

Import
Basic
Inline
Loader
Accessibility

PrimeReact 10.9.7 by PrimeTek