React DeferredContent

React DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { DeferredContent } from 'primereact/deferredcontent';

Getting Started

DeferredContent is used as a wrapper element of its content.

<DeferredContent onLoad={onDataLoad}>
    <DataTable value={products}>
        <Column field="code" header="Code"></Column>
        <Column field="name" header="Name"></Column>
        <Column field="category" header="Category"></Column>
        <Column field="quantity" header="Quantity"></Column>
    </DataTable>
</DeferredContent>

Callback

onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.

<DeferredContent onLoad={onDataLoad}>
    <DataTable value={products}>
        <Column field="code" header="Code"></Column>
        <Column field="name" header="Name"></Column>
        <Column field="category" header="Category"></Column>
        <Column field="quantity" header="Quantity"></Column>
    </DataTable>
</DeferredContent>

Theming

DeferredContent supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact DeferredContent showcase for demos and documentation.