DataView displays data in grid or list layout with pagination and sorting features.
import { DataViewModule } from 'primeng/dataview';
DataView requires a value to display along with a list template that receives an object in the collection to return content.
<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">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" [ngClass]="{ 'border-top-1 surface-border': !first }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + item.image" [alt]="item.name" />
<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">
<div class="text-2xl font-bold text-900">{{ item.name }}</div>
<p-rating [(ngModel)]="item.rating" [readonly]="true" [cancel]="false"></p-rating>
<div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ item.category }}</span>
</span>
<p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)"></p-tag>
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">{{ '$' + item.price }}</span>
<button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'"></button>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</p-dataView>
Pagination is enabled with the paginator and rows properties. Refer to the Paginator for more information about customizing the paginator.
<p-dataView #dv [value]="products" [rows]="5" [paginator]="true">
<ng-template let-products pTemplate="list">
<div class="grid grid-nogutter">
<div class="col-12" *ngFor="let item of products; let first = first">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" [ngClass]="{ 'border-top-1 surface-border': !first }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + item.image" [alt]="item.name" />
<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">
<div class="text-2xl font-bold text-900">{{ item.name }}</div>
<p-rating [(ngModel)]="item.rating" [readonly]="true" [cancel]="false"></p-rating>
<div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ item.category }}</span>
</span>
<p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)"></p-tag>
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">{{ '$' + item.price }}</span>
<button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'"></button>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</p-dataView>
Built-in sorting is controlled by bindings sortField and sortField properties from a custom UI.
<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"></p-dropdown>
</div>
</ng-template>
<ng-template let-products pTemplate="list">
<div class="grid grid-nogutter">
<div class="col-12" *ngFor="let item of products; let first = first">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" [ngClass]="{ 'border-top-1 surface-border': !first }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + item.image" [alt]="item.name" />
<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">
<div class="text-2xl font-bold text-900">{{ item.name }}</div>
<p-rating [(ngModel)]="item.rating" [readonly]="true" [cancel]="false"></p-rating>
<div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ item.category }}</span>
</span>
<p-tag [value]="item.inventoryStatus" [severity]="getSeverity(item)"></p-tag>
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">{{ '$' + item.price }}</span>
<button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'"></button>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</p-dataView>
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.
<p-dataView #dv [value]="products" [layout]="layout">
<ng-template pTemplate="header">
<div class="flex justify-content-end">
<p-dataViewLayoutOptions [layout]="layout"></p-dataViewLayoutOptions>
</div>
</ng-template>
<ng-template let-product pTemplate="list" let-products>
<div class="grid grid-nogutter">
<div class="col-12" *ngFor="let product of products; let first = first">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" [ngClass]="{ 'border-top-1 surface-border': !first }">
<img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" />
<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">
<div class="text-2xl font-bold text-900">{{ product.name }}</div>
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
<div class="flex align-items-center gap-3">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ product.category }}</span>
</span>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product)"></p-tag>
</div>
</div>
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">{{ '$' + product.price }}</span>
<button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></button>
</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 lg:col-12 xl:col-4 p-2" *ngFor="let product of products">
<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">
<span class="flex align-items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ product.category }}</span>
</span>
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product)"></p-tag>
</div>
<div class="flex flex-column align-items-center gap-3 py-5">
<img class="w-9 shadow-2 border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" />
<div class="text-2xl font-bold">{{ product.name }}</div>
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
</div>
<div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">{{ '$' + product.price }}</span>
<button pButton icon="pi pi-shopping-cart" class="p-button-rounded" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></button>
</div>
</div>
</div>
</div>
</ng-template>
</p-dataView>
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. |
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.
Key | Function |
---|---|
tab | Moves focus to the buttons. |
space | Toggles the checked state of a button. |
API defines helper props, events and others for the PrimeNG DataView module.
DataView displays data in grid or list layout with pagination and sorting features.
Defines the input properties of the component.
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. |
Defines the templates used by the component.
Defines the custom events used by the component's emitters.
Custom lazy load event.
Custom page event.
Custom sort event.
Custom layout change.
Defines the custom interfaces used by the module.
State of the paginator.