DataView

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

Import # 


import DataView from 'primevue/dataview';
import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions'   // optional

PrimeFlex #

DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.


npm install primeflex



import 'primeflex/primeflex.css';

Basic #

DataView requires a value to display along with a list slot 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">
    <template #list="slotProps">
        <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/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.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">{{ slotProps.data.name }}</div>
                        <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></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">{{ slotProps.data.category }}</span>
                            </span>
                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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">${{ slotProps.data.price }}</span>
                        <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                    </div>
                </div>
            </div>
        </div>
    </template>
</DataView>

Pagination

Pagination is enabled with the paginator and rows properties. Refer to the Paginator for more information about customizing the paginator.



<DataView :value="products" paginator :rows="5">
    <template #list="slotProps">
        <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/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.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">{{ slotProps.data.name }}</div>
                        <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></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">{{ slotProps.data.category }}</span>
                            </span>
                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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">${{ slotProps.data.price }}</span>
                        <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                    </div>
                </div>
            </div>
        </div>
    </template>
</DataView>

Sorting #

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



<DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
    <template #header>
        <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
    </template>
    <template #list="slotProps">
        <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/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.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">{{ slotProps.data.name }}</div>
                        <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></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">{{ slotProps.data.category }}</span>
                            </span>
                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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">${{ slotProps.data.price }}</span>
                        <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                    </div>
                </div>
            </div>
        </div>
    </template>
</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. 



<DataView :value="products" :layout="layout">
    <template #header>
        <div class="flex justify-content-end">
            <DataViewLayoutOptions v-model="layout" />
        </div>
    </template>

    <template #list="slotProps">
        <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/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.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">{{ slotProps.data.name }}</div>
                        <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></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">{{ slotProps.data.category }}</span>
                            </span>
                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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">${{ slotProps.data.price }}</span>
                        <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <template #grid="slotProps">
        <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">
                    <div class="flex align-items-center gap-2">
                        <i class="pi pi-tag"></i>
                        <span class="font-semibold">{{ slotProps.data.category }}</span>
                    </div>
                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></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/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.name" />
                    <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
                    <Rating value="{product.rating}" readonly :cancel="false"></Rating>
                </div>
                <div class="flex align-items-center justify-content-between">
                    <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
                    <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                </div>
            </div>
        </div>
    </template>
</DataView>

Loading #

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



<DataView :value="products" :layout="layout">
    <template #header>
        <div class="flex justify-content-end">
            <DataViewLayoutOptions v-model="layout" />
        </div>
    </template>

    <template #list>
        <div class="col-12">
            <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
                <Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" />
                <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">
                        <Skeleton class="w-8rem border-round h-2rem" />
                        <Skeleton class="w-6rem border-round h-1rem" />
                        <div class="flex align-items-center gap-3">
                            <Skeleton class="w-6rem border-round h-1rem" />
                            <Skeleton class="w-3rem border-round h-1rem" />
                        </div>
                    </div>
                    <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                        <Skeleton class="w-4rem border-round h-2rem" />
                        <Skeleton shape="circle" class="w-3rem h-3rem" />
                    </div>
                </div>
            </div>
        </div>
    </template>

    <template #grid>
        <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">
                    <Skeleton class="w-6rem border-round h-2rem" />
                    <Skeleton class="w-3rem border-round h-1rem" />
                </div>
                <div class="flex flex-column align-items-center gap-3 py-5">
                    <Skeleton class="w-9 shadow-2 border-round h-10rem" />
                    <Skeleton class="w-8rem border-round h-2rem" />
                    <Skeleton class="w-6rem border-round h-1rem" />
                </div>
                <div class="flex align-items-center justify-content-between">
                    <Skeleton class="w-4rem border-round h-2rem" />
                    <Skeleton shape="circle" class="w-3rem h-3rem" />
                </div>
            </div>
        </div>
    </template>
</DataView>

Style #

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-dataviewContainer element.
p-dataview-listContainer element in list layout.
p-dataview-gridContainer element in grid layout.
p-dataview-headerHeader section.
p-dataview-footerFooter section.
p-dataview-contentContainer of items.
p-dataview-emptymessageEmpty message element.

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

KeyFunction
tabMoves focus to the buttons.
spaceToggles the checked state of a button.
PrimeVue 3.29.2 on Vue 3 by PrimeTek