Source: https://primereact.org/dataview/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• FEATURES

• API

• THEMING

• PASS THROUGH

DataView

DataView displays data in grid or list layout with pagination and sorting features.

Import#

---

import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
         

Copy

Basic#

---

DataView requires a value to display along with an listTemplate that receives an object in the collection to return content.

Bamboo Watch

AccessoriesINSTOCK

$65 

Black Watch

AccessoriesINSTOCK

$72 

Blue Band

FitnessLOWSTOCK

$79 

Blue T-Shirt

ClothingINSTOCK

$29 

Bracelet

AccessoriesINSTOCK

$15 

<DataView value={products} listTemplate={listTemplate} />
         

Copy

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 

12345

<DataView value={products} itemTemplate={listTemplate} paginator rows={5} />
         

Copy

Sorting#

---

Built-in sorting is controlled by bindings sortField and sortField properties from a custom UI.

Sort By Price

Sort By Price

Bamboo Watch

AccessoriesINSTOCK

$65 

Black Watch

AccessoriesINSTOCK

$72 

Blue Band

FitnessLOWSTOCK

$79 

Blue T-Shirt

ClothingINSTOCK

$29 

Bracelet

AccessoriesINSTOCK

$15 

<DataView value={products} listTemplate={listTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
         

Copy

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.

Accessories

INSTOCK

Bamboo Watch

$65 

Accessories

INSTOCK

Black Watch

$72 

Fitness

LOWSTOCK

Blue Band

$79 

Clothing

INSTOCK

Blue T-Shirt

$29 

Accessories

INSTOCK

Bracelet

$15 

Accessories

OUTOFSTOCK

Brown Purse

$120 

Accessories

LOWSTOCK

Chakra Bracelet

$32 

Accessories

INSTOCK

Galaxy Earrings

$34 

Electronics

LOWSTOCK

Game Controller

$99 

Electronics

INSTOCK

Gaming Set

$299 

Accessories

OUTOFSTOCK

Gold Phone Case

$24 

Electronics

INSTOCK

Green Earbuds

$89 

<DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
         

Copy

Loading#

---

While data is being loaded. Skeleton component may be used to indicate the busy state.

<DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
         

Copy

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. |

• Import

• Basic

• Pagination

• Sorting

• Layout

• Loading

• Accessibility

PrimeReact 10.9.7 by PrimeTek