DataView

Import via Module

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

Import via CDN

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

Getting Started

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

npm install primeflex
 

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)} />
 

Properties of DataViewLayoutOptions

Events of DataViewLayoutOptions

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 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="grid">
        <div className="col-12 md:col-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.

Properties

Events

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Accessibility

This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.

Dependencies

None.