DataView Grid Template

UI Components for Vue
Post Reply
Posts: 1
Joined: 27 Jul 2020, 01:40

27 Jul 2020, 01:44

I'm trying to implement a view with the data view.

The List view works as expected. But the Grid view arranges all items on below the other instead of side by side like in the example.

What am I doing wrong the grid template?

Here my code:

Code: Select all

  <pv-dataview :value="exercises" :layout="layout" :paginator="true" :rows="pageSize" :totalRecords="totalCount"
                   :lazy="true" @page="onPage($event)">
        <template #header>
          <div class="p-col-6" style="text-align: right">
            <pv-dataviewlayoutoptions v-model="layout"/>
        <template #empty>Keine Einträge gefunden.</template>

        <template #list="item">
            :prefered-preview-media=" "

        <template #grid="slotProps">
          <div class="p-col-12 p-md-4">
            <div class="product-grid-item card">
              <div class="product-grid-item-top">
                <pv-panel :header="" style="text-align: center;width: 200px">
                  <pv-button icon="pi pi-search"></pv-button>

Posts: 18355
Joined: 05 Jan 2009, 00:21
Location: Cybertron

04 Aug 2020, 15:06

Code seems to be fine, do you have a screenshot or a stackblitz for review?

Posts: 1
Joined: 16 Sep 2020, 19:27

16 Sep 2020, 22:22

I first asked the same question. Apparently, the anwser in my case was also in the documentation: you need to add PrimeFlex as well. See ... /primeflex.

I completely overlooked that statement in the documentation: my mistake. I hope this helps future newbies that run into this problem ;) .

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest