React DataView

React DataView displays data in grid or list layout with pagination and sorting features.

Setup

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

Import

import { DataView, DataViewLayoutOptions } from 'primereact/dataview';

Getting Started

Layout of the DataView is managed by the PrimeFlex that can be downloaded from npm.

npm install primeflex --save

DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid.

DataView has two layout modes; list and grid where itemTemplate function is called by passing the item to render along with the layout mode.

const itemTemplate = (data, layout) => {
    if (layout === 'list') {
        return (
            // List content
        );
    }

    if (layout === 'grid') {
        return (
            Grid Content
        );
    }
}

<DataView value={products} layout={layout} itemTemplate={itemTemplate}></DataView>

DataViewLayoutOptions

DataViewLayoutOptions is a helper component to choose between layout modes. This component is used in controlled manner to manage the state of layout orientation.

<DataViewLayoutOptions layout={layout} onChange={(e) => setLayout(e.value)} />

Paginator

Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display. Visit the paginator component for more information about the available properties.

Pagination can either be used in Controlled or Uncontrolled manner. In controlled mode, first and onPage properties needs to be defined to control the pagination state.

<DataView value={products} layout={layout} itemTemplate={itemTemplate} paginator rows={10} first={first} onPage={(e) => setFirst(e.first)}></DataView>

In uncontrolled mode, only paginator property needs to be enabled. Initial page state can be still be provided using the first property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the paginator, prefer to use the component as controlled.

<DataView value={products} layout={layout} itemTemplate={itemTemplate} paginator rows={10}></DataView>

Sorting

sortField and sortOrder properties are available for sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.

const sortOptions = [
    {label: 'Price High to Low', value: '!price'},
    {label: 'Price Low to High', value: 'price'},
];

const header = (
    <div className="p-grid">
        <div className="p-col-12 p-md-4">
            <Dropdown options={sortOptions} value={sortKey} placeholder="Sort By" onChange={onSortChange} />
        </div>
    </div>
);

<DataView value={products} header={header} sortOrder={sortOrder} sortField={sortField} />

const onSortChange = (event) => {
    const value = event.value;

    if (value.indexOf('!') === 0) {
        setSortOrder(-1);
        setSortField(value.substring(1, value.length));
        setSortKey(value);
    }
    else {
        setSortOrder(1);
        setSortField(value);
        setSortKey(value);
    }
}

Lazy Loading

Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination in controlled mode and utilize the onPage callback to load your data from the backend. Pagination in this case needs to display the logical number of records so bind this value to the totalRecords property so that paginator can display itself according to the total records although you'd only need to load the data of the current page. Refer to DataTable lazy loading for a sample implementation.

Theming

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

Resources

Visit the PrimeReact DataView showcase for demos and documentation.