DataView displays data in grid or list layout with pagination and sorting features.
import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.
npm install primeflex
import 'primeflex/primeflex.css';
DataView requires a value to display along with an itemTemplate 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.
<DataView value={products} itemTemplate={itemTemplate} />
Pagination is enabled with the paginator and rows properties. Refer to the Paginator for more information about customizing the paginator.
<DataView value={products} itemTemplate={itemTemplate} paginator rows={5} />
Built-in sorting is controlled by bindings sortField and sortField properties from a custom UI.
<DataView value={products} itemTemplate={itemTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
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.
<DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
While data is being loaded. Skeleton component may be used to indicate the busy state.
<DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
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. |
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. |