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: 18331
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?

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest