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.

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	null	Custom empty message template.
header	null	Custom header template.
footer	null	Custom footer template.
loadingicon	null	Custom loading icon template.
listicon	null	Custom list icon template.
gridicon	null	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.

DataView

Import #

Basic #

Pagination #

Sorting #

Layout #

Style #

Accessibility #

Screen Reader

Keyboard Support