DataView
DataView displays data in grid or list layout with pagination and sorting features.
Import #
import { DataViewModule, DataViewLayoutOptions } from 'primeng/dataview';
PrimeFlex #
DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.
npm install primeflex
Basic #
DataView requires a value to display along with an pTemplate that receives an object in the collection to return content. The root element should have the PrimeFlex Grid classes e.g. col-12 to define how items are displayed.
Bamboo Watch
AccessoriesINSTOCK
$65
Black Watch
AccessoriesINSTOCK
$72
Blue Band
FitnessLOWSTOCK
$79
Blue T-Shirt
ClothingINSTOCK
$29
Bracelet
AccessoriesINSTOCK
$15
<p-dataView #dv [value]="products">
<ng-template let-product pTemplate="listItem">
<div class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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>
</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.
Bamboo Watch
AccessoriesINSTOCK
$65
Black Watch
AccessoriesINSTOCK
$72
Blue Band
FitnessLOWSTOCK
$79
Blue T-Shirt
ClothingINSTOCK
$29
Bracelet
AccessoriesINSTOCK
$15
<p-dataView #dv [value]="products" [rows]="5" [paginator]="true">
<ng-template let-product pTemplate="listItem">
<div class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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>
</ng-template>
</p-dataView>
Sorting #
Built-in sorting is controlled by bindings sortField and sortField properties from a custom UI.
Sort By Price
Bamboo Watch
AccessoriesINSTOCK
$65
Black Watch
AccessoriesINSTOCK
$72
Blue Band
FitnessLOWSTOCK
$79
Blue T-Shirt
ClothingINSTOCK
$29
Bracelet
AccessoriesINSTOCK
$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"></p-dropdown>
</div>
</ng-template>
<ng-template let-product pTemplate="listItem">
<div class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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>
</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. As in list layout, the grid layout also requires PrimeFlex Grid classes to define how the grid is displayed per screen sizes.
Bamboo Watch
AccessoriesINSTOCK
$65
Black Watch
AccessoriesINSTOCK
$72
Blue Band
FitnessLOWSTOCK
$79
Blue T-Shirt
ClothingINSTOCK
$29
Bracelet
AccessoriesINSTOCK
$15
Brown Purse
AccessoriesOUTOFSTOCK
$120
Chakra Bracelet
AccessoriesLOWSTOCK
$32
Galaxy Earrings
AccessoriesINSTOCK
$34
Game Controller
ElectronicsLOWSTOCK
$99
Gaming Set
ElectronicsINSTOCK
$299
Gold Phone Case
AccessoriesOUTOFSTOCK
$24
Green Earbuds
ElectronicsINSTOCK
$89
<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="listItem">
<div class="col-12">
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
<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>
</ng-template>
<ng-template let-product pTemplate="gridItem">
<div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
<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>
</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 guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.
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.
Properties #
| Name | Type | Default | Description |
|---|---|---|---|
| value | array | null | An array of objects to display. |
| layout | string | list | Layout of the items, valid values are "list" and "grid". |
| 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 | array | null | Array of integer/object values to display inside rows per page dropdown of paginator |
| paginatorPosition | string | bottom | Position of the paginator, options are "top","bottom" or "both". |
| alwaysShowPaginator | boolean | true | Whether to show it even there is only one page. |
| showFirstLastIcon | boolean | true | When enabled, icons are displayed on paginator to go first and last 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. |
| showPageLinks | boolean | true | Whether to show page links. |
| lazy | boolean | false | Defines if data is loaded and interacted with in lazy manner. |
| emptyMessage | string | No records found. | Text to display when there is no data. Defaults to global value in i18n translation configuration. |
| style | string | null | Inline style of the component. |
| styleClass | string | null | Style class of the component. |
| gridStyleClass | string | null | Style class of the grid. |
| trackBy | Function | null | 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 | undefined | 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. |
Events #
| Name | Parameters | Description |
|---|---|---|
| onLazyLoad | event.first = First row offset event.rows = Number of rows per page | Callback to invoke when paging, sorting or filtering happens in lazy mode. |
| onPage | event.first: Index of first record in page event.rows: Number of rows on the page | Callback to invoke when pagination occurs. |
| onSort | event.sortField: Name of the sort field. event.sortOrder: Order of the sort. | Callback to invoke when sorting occurs. |
| onChangeLayout | event.layout: New layout | Callback to invoke when changing layout. |
Templates #
| Name | Parameters |
|---|---|
| header | - |
| paginatorLeft | - |
| paginatorRight | - |
| gridItem | $implicit: Data of the grid index: Index of the grid |
| listItemTemplate | $implicit: Data of the row index: Index of the row |
| empty | - |
| footer | - |
| listicon | - |
| gridicon | - |
| loadingicon | - |