From 2026bb75e46e82f5058deb7d5674e678030efe9f Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 15 Nov 2023 09:51:35 +0000
Subject: [PATCH] Fixed #4818 - Remove primeflex dependency from DataView

---
 components/lib/dataview/DataView.d.ts         |  28 +-
 components/lib/dataview/DataView.vue          |  21 +-
 .../lib/dataview/style/DataViewStyle.js       |   2 -
 doc/dataview/BasicDoc.vue                     | 150 ++++-----
 doc/dataview/LayoutDoc.vue                    | 284 +++++++++---------
 doc/dataview/LoadingDoc.vue                   | 234 ++++++++-------
 doc/dataview/PaginationDoc.vue                | 146 ++++-----
 doc/dataview/PrimeFlexDoc.vue                 |  24 --
 doc/dataview/SortingDoc.vue                   | 146 ++++-----
 doc/dataview/pt/PTDoc.vue                     | 282 +++++++++--------
 doc/dataview/theming/TailwindDoc.vue          |  28 +-
 pages/dataview/index.vue                      |   6 -
 12 files changed, 690 insertions(+), 661 deletions(-)
 delete mode 100644 doc/dataview/PrimeFlexDoc.vue

diff --git a/components/lib/dataview/DataView.d.ts b/components/lib/dataview/DataView.d.ts
index 1b79e4474..64afb3291 100755
--- a/components/lib/dataview/DataView.d.ts
+++ b/components/lib/dataview/DataView.d.ts
@@ -81,14 +81,6 @@ export interface DataViewPassThroughOptions {
      * Used to pass attributes to the content's DOM element.
      */
     content?: DataViewPassThroughOptionType;
-    /**
-     * Used to pass attributes to the grid's DOM element.
-     */
-    grid?: DataViewPassThroughOptionType;
-    /**
-     * Used to pass attributes to the column's DOM element.
-     */
-    column?: DataViewPassThroughOptionType;
     /**
      * Used to pass attributes to the empty message's DOM element.
      */
@@ -253,8 +245,14 @@ export interface DataViewSlots {
     footer(): VNode[];
     /**
      * Custom empty template.
+     * @param {Object} scope - empty slot's params.
      */
-    empty(): VNode[];
+    empty(scope: {
+        /**
+         * Layout of the items.
+         */
+        layout?: string | undefined;
+    }): VNode[];
     /**
      * Custom paginator start template.
      */
@@ -271,11 +269,7 @@ export interface DataViewSlots {
         /**
          * Value of the component
          */
-        data: any;
-        /**
-         * Index of the grid
-         */
-        index: number;
+        items: any;
     }): VNode[];
     /**
      * Custom list template.
@@ -285,11 +279,7 @@ export interface DataViewSlots {
         /**
          * Value of the component
          */
-        data: any;
-        /**
-         * Index of the grid
-         */
-        index: number;
+        items: any;
     }): VNode[];
 }
 
diff --git a/components/lib/dataview/DataView.vue b/components/lib/dataview/DataView.vue
index b1e14fc3e..3d61d5b2f 100755
--- a/components/lib/dataview/DataView.vue
+++ b/components/lib/dataview/DataView.vue
@@ -26,16 +26,14 @@
             </template>
         </DVPaginator>
         <div :class="cx('content')" v-bind="ptm('content')">
-            <div :class="cx('grid')" v-bind="ptm('grid')">
-                <template v-for="(item, index) of items" :key="getKey(item, index)">
-                    <slot v-if="$slots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
-                    <slot v-if="$slots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
-                </template>
-                <div v-if="empty" :class="cx('column')" v-bind="ptm('column')">
-                    <div :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
-                        <slot name="empty"></slot>
-                    </div>
-                </div>
+            <template v-if="!empty">
+                <slot v-if="$slots.list && layout === 'list'" name="list" :items="items"></slot>
+                <slot v-if="$slots.grid && layout === 'grid'" name="grid" :items="items"></slot>
+            </template>
+            <div v-else :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
+                <slot name="empty" :layout="layout">
+                    {{ emptyMessageText }}
+                </slot>
             </div>
         </div>
         <DVPaginator
@@ -137,6 +135,9 @@ export default {
         empty() {
             return !this.value || this.value.length === 0;
         },
+        emptyMessageText() {
+            return this.$primevue.config?.locale?.emptyMessage || '';
+        },
         paginatorTop() {
             return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both');
         },
diff --git a/components/lib/dataview/style/DataViewStyle.js b/components/lib/dataview/style/DataViewStyle.js
index 9e843b398..f00040fc1 100644
--- a/components/lib/dataview/style/DataViewStyle.js
+++ b/components/lib/dataview/style/DataViewStyle.js
@@ -11,8 +11,6 @@ const classes = {
     header: 'p-dataview-header',
     paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
     content: 'p-dataview-content',
-    grid: 'p-grid p-nogutter grid grid-nogutter',
-    column: 'p-col col',
     emptyMessage: 'p-dataview-emptymessage',
     footer: 'p-dataview-footer'
 };
diff --git a/doc/dataview/BasicDoc.vue b/doc/dataview/BasicDoc.vue
index 3e4450fd1..c1e9efd1d 100644
--- a/doc/dataview/BasicDoc.vue
+++ b/doc/dataview/BasicDoc.vue
@@ -1,30 +1,30 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            DataView requires a <i>value</i> to display along with a <i>list</i> 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.
-        </p>
+        <p>DataView requires a <i>value</i> to display along with a <i>list</i> slot that receives an object in the collection to return content.</p>
     </DocSectionText>
     <div class="card">
         <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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/${item.image}`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -46,24 +46,26 @@ export default {
                 basic: `
 <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 class="grid grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                            <Rating :modelValue="item.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">{{ item.category }}</span>
+                                </span>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                         </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>
@@ -76,24 +78,26 @@ export default {
     <div class="card">
         <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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -140,24 +144,26 @@ export default {
     <div class="card">
         <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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -194,7 +200,7 @@ const getSeverity = (product) => {
 <\/script>
 `,
                 data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
index 364b99282..0ee368813 100644
--- a/doc/dataview/LayoutDoc.vue
+++ b/doc/dataview/LayoutDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property. The helper <i>DataViewLayoutOptions</i> 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 <i>list</i> layout, the <i>grid</i> layout also requires PrimeFlex Grid classes to define how the grid is displayed per screen sizes.
+            use your own UI to switch modes as well.
         </p>
     </DocSectionText>
     <div class="card">
@@ -14,24 +14,26 @@
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/${item.image}`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -39,23 +41,25 @@
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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">{{ item.category }}</span>
+                                </div>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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/${item.image}`" :alt="item.name" />
+                                <div class="text-2xl font-bold">{{ item.name }}</div>
+                                <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
+                            </div>
+                            <div class="flex align-items-center justify-content-between">
+                                <span class="text-2xl font-semibold">${{ item.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </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 :modelValue="slotProps.data.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>
@@ -83,24 +87,26 @@ export default {
     </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 class="grid grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                            <Rating :modelValue="item.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">{{ item.category }}</span>
+                                </span>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                         </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>
@@ -108,23 +114,25 @@ export default {
     </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 class="grid grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" 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">{{ item.category }}</span>
+                        </div>
+                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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/\${item.image}\`" :alt="item.name" />
+                        <div class="text-2xl font-bold">{{ item.name }}</div>
+                        <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
+                    </div>
+                    <div class="flex align-items-center justify-content-between">
+                        <span class="text-2xl font-semibold">\${{ item.price }}</span>
+                        <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                     </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 :modelValue="slotProps.data.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>
@@ -142,24 +150,26 @@ export default {
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -167,23 +177,25 @@ export default {
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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">{{ item.category }}</span>
+                                </div>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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/\${item.image}\`" :alt="item.name" />
+                                <div class="text-2xl font-bold">{{ item.name }}</div>
+                                <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
+                            </div>
+                            <div class="flex align-items-center justify-content-between">
+                                <span class="text-2xl font-semibold">\${{ item.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </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 :modelValue="slotProps.data.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>
@@ -236,24 +248,26 @@ export default {
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -261,23 +275,25 @@ export default {
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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">{{ item.category }}</span>
+                                </div>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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/\${item.image}\`" :alt="item.name" />
+                                <div class="text-2xl font-bold">{{ item.name }}</div>
+                                <Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
+                            </div>
+                            <div class="flex align-items-center justify-content-between">
+                                <span class="text-2xl font-semibold">\${{ item.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </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 :modelValue="slotProps.data.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>
@@ -316,7 +332,7 @@ const getSeverity = (product) => {
 <\/script>
 `,
                 data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
diff --git a/doc/dataview/LoadingDoc.vue b/doc/dataview/LoadingDoc.vue
index cf4fd600e..9f59698f2 100644
--- a/doc/dataview/LoadingDoc.vue
+++ b/doc/dataview/LoadingDoc.vue
@@ -11,21 +11,23 @@
             </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">
+                <div class="grid grid-nogutter">
+                    <div v-for="i in 6" :key="i" 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" />
-                                    <Skeleton class="w-3rem 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 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>
@@ -33,20 +35,22 @@
             </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 class="grid grid-nogutter">
+                    <div v-for="i in 6" :key="i" 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>
                 </div>
@@ -74,21 +78,23 @@ export default {
     </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">
+        <div class="grid grid-nogutter">
+            <div v-for="i in 6" :key="i" 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" />
-                            <Skeleton class="w-3rem 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 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>
@@ -96,20 +102,22 @@ export default {
     </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 class="grid grid-nogutter">
+            <div v-for="i in 6" :key="i" 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>
         </div>
@@ -127,21 +135,23 @@ export default {
             </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">
+                <div class="grid grid-nogutter">
+                    <div v-for="i in 6" :key="i" 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" />
-                                    <Skeleton class="w-3rem 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 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>
@@ -149,20 +159,22 @@ export default {
             </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 class="grid grid-nogutter">
+                    <div v-for="i in 6" :key="i" 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>
                 </div>
@@ -215,21 +227,23 @@ export default {
             </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">
+                <div class="grid grid-nogutter">
+                    <div v-for="i in 6" :key="i" 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" />
-                                    <Skeleton class="w-3rem 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 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>
@@ -237,20 +251,22 @@ export default {
             </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 class="grid grid-nogutter">
+                    <div v-for="i in 6" :key="i" 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>
                 </div>
@@ -289,7 +305,7 @@ const getSeverity = (product) => {
 <\/script>
 `,
                 data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
diff --git a/doc/dataview/PaginationDoc.vue b/doc/dataview/PaginationDoc.vue
index c51b1c371..28709debe 100644
--- a/doc/dataview/PaginationDoc.vue
+++ b/doc/dataview/PaginationDoc.vue
@@ -5,24 +5,26 @@
     <div class="card">
         <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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/${item.image}`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -44,24 +46,26 @@ export default {
                 basic: `
 <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 class="grid grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                            <Rating :modelValue="item.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">{{ item.category }}</span>
+                                </span>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                         </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>
@@ -74,24 +78,26 @@ export default {
     <div class="card">
         <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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -138,24 +144,26 @@ export default {
     <div class="card">
         <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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -192,7 +200,7 @@ const getSeverity = (product) => {
 <\/script>
 `,
                 data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
diff --git a/doc/dataview/PrimeFlexDoc.vue b/doc/dataview/PrimeFlexDoc.vue
deleted file mode 100644
index e0bd11913..000000000
--- a/doc/dataview/PrimeFlexDoc.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-npm install primeflex
-`
-            },
-            code2: {
-                basic: "\nimport 'primeflex/primeflex.css'\n"
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/dataview/SortingDoc.vue b/doc/dataview/SortingDoc.vue
index f4597ae09..b7910be0f 100644
--- a/doc/dataview/SortingDoc.vue
+++ b/doc/dataview/SortingDoc.vue
@@ -8,24 +8,26 @@
                 <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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/${item.image}`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -57,24 +59,26 @@ export default {
         <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 class="grid grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                            <Rating :modelValue="item.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">{{ item.category }}</span>
+                                </span>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                         </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>
@@ -90,24 +94,26 @@ export default {
                 <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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -178,24 +184,26 @@ export default {
                 <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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -254,7 +262,7 @@ const getSeverity = (product) => {
 <\/script>
 `,
                 data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
diff --git a/doc/dataview/pt/PTDoc.vue b/doc/dataview/pt/PTDoc.vue
index fe23b7462..ab866aac2 100644
--- a/doc/dataview/pt/PTDoc.vue
+++ b/doc/dataview/pt/PTDoc.vue
@@ -21,24 +21,26 @@
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/${item.image}`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -46,23 +48,25 @@
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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">{{ item.category }}</span>
+                                </div>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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/${item.image}`" :alt="item.name" />
+                                <div class="text-2xl font-bold">{{ item.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">${{ item.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </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>
@@ -102,24 +106,26 @@ export default {
     </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 class="grid grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                            <Rating :modelValue="item.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">{{ item.category }}</span>
+                                </span>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                         </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>
@@ -127,23 +133,25 @@ export default {
     </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 class="grid grid-nogutter">
+            <div v-for="(item, index) in slotProps.items" :key="index" 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">{{ item.category }}</span>
+                        </div>
+                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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/\${item.image}\`" :alt="item.name" />
+                        <div class="text-2xl font-bold">{{ item.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">\${{ item.price }}</span>
+                        <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                     </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>
@@ -173,24 +181,26 @@ export default {
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -198,23 +208,25 @@ export default {
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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">{{ item.category }}</span>
+                                </div>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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/\${item.image}\`" :alt="item.name" />
+                                <div class="text-2xl font-bold">{{ item.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">\${{ item.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </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>
@@ -279,24 +291,26 @@ export default {
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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/\${item.image}\`" :alt="item.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">{{ item.name }}</div>
+                                    <Rating :modelValue="item.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">{{ item.category }}</span>
+                                        </span>
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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">\${{ item.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                                 </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>
@@ -304,23 +318,25 @@ export default {
             </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 class="grid grid-nogutter">
+                    <div v-for="(item, index) in slotProps.items" :key="index" 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">{{ item.category }}</span>
+                                </div>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></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/\${item.image}\`" :alt="item.name" />
+                                <div class="text-2xl font-bold">{{ item.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">\${{ item.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </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>
@@ -359,7 +375,7 @@ const getSeverity = (product) => {
 <\/script>
 `,
                 data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
diff --git a/doc/dataview/theming/TailwindDoc.vue b/doc/dataview/theming/TailwindDoc.vue
index 80b9a1aae..ee45e6c98 100644
--- a/doc/dataview/theming/TailwindDoc.vue
+++ b/doc/dataview/theming/TailwindDoc.vue
@@ -62,24 +62,24 @@ export default {
             <template #list="slotProps">
                 <div class="flex-initial shrink-0 w-full">
                     <div class="flex flex-col xl:flex-row xl:items-start p-4 gap-4 bg-white dark:bg-gray-900">
-                        <img class="w-3/4 sm:w-64 xl:w-40 shadow-md block xl:block mx-auto rounded-md " :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                        <img class="w-3/4 sm:w-64 xl:w-40 shadow-md block xl:block mx-auto rounded-md " :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.items.image}\`" :alt="slotProps.items.name" />
                         <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-4">
                             <div class="flex flex-col items-center sm:items-start gap-3">
                                 <div class="text-2xl font-bold text-gray-700 dark:text-white/80">
-                                    {{ slotProps.data.name }}
+                                    {{ slotProps.items.name }}
                                 </div>
-                                <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
+                                <Rating :modelValue="slotProps.items.rating" readonly :cancel="false"></Rating>
                                 <div class="flex items-center gap-3">
                                     <span class="flex items-center gap-2">
                                         <i class="pi pi-tag text-gray-700 dark:text-white/80"></i>
-                                        <span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.data.category }}</span>
+                                        <span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.items.category }}</span>
                                     </span>
-                                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                                    <Tag :value="slotProps.items.inventoryStatus" :severity="getSeverity(slotProps.items)"></Tag>
                                 </div>
                             </div>
                             <div class="flex sm:flex-col items-center sm:align-end gap-3 sm:gap-2">
-                                <span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.items.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.items.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
@@ -92,18 +92,18 @@ export default {
                         <div class="flex flex-wrap items-center justify-between gap-2">
                             <div class="flex items-center gap-2">
                                 <i class="pi pi-tag text-gray-700 dark:text-white/80"></i>
-                                <span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.data.category }}</span>
+                                <span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.items.category }}</span>
                             </div>
-                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                            <Tag :value="slotProps.items.inventoryStatus" :severity="getSeverity(slotProps.items)"></Tag>
                         </div>
                         <div class="flex flex-col items-center gap-3 py-5">
-                            <img class="w-3/4 shadow-md rounded-md" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
-                            <div class="text-2xl font-bold text-gray-700 dark:text-white/80">{{ slotProps.data.name }}</div>
-                            <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
+                            <img class="w-3/4 shadow-md rounded-md" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.items.image}\`" :alt="slotProps.items.name" />
+                            <div class="text-2xl font-bold text-gray-700 dark:text-white/80">{{ slotProps.items.name }}</div>
+                            <Rating :modelValue="slotProps.items.rating" readonly :cancel="false"></Rating>
                         </div>
                         <div class="flex items-center justify-between">
-                            <span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.data.price }}</span>
-                            <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                            <span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.items.price }}</span>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.items.inventoryStatus === 'OUTOFSTOCK'"></Button>
                         </div>
                     </div>
                 </div>
diff --git a/pages/dataview/index.vue b/pages/dataview/index.vue
index 647efede8..3458fd70a 100755
--- a/pages/dataview/index.vue
+++ b/pages/dataview/index.vue
@@ -17,7 +17,6 @@ import ImportDoc from '@/doc/dataview/ImportDoc.vue';
 import LayoutDoc from '@/doc/dataview/LayoutDoc.vue';
 import LoadingDoc from '@/doc/dataview/LoadingDoc.vue';
 import PaginationDoc from '@/doc/dataview/PaginationDoc.vue';
-import PrimeFlexDoc from '@/doc/dataview/PrimeFlexDoc.vue';
 import SortingDoc from '@/doc/dataview/SortingDoc.vue';
 import PTComponent from '@/doc/dataview/pt/index.vue';
 import ThemingDoc from '@/doc/dataview/theming/index.vue';
@@ -31,11 +30,6 @@ export default {
                     label: 'Import',
                     component: ImportDoc
                 },
-                {
-                    id: 'primeflex',
-                    label: 'PrimeFlex',
-                    component: PrimeFlexDoc
-                },
                 {
                     id: 'basic',
                     label: 'Basic',