DataView
DataView displays data in grid grid-cols-12 gap-4 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.
Pagination #
Pagination is enabled with the paginator and rows properties. Refer to the Paginator for more information about customizing the paginator.
Sorting #
Built-in sorting is controlled by bindings sortField and sortOrder properties from a custom UI.
Layout #
DataView supports list and grid display modes defined with the layout property. The grid mode is not built-in for flexibility purposes and requires a library with CSS grid features like Tailwind.
Loading #
While data is being loaded. Skeleton component may be used to indicate the busy state.
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. |
