DataView

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

Import #


import { DataViewModule } from 'primeng/dataview';

Basic #

DataView requires a value to display along with a list template that receives an object in the collection to return content.

INSTOCK

Accessories

Bamboo Watch

$65

INSTOCK

Accessories

Black Watch

$72

LOWSTOCK

Fitness

Blue Band

$79

INSTOCK

Clothing

Blue T-Shirt

$29

INSTOCK

Accessories

Bracelet

$15


<p-dataView #dv [value]="products">
    <ng-template pTemplate="list" let-products>
        <div class="grid grid-nogutter">
            <div class="col-12" *ngFor="let item of products; let first = first" class="col-12">
                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" [ngClass]="{ 'border-top-1 surface-border': !first }">
                    <div class="md:w-10rem relative">
                        <img class="block xl:block mx-auto border-round w-full" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + item.image" [alt]="item.name" />
                        <p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)" class="absolute" [style.left.px]="4" [style.top.px]="4" />
                    </div>
                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
                            <div>
                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
                            </div>
                            <div class="surface-100 p-1" style="border-radius: 30px">
                                <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
                                    <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
                                    <i class="pi pi-star-fill text-yellow-500"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-column md:align-items-end gap-5">
                            <span class="text-xl font-semibold text-900">{{ '$' + item.price }}</span>
                            <div class="flex flex-row-reverse md:flex-row gap-2">
                                <p-button icon="pi pi-heart" [outlined]="true" />
                                <p-button icon="pi pi-shopping-cart" class="flex-auto md:flex-initial white-space-nowrap" label="Buy Now" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-dataView>

Pagination #

Pagination is enabled with the paginator and rows properties. Refer to the Paginator for more information about customizing the paginator.

INSTOCK

Accessories

Bamboo Watch

$65

INSTOCK

Accessories

Black Watch

$72

LOWSTOCK

Fitness

Blue Band

$79

INSTOCK

Clothing

Blue T-Shirt

$29

INSTOCK

Accessories

Bracelet

$15


<p-dataView #dv [value]="products" [rows]="5" [paginator]="true">
    <ng-template pTemplate="list" let-products>
        <div class="grid grid-nogutter">
            <div class="col-12" *ngFor="let item of products; let first = first" class="col-12">
                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" [ngClass]="{ 'border-top-1 surface-border': !first }">
                    <div class="md:w-10rem relative">
                        <img class="block xl:block mx-auto border-round w-full" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + item.image" [alt]="item.name" />
                        <p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)" class="absolute" [style.left.px]="4" [style.top.px]="4" />
                    </div>
                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
                            <div>
                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
                            </div>
                            <div class="surface-100 p-1" style="border-radius: 30px">
                                <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
                                    <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
                                    <i class="pi pi-star-fill text-yellow-500"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-column md:align-items-end gap-5">
                            <span class="text-xl font-semibold text-900">{{ '$' + item.price }}</span>
                            <div class="flex flex-row-reverse md:flex-row gap-2">
                                <p-button icon="pi pi-heart" [outlined]="true" />
                                <p-button icon="pi pi-shopping-cart" class="flex-auto md:flex-initial white-space-nowrap" label="Buy Now" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-dataView>

Sorting #

Built-in sorting is controlled by bindings sortField and sortOrder properties from a custom UI.

INSTOCK

Accessories

Bamboo Watch

$65

INSTOCK

Accessories

Black Watch

$72

LOWSTOCK

Fitness

Blue Band

$79

INSTOCK

Clothing

Blue T-Shirt

$29

INSTOCK

Accessories

Bracelet

$15


<p-dataView #dv [value]="products" [sortField]="sortField" [sortOrder]="sortOrder">
    <ng-template pTemplate="header">
        <div class="flex flex-column md:flex-row md:justify-content-between">
            <p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)" styleClass="mb-2 md:mb-0" />
        </div>
    </ng-template>
        <ng-template pTemplate="list" let-products>
        <div class="grid grid-nogutter">
            <div class="col-12" *ngFor="let item of products; let first = first" class="col-12">
                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" [ngClass]="{ 'border-top-1 surface-border': !first }">
                    <div class="md:w-10rem relative">
                        <img class="block xl:block mx-auto border-round w-full" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + item.image" [alt]="item.name" />
                        <p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)" class="absolute" [style.left.px]="4" [style.top.px]="4" />
                    </div>
                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
                            <div>
                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
                            </div>
                            <div class="surface-100 p-1" style="border-radius: 30px">
                                <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
                                    <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
                                    <i class="pi pi-star-fill text-yellow-500"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-column md:align-items-end gap-5">
                            <span class="text-xl font-semibold text-900">{{ '$' + item.price }}</span>
                            <div class="flex flex-row-reverse md:flex-row gap-2">
                                <p-button icon="pi pi-heart" [outlined]="true" />
                                <p-button icon="pi pi-shopping-cart" class="flex-auto md:flex-initial white-space-nowrap" label="Buy Now" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-dataView>

Layout #

DataView supports list and grid display modes defined with the layout property. The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you may use your own UI to switch modes as well.

INSTOCK

Accessories

Bamboo Watch

$65

INSTOCK

Accessories

Black Watch

$72

LOWSTOCK

Fitness

Blue Band

$79

INSTOCK

Clothing

Blue T-Shirt

$29

INSTOCK

Accessories

Bracelet

$15

OUTOFSTOCK

Accessories

Brown Purse

$120

LOWSTOCK

Accessories

Chakra Bracelet

$32

INSTOCK

Accessories

Galaxy Earrings

$34

LOWSTOCK

Electronics

Game Controller

$99

INSTOCK

Electronics

Gaming Set

$299

OUTOFSTOCK

Accessories

Gold Phone Case

$24

INSTOCK

Electronics

Green Earbuds

$89


<p-dataView #dv [value]="products" [layout]="layout">
    <ng-template pTemplate="header">
        <div class="flex justify-content-end">
            <p-dataViewLayoutOptions [layout]="layout" />
        </div>
    </ng-template>
    <ng-template pTemplate="list" let-products>
        <div class="grid grid-nogutter">
            <div class="col-12" *ngFor="let item of products; let first = first" class="col-12">
                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" [ngClass]="{ 'border-top-1 surface-border': !first }">
                    <div class="md:w-10rem relative">
                        <img class="block xl:block mx-auto border-round w-full" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + item.image" [alt]="item.name" />
                        <p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)" class="absolute" [style.left.px]="4" [style.top.px]="4" />
                    </div>
                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
                            <div>
                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
                            </div>
                            <div class="surface-100 p-1" style="border-radius: 30px">
                                <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
                                    <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
                                    <i class="pi pi-star-fill text-yellow-500"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-column md:align-items-end gap-5">
                            <span class="text-xl font-semibold text-900">{{ '$' + item.price }}</span>
                            <div class="flex flex-row-reverse md:flex-row gap-2">
                                <p-button icon="pi pi-heart" [outlined]="true" />
                                <p-button icon="pi pi-shopping-cart" class="flex-auto md:flex-initial white-space-nowrap" label="Buy Now" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
    <ng-template let-product pTemplate="grid" let-products>
        <div class="grid grid-nogutter">
            <div class="col-12 sm:col-6 md:col-4 xl:col-6 p-2" *ngFor="let product of products">
                <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
                    <div class="surface-50 flex justify-content-center border-round p-3">
                        <div class="relative mx-auto">
                            <img class="border-round w-full" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" style="max-width: 300px;" />
                            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product)" class="absolute" [style.left.px]="4" [style.top.px]="4" />
                        </div>
                    </div>
                    <div class="pt-4">
                        <div class="flex flex-row justify-content-between align-items-start gap-2">
                            <div>
                                <span class="font-medium text-secondary text-sm">{{ product.category }}</span>
                                <div class="text-lg font-medium text-900 mt-1">{{ product.name }}</div>
                            </div>
                            <div class="surface-100 p-1" style="border-radius: 30px">
                                <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
                                    <span class="text-900 font-medium text-sm">{{ product.rating }}</span>
                                    <i class="pi pi-star-fill text-yellow-500"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-column gap-4 mt-4">
                            <span class="text-2xl font-semibold">{{ '$' + product.price }}</span>
                            <div class="flex gap-2">
                                <p-button icon="pi pi-shopping-cart" class="flex-auto md:flex-initial white-space-nowrap" label="Buy Now" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'" />
                                <p-button icon="pi pi-heart" [outlined]="true" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-dataView>

Loading #

While data is being loaded. Skeleton component may be used to indicate the busy state.


<p-dataView #dv [value]="products" [layout]="layout">
    <ng-template pTemplate="header">
        <div class="flex justify-content-end">
            <p-dataViewLayoutOptions [layout]="layout" />
        </div>
    </ng-template>
    <ng-template pTemplate="list" let-products>
        <div class="grid grid-nogutter">
            <div class="col-12" *ngFor="let i of counterArray(6); let first = first" class="col-12">
                <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" [ngClass]="{ 'border-top-1 surface-border': !first }">
                    <p-skeleton styleClass="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
                    <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                        <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                            <p-skeleton styleClass="w-8rem border-round h-2rem" />
                            <p-skeleton styleClass="w-6rem border-round h-1rem" />
                            <div class="flex align-items-center gap-3">
                                <p-skeleton styleClass="w-6rem border-round h-1rem" />
                                <p-skeleton styleClass="w-3rem border-round h-1rem" />
                            </div>
                        </div>
                        <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                            <p-skeleton styleClass="w-4rem border-round h-2rem" />
                            <p-skeleton shape="circle" styleClass="w-3rem h-3rem" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
    <ng-template let-product pTemplate="grid" let-products>
        <div class="grid grid-nogutter">
            <div class="col-12 sm:col-6 md:col-4 xl:col-6 p-2" *ngFor="let i of counterArray(6)">
                <div class="p-4 border-1 surface-border surface-card border-round">
                    <div class="flex flex-wrap align-items-center justify-content-between gap-2">
                        <p-skeleton styleClass="w-6rem border-round h-2rem" />
                        <p-skeleton styleClass="w-3rem border-round h-1rem" />
                    </div>
                    <div class="flex flex-column align-items-center gap-3 py-5">
                        <p-skeleton styleClass="w-9 border-round h-10rem" />
                        <p-skeleton styleClass="w-8rem border-round h-2rem" />
                        <p-skeleton styleClass="w-6rem border-round h-1rem" />
                    </div>
                    <div class="flex align-items-center justify-content-between">
                        <p-skeleton styleClass="w-4rem border-round h-2rem" />
                        <p-skeleton shape="circle" styleClass="w-3rem h-3rem" />
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-dataView>

Style #

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

Name	Element
p-dataview	Container element.
p-dataview-list	Container element in list layout.
p-dataview-grid	Container element in grid layout.
p-dataview-header	Header section.
p-dataview-footer	Footer section.
p-dataview-content	Container of items.
p-dataview-emptymessage	Empty message element.

Accessibility #

Screen Reader

The container element that wraps the layout options buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Values to describe the buttons are derived from the aria.listView and aria.gridView properties of the locale API respectively.

Refer to paginator accessibility documentation for the paginator of the component.

Keyboard Support

Key	Function
tab	Moves focus to the buttons.
space	Toggles the checked state of a button.

DataView API

API defines helper props, events and others for the PrimeNG DataView module.

DataView #

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

Properties #

Defines the input properties of the component.

name	type	default	description
paginator	boolean	false	When specified as true, enables the pagination.
rows	number	null	Number of rows to display per page.
totalRecords	number	null	Number of total records, defaults to length of value when not defined.
pageLinks	number	5	Number of page links to display in paginator.
rowsPerPageOptions	any[] \| number[]	null	Array of integer/object values to display inside rows per page dropdown of paginator
paginatorPosition	"both" \| "top" \| "bottom"	bottom	Position of the paginator.
paginatorStyleClass	string	null	Custom style class for paginator
alwaysShowPaginator	boolean	true	Whether to show it even there is only one page.
paginatorDropdownAppendTo	any	null	Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
paginatorDropdownScrollHeight	string	200px	Paginator dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
currentPageReportTemplate	string	{currentPage} of {totalPages}	Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
showCurrentPageReport	boolean	false	Whether to display current page report.
showJumpToPageDropdown	boolean	false	Whether to display a dropdown to navigate to any page.
showFirstLastIcon	boolean	true	When enabled, icons are displayed on paginator to go first and last page.
showPageLinks	boolean	true	Whether to show page links.
lazy	boolean	false	Defines if data is loaded and interacted with in lazy manner.
lazyLoadOnInit	boolean	true	Whether to call lazy loading on initialization.
emptyMessage	string	null	Text to display when there is no data. Defaults to global value in i18n translation configuration.
style	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
gridStyleClass	string	null	Style class of the grid.
trackBy	Function	...	Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
filterBy	string	null	Comma separated list of fields in the object graph to search against.
filterLocale	string	null	Locale to use in filtering. The default locale is the host environment's current locale.
loading	boolean	false	Displays a loader to indicate data load is in progress.
loadingIcon	string	null	The icon to show while indicating data load is in progress.
first	number	0	Index of the first row to be displayed.
sortField	string	null	Property name of data to use in sorting by default.
sortOrder	number	null	Order to sort the data by default.
value	any[]	null	An array of objects to display.
layout	"grid" \| "list"	null	Defines the layout mode.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onLazyLoad	event : DataViewLazyLoadEvent	Callback to invoke when paging, sorting or filtering happens in lazy mode.
onPage	event : DataViewPageEvent	Callback to invoke when pagination occurs.
onSort	event : DataViewSortEvent	Callback to invoke when sorting occurs.
onChangeLayout	event : DataViewLayoutChangeEvent	Callback to invoke when changing layout.

Templates #

Defines the templates used by the component.

name	parameters	description
listItem	context : { $implicit: any, // Row data. rowIndex: number, // Row index. }	Custom list item template.
gridItem	context : { $implicit: any, // Row data. rowIndex: number, // Row index. }	Custom grid item template.
paginatorleft	context : { $implicit: DataViewPaginatorState, // State of the paginator. }	Custom paginator left template.
paginatorright	context : { $implicit: DataViewPaginatorState, // State of the paginator. }	Custom paginator right template.
paginatordropdownitem	context : { $implicit: any, // Dropdown item instance. }	Custom paginator dropdown template.
empty		Custom empty message template.
header		Custom header template.
footer		Custom footer template.
loadingicon		Custom loading icon template.
listicon		Custom list icon template.
gridicon		Custom grid icon template.

Events #

Defines the custom events used by the component's emitters.

DataViewLazyLoadEvent #

Custom lazy load event.

name	type	description
first	number	Index of the first element.
rows	number	Row count.
sortField	string	Property name of data to use in sorting by default.
sortOrder	number	Order to sort the data by default.

DataViewPageEvent #

Custom page event.

name	type	description
first	number	Index of the first element.
rows	number	Row count.

DataViewSortEvent #

Custom sort event.

name	type	description
sortField	string	Sort field.
sortOrder	number	Sort order.

DataViewLayoutChangeEvent #

Custom layout change.

name	type	description
layout	"grid" \| "list"	Layout of the component.

Interfaces #

Defines the custom interfaces used by the module.

DataViewPaginatorState #

State of the paginator.

name	type	description
page	number	Current page.
first	number	First item in the current page.
rows	number	Row count.
pageCount	number	Page count.