From af1d89b02fbbc09393b98c05ddd65bec26dbffd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Thu, 18 Jan 2024 14:50:16 +0300
Subject: [PATCH] Fixed #5798 - Remove primeflex dependency from DataView

---
 components/doc/dataview/basicdoc.js      | 64 +++++++++++++++++------
 components/doc/dataview/layoutdoc.js     | 57 +++++++++++++--------
 components/doc/dataview/loadingdoc.js    | 65 +++++++++++++++---------
 components/doc/dataview/paginationdoc.js | 65 ++++++++++++++++++------
 components/doc/dataview/primeflexdoc.js  | 26 ----------
 components/doc/dataview/sortingdoc.js    | 65 ++++++++++++++++++------
 components/lib/dataview/DataView.js      | 62 +++++++++++-----------
 components/lib/dataview/DataViewBase.js  |  7 +--
 components/lib/dataview/dataview.d.ts    |  6 +++
 pages/dataview/index.js                  |  6 ---
 10 files changed, 266 insertions(+), 157 deletions(-)
 delete mode 100644 components/doc/dataview/primeflexdoc.js

diff --git a/components/doc/dataview/basicdoc.js b/components/doc/dataview/basicdoc.js
index dca6916e6a..2b45221bb8 100644
--- a/components/doc/dataview/basicdoc.js
+++ b/components/doc/dataview/basicdoc.js
@@ -4,6 +4,7 @@ import { Button } from '@/components/lib/button/Button';
 import { DataView } from '@/components/lib/dataview/DataView';
 import { Rating } from '@/components/lib/rating/Rating';
 import { Tag } from '@/components/lib/tag/Tag';
+import { classNames } from '@/components/lib/utils/Utils';
 import { useEffect, useState } from 'react';
 import { ProductService } from '../../../service/ProductService';
 
@@ -30,10 +31,10 @@ export function BasicDoc(props) {
         }
     };
 
-    const itemTemplate = (product) => {
+    const itemTemplate = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -57,9 +58,19 @@ export function BasicDoc(props) {
         );
     };
 
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     const code = {
         basic: `
-<DataView value={products} itemTemplate={itemTemplate} />
+<DataView value={products} listTemplate={listTemplate} />
         `,
         javascript: `
 import React, { useState, useEffect } from 'react';
@@ -67,6 +78,7 @@ import { Button } from 'primereact/button';
 import { DataView } from 'primereact/dataview';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
 import { ProductService } from './service/ProductService';
 
 export default function BasicDemo() {
@@ -92,10 +104,10 @@ export default function BasicDemo() {
         }
     };
 
-    const itemTemplate = (product) => {
+    const itemTemplate = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -119,9 +131,19 @@ export default function BasicDemo() {
         );
     };
 
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} />
+            <DataView value={products} listTemplate={listTemplate} />
         </div>
     )
 }
@@ -132,6 +154,7 @@ import { Button } from 'primereact/button';
 import { DataView } from 'primereact/dataview';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
 import { ProductService } from './service/ProductService';
 
 interface Product {
@@ -170,10 +193,10 @@ export default function BasicDemo() {
         }
     };
 
-    const itemTemplate = (product: Product) => {
+    const itemTemplate = (product: Product, index: number) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -197,15 +220,25 @@ export default function BasicDemo() {
         );
     };
 
+    const listTemplate = (items: Product[]) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} />
+            <DataView value={products} listTemplate={listTemplate} />
         </div>
     )
 }
         `,
         data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
@@ -226,12 +259,11 @@ export default function BasicDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    DataView requires a <i>value</i> to display along with an <i>itemTemplate</i> that receives an object in the collection to return content. The root element should have the PrimeFlex Grid classes e.g. col-12 to define how items are
-                    displayed.
+                    DataView requires a <i>value</i> to display along with an <i>listTemplate</i> that receives an object in the collection to return content.
                 </p>
             </DocSectionText>
             <div className="card">
-                <DataView value={products} itemTemplate={itemTemplate} />
+                <DataView value={products} listTemplate={listTemplate} />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/dataview/layoutdoc.js b/components/doc/dataview/layoutdoc.js
index 51ecf6dfc1..ee3d9db393 100644
--- a/components/doc/dataview/layoutdoc.js
+++ b/components/doc/dataview/layoutdoc.js
@@ -3,6 +3,7 @@ import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import { Button } from '@/components/lib/button/Button';
 import { DataView, DataViewLayoutOptions } from '@/components/lib/dataview/DataView';
 import { Rating } from '@/components/lib/rating/Rating';
+import { classNames } from '@/components/lib/utils/Utils';
 import { Tag } from '@/components/lib/tag/Tag';
 import { useEffect, useState } from 'react';
 import { ProductService } from '../../../service/ProductService';
@@ -31,10 +32,10 @@ export function LayoutDoc(props) {
         }
     };
 
-    const listItem = (product) => {
+    const listItem = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -60,7 +61,7 @@ export function LayoutDoc(props) {
 
     const gridItem = (product) => {
         return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
                 <div className="p-4 border-1 surface-border surface-card border-round">
                     <div className="flex flex-wrap align-items-center justify-content-between gap-2">
                         <div className="flex align-items-center gap-2">
@@ -83,15 +84,19 @@ export function LayoutDoc(props) {
         );
     };
 
-    const itemTemplate = (product, layout) => {
+    const itemTemplate = (product, layout, index) => {
         if (!product) {
             return;
         }
 
-        if (layout === 'list') return listItem(product);
+        if (layout === 'list') return listItem(product, index);
         else if (layout === 'grid') return gridItem(product);
     };
 
+    const listTemplate = (products, layout) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
     const header = () => {
         return (
             <div className="flex justify-content-end">
@@ -111,6 +116,7 @@ import { Button } from 'primereact/button';
 import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
 
 export default function BasicDemo() {
     const [products, setProducts] = useState([]);
@@ -136,10 +142,10 @@ export default function BasicDemo() {
         }
     };
 
-    const listItem = (product) => {
+    const listItem = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -165,7 +171,7 @@ export default function BasicDemo() {
 
     const gridItem = (product) => {
         return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
                 <div className="p-4 border-1 surface-border surface-card border-round">
                     <div className="flex flex-wrap align-items-center justify-content-between gap-2">
                         <div className="flex align-items-center gap-2">
@@ -188,15 +194,19 @@ export default function BasicDemo() {
         );
     };
 
-    const itemTemplate = (product, layout) => {
+    const itemTemplate = (product, layout, index) => {
         if (!product) {
             return;
         }
 
-        if (layout === 'list') return listItem(product);
+        if (layout === 'list') return listItem(product, index);
         else if (layout === 'grid') return gridItem(product);
     };
 
+    const listTemplate = (products, layout) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
     const header = () => {
         return (
             <div className="flex justify-content-end">
@@ -207,7 +217,7 @@ export default function BasicDemo() {
 
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
+            <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
         </div>
     )
 }
@@ -219,6 +229,7 @@ import { Button } from 'primereact/button';
 import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
 
 interface Product {
     id: string;
@@ -257,10 +268,10 @@ export default function BasicDemo() {
         }
     };
 
-    const listItem = (product: Product) => {
+    const listItem = (product: Product, index: number) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -286,7 +297,7 @@ export default function BasicDemo() {
 
     const gridItem = (product: Product) => {
         return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
                 <div className="p-4 border-1 surface-border surface-card border-round">
                     <div className="flex flex-wrap align-items-center justify-content-between gap-2">
                         <div className="flex align-items-center gap-2">
@@ -309,15 +320,19 @@ export default function BasicDemo() {
         );
     };
 
-    const itemTemplate = (product: Product, layout: string) => {
+    const itemTemplate = (product: Product, layout: string, index: number) => {
         if (!product) {
             return;
         }
 
-        if (layout === 'list') return listItem(product);
+        if (layout === 'list') return listItem(product: Product, index);
         else if (layout === 'grid') return gridItem(product);
     };
 
+    const listTemplate = (products: Product[], layout: string) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
     const header = () => {
         return (
             <div className="flex justify-content-end">
@@ -334,7 +349,7 @@ export default function BasicDemo() {
 }
         `,
         data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
@@ -360,7 +375,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card">
-                <DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
+                <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/dataview/loadingdoc.js b/components/doc/dataview/loadingdoc.js
index 6aa83d9f84..cadc49124c 100644
--- a/components/doc/dataview/loadingdoc.js
+++ b/components/doc/dataview/loadingdoc.js
@@ -2,6 +2,7 @@ import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import { DataView, DataViewLayoutOptions } from '@/components/lib/dataview/DataView';
 import { Skeleton } from '@/components/lib/skeleton/Skeleton';
+import { classNames } from '@/components/lib/utils/Utils';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { ProductService } from '../../../service/ProductService';
@@ -14,10 +15,10 @@ export function LoadingDoc(props) {
         ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 6)));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const listItem = (product) => {
+    const listItem = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <Skeleton className="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -40,7 +41,7 @@ export function LoadingDoc(props) {
 
     const gridItem = (product) => {
         return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
                 <div className="p-4 border-1 surface-border surface-card border-round">
                     <div className="flex flex-wrap align-items-center justify-content-between gap-2">
                         <Skeleton className="w-6rem border-round h-1rem" />
@@ -60,15 +61,19 @@ export function LoadingDoc(props) {
         );
     };
 
-    const itemTemplate = (product, layout) => {
+    const itemTemplate = (product, layout, index) => {
         if (!product) {
             return;
         }
 
-        if (layout === 'list') return listItem(product);
+        if (layout === 'list') return listItem(product, index);
         else if (layout === 'grid') return gridItem(product);
     };
 
+    const listTemplate = (products, layout) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
     const header = () => {
         return (
             <div className="flex justify-content-end">
@@ -83,9 +88,10 @@ export function LoadingDoc(props) {
         `,
         javascript: `
 import React, { useState, useEffect } from 'react';
-import { ProductService } from './service/ProductService';
 import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
 import { Skeleton } from 'primereact/skeleton';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
 
 export default function BasicDemo() {
     const [products, setProducts] = useState([]);
@@ -95,10 +101,10 @@ export default function BasicDemo() {
         ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 6)));
     }, []);
 
-    const listItem = () => {
+    const listItem = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <Skeleton className="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -119,9 +125,9 @@ export default function BasicDemo() {
         );
     };
 
-    const gridItem = () => {
+    const gridItem = (product) => {
         return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
                 <div className="p-4 border-1 surface-border surface-card border-round">
                     <div className="flex flex-wrap align-items-center justify-content-between gap-2">
                         <Skeleton className="w-6rem border-round h-1rem" />
@@ -141,15 +147,19 @@ export default function BasicDemo() {
         );
     };
 
-    const itemTemplate = (product, layout) => {
+    const itemTemplate = (product, layout, index) => {
         if (!product) {
             return;
         }
 
-        if (layout === 'list') return listItem(product);
+        if (layout === 'list') return listItem(product, index);
         else if (layout === 'grid') return gridItem(product);
     };
 
+    const listTemplate = (products, layout) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
     const header = () => {
         return (
             <div className="flex justify-content-end">
@@ -160,16 +170,17 @@ export default function BasicDemo() {
 
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
+            <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
         </div>
     )
 }
         `,
         typescript: `
 import React, { useState, useEffect } from 'react';
-import { ProductService } from './service/ProductService';
 import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
 import { Skeleton } from 'primereact/skeleton';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
 
 interface Product {
     id: string;
@@ -192,9 +203,9 @@ export default function BasicDemo() {
         ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 6)));
     }, []);
 
-    const listItem = () => {
+    const listItem = (product, index) => {
         return (
-            <div className="col-12">
+            <div className="col-12" key={product.id}>
                 <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
                     <Skeleton className="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
@@ -216,9 +227,9 @@ export default function BasicDemo() {
         );
     };
 
-    const gridItem = () => {
+    const gridItem = (product) => {
         return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
                 <div className="p-4 border-1 surface-border surface-card border-round">
                     <div className="flex flex-wrap align-items-center justify-content-between gap-2">
                         <Skeleton className="w-6rem border-round h-1rem" />
@@ -243,10 +254,16 @@ export default function BasicDemo() {
             return;
         }
 
-        if (layout === 'list') return listItem(product);
+        if (layout === 'list') return listItem(product, index);
         else if (layout === 'grid') return gridItem(product);
     };
 
+
+
+    const listTemplate = (products: Product[], layout: string) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
     const header = () => {
         return (
             <div className="flex justify-content-end">
@@ -257,13 +274,13 @@ export default function BasicDemo() {
 
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
+            <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
         </div>
     )
 }
         `,
         data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
@@ -288,7 +305,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card">
-                <DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
+                <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/dataview/paginationdoc.js b/components/doc/dataview/paginationdoc.js
index 878689d8b7..378c724d9e 100644
--- a/components/doc/dataview/paginationdoc.js
+++ b/components/doc/dataview/paginationdoc.js
@@ -4,6 +4,7 @@ import { Button } from '@/components/lib/button/Button';
 import { DataView } from '@/components/lib/dataview/DataView';
 import { Rating } from '@/components/lib/rating/Rating';
 import { Tag } from '@/components/lib/tag/Tag';
+import { classNames } from '@/components/lib/utils/Utils';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { ProductService } from '../../../service/ProductService';
@@ -31,10 +32,10 @@ export function PaginationDoc(props) {
         }
     };
 
-    const itemTemplate = (product) => {
+    const itemTemplate = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -58,17 +59,28 @@ export function PaginationDoc(props) {
         );
     };
 
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     const code = {
         basic: `
-<DataView value={products} itemTemplate={itemTemplate} paginator rows={5} />
+<DataView value={products} itemTemplate={listTemplate} paginator rows={5} />
         `,
         javascript: `
 import React, { useState, useEffect } from 'react';
-import { ProductService } from './service/ProductService';
 import { Button } from 'primereact/button';
 import { DataView } from 'primereact/dataview';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
 
 export default function PaginationDemo() {
     const [products, setProducts] = useState([]);
@@ -93,10 +105,10 @@ export default function PaginationDemo() {
         }
     };
 
-    const itemTemplate = (product) => {
+    const itemTemplate = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -120,20 +132,31 @@ export default function PaginationDemo() {
         );
     };
 
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} paginator rows={5} />
+            <DataView value={products} listTemplate={listTemplate} paginator rows={5} />
         </div>
     )
 }
         `,
         typescript: `
 import React, { useState, useEffect } from 'react';
-import { ProductService } from './service/ProductService';
 import { Button } from 'primereact/button';
 import { DataView } from 'primereact/dataview';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
 
 interface Product {
     id: string;
@@ -171,10 +194,10 @@ export default function PaginationDemo() {
         }
     };
 
-    const itemTemplate = (product: Product) => {
+    const itemTemplate = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -198,15 +221,25 @@ export default function PaginationDemo() {
         );
     };
 
+    const listTemplate = (items: Product) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} paginator rows={5} />
+        <DataView value={products} listTemplate={listTemplate} paginator rows={5} />
         </div>
     )
 }
         `,
         data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
@@ -231,7 +264,7 @@ export default function PaginationDemo() {
                 </p>
             </DocSectionText>
             <div className="card">
-                <DataView value={products} itemTemplate={itemTemplate} paginator rows={5} />
+                <DataView value={products} listTemplate={listTemplate} paginator rows={5} />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/dataview/primeflexdoc.js b/components/doc/dataview/primeflexdoc.js
deleted file mode 100644
index e902b428aa..0000000000
--- a/components/doc/dataview/primeflexdoc.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-
-export function PrimeFlexDoc(props) {
-    const code1 = {
-        basic: `
-npm install primeflex
-        `
-    };
-
-    const code2 = {
-        basic: `
-import 'primeflex/primeflex.css';
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.</p>
-            </DocSectionText>
-            <DocSectionCode code={code1} hideToggleCode import hideCodeSandbox hideStackBlitz />
-            <DocSectionCode code={code2} hideToggleCode import hideCodeSandbox hideStackBlitz />
-        </>
-    );
-}
diff --git a/components/doc/dataview/sortingdoc.js b/components/doc/dataview/sortingdoc.js
index 86bd9a10a1..72aca0af70 100644
--- a/components/doc/dataview/sortingdoc.js
+++ b/components/doc/dataview/sortingdoc.js
@@ -4,6 +4,7 @@ import { Button } from '@/components/lib/button/Button';
 import { DataView } from '@/components/lib/dataview/DataView';
 import { Dropdown } from '@/components/lib/dropdown/Dropdown';
 import { Rating } from '@/components/lib/rating/Rating';
+import { classNames } from '@/components/lib/utils/Utils';
 import { Tag } from '@/components/lib/tag/Tag';
 import { useEffect, useState } from 'react';
 import { ProductService } from '../../../service/ProductService';
@@ -56,10 +57,10 @@ export function SortingDoc(props) {
         return <Dropdown options={sortOptions} value={sortKey} optionLabel="label" placeholder="Sort By Price" onChange={onSortChange} className="w-full sm:w-14rem" />;
     };
 
-    const itemTemplate = (product) => {
+    const itemTemplate = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -83,18 +84,29 @@ export function SortingDoc(props) {
         );
     };
 
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     const code = {
         basic: `
-<DataView value={products} itemTemplate={itemTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
+<DataView value={products} listTemplate={listTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
         `,
         javascript: `
 import React, { useState, useEffect } from 'react';
-import { ProductService } from './service/ProductService';
 import { Button } from 'primereact/button';
 import { DataView } from 'primereact/dataview';
 import { Dropdown } from 'primereact/dropdown';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
 
 export default function SortingDemo() {
     const [products, setProducts] = useState([]);
@@ -144,10 +156,10 @@ export default function SortingDemo() {
         return <Dropdown options={sortOptions} value={sortKey} optionLabel="label" placeholder="Sort By Price" onChange={onSortChange} className="w-full sm:w-14rem" />;
     };
 
-    const itemTemplate = (product) => {
+    const itemTemplate = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -171,21 +183,32 @@ export default function SortingDemo() {
         );
     };
 
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
+            <DataView value={products} listTemplate={listTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
         </div>
     )
 }
         `,
         typescript: `
 import React, { useState, useEffect } from 'react';
-import { ProductService } from './service/ProductService';
 import { Button } from 'primereact/button';
 import { DataView } from 'primereact/dataview';
 import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
 
 interface Product {
     id: string;
@@ -253,10 +276,10 @@ export default function SortingDemo() {
         return <Dropdown options={sortOptions} value={sortKey} optionLabel="label" placeholder="Sort By Price" onChange={onSortChange} className="w-full sm:w-14rem" />;
     };
 
-    const itemTemplate = (product: Product) => {
+    const itemTemplate = (product: Product, index: number) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -280,15 +303,25 @@ export default function SortingDemo() {
         );
     };
 
+    const listTemplate = (items: Product[]) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
+            <DataView value={products} listTemplate={listTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
         </div>
     )
 }
         `,
         data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
@@ -313,7 +346,7 @@ export default function SortingDemo() {
                 </p>
             </DocSectionText>
             <div className="card">
-                <DataView value={products} itemTemplate={itemTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
+                <DataView value={products} listTemplate={listTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js
index 2b6cbe6412..dd71fb69e2 100644
--- a/components/lib/dataview/DataView.js
+++ b/components/lib/dataview/DataView.js
@@ -77,6 +77,7 @@ export const DataViewItem = React.memo((props) => {
 
 export const DataView = React.memo(
     React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = DataViewBase.getProps(inProps, context);
         const [firstState, setFirstState] = React.useState(props.first);
@@ -139,6 +140,18 @@ export const DataView = React.memo(
             }
         };
 
+        const getItems = (value) => {
+            if (props.paginator) {
+                const currentFirst = props.lazy ? 0 : first;
+                const totalRecords = getTotalRecords();
+                const last = Math.min(rows + currentFirst, totalRecords);
+
+                return value.slice(currentFirst, last) || [];
+            }
+
+            return value;
+        };
+
         const sort = () => {
             if (props.value) {
                 // performance optimization to prevent resolving field data in each loop
@@ -250,22 +263,9 @@ export const DataView = React.memo(
 
         const createItems = (value) => {
             if (ObjectUtils.isNotEmpty(value)) {
-                if (props.paginator) {
-                    const currentFirst = props.lazy ? 0 : first;
-                    const totalRecords = getTotalRecords();
-                    const last = Math.min(rows + currentFirst, totalRecords);
-                    let items = [];
-
-                    for (let i = currentFirst; i < last; i++) {
-                        const val = value[i];
+                let items = getItems(value);
 
-                        val && items.push(<DataViewItem key={getItemRenderKey(value) || i} template={props.itemTemplate} layout={props.layout} item={val} />);
-                    }
-
-                    return items;
-                }
-
-                return value.map((item, index) => {
+                return items.map((item, index) => {
                     return <DataViewItem key={getItemRenderKey(item) || index} template={props.itemTemplate} layout={props.layout} item={item} />;
                 });
             }
@@ -274,27 +274,31 @@ export const DataView = React.memo(
         };
 
         const createContent = (value) => {
-            const items = createItems(value);
-
-            const gridProps = mergeProps(
-                {
-                    className: cx('grid')
-                },
-                ptm('grid')
-            );
-
             const contentProps = mergeProps(
                 {
                     className: cx('content')
                 },
                 ptm('content')
             );
+            let content = null;
 
-            return (
-                <div {...contentProps}>
-                    <div {...gridProps}>{items}</div>
-                </div>
-            );
+            if (props.listTemplate) {
+                const items = getItems(value);
+
+                content = ObjectUtils.getJSXElement(props.listTemplate, items, props.layout);
+            } else {
+                const items = createItems(value);
+                const gridProps = mergeProps(
+                    {
+                        className: cx('grid')
+                    },
+                    ptm('grid')
+                );
+
+                content = <div {...gridProps}>{items}</div>;
+            }
+
+            return <div {...contentProps}>{content}</div>;
         };
 
         const processData = () => {
diff --git a/components/lib/dataview/DataViewBase.js b/components/lib/dataview/DataViewBase.js
index d4e244f295..c6ed89b879 100644
--- a/components/lib/dataview/DataViewBase.js
+++ b/components/lib/dataview/DataViewBase.js
@@ -4,7 +4,7 @@ import { classNames } from '../utils/Utils';
 const classes = {
     loadingIcon: 'p-dataview-loading-icon',
     loadingOverlay: 'p-dataview-loading-overlay p-component-overlay',
-    emptyMessage: 'p-col-12 col-12 p-dataview-emptymessage',
+    emptyMessage: 'p-dataview-emptymessage',
     header: 'p-dataview-header',
     footer: 'p-dataview-footer',
     content: 'p-dataview-content',
@@ -25,7 +25,7 @@ const styles = `
         position: relative;
         min-height: 4rem;
     }
-    
+
     .p-dataview .p-dataview-loading-overlay {
         position: absolute;
         z-index: 1;
@@ -69,6 +69,7 @@ export const DataViewBase = ComponentBase.extend({
         loadingIcon: null,
         gutter: false,
         itemTemplate: null,
+        listTemplate: null,
         onPage: null,
         children: undefined
     },
@@ -92,7 +93,7 @@ export const DataViewLayoutOptionsBase = ComponentBase.extend({
     },
     css: {
         classes: {
-            root: 'p-dataview-layout-options p-selectbutton p-buttonset',
+            root: 'p-dataview p-component p-dataview-layout-options p-selectbutton p-buttonset',
             listButton: ({ props }) => classNames('p-button p-button-icon-only', { 'p-highlight': props.layout === 'list' }),
             gridButton: ({ props }) => classNames('p-button p-button-icon-only', { 'p-highlight': props.layout === 'grid' })
         }
diff --git a/components/lib/dataview/dataview.d.ts b/components/lib/dataview/dataview.d.ts
index 5bd3465f2a..7f26afcae6 100755
--- a/components/lib/dataview/dataview.d.ts
+++ b/components/lib/dataview/dataview.d.ts
@@ -337,6 +337,12 @@ export interface DataViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * @param {'list' | 'grid' | (string & Record<string, unknown>)} layout - Current layout.
      */
     itemTemplate?(item: any, layout: 'list' | 'grid' | (string & Record<string, unknown>)): React.ReactNode;
+    /**
+     * Function that gets the options along with the layout mode and returns the content.
+     * @param {*} item - Current item.
+     * @param {'list' | 'grid' | (string & Record<string, unknown>)} layout - Current layout.
+     */
+    listTemplate?(items: any[], layout: 'list' | 'grid' | (string & Record<string, unknown>)): React.ReactNode[];
     /**
      * Used to get the child elements of the component.
      * @readonly
diff --git a/pages/dataview/index.js b/pages/dataview/index.js
index 6cf61e80bc..5b78814dbb 100644
--- a/pages/dataview/index.js
+++ b/pages/dataview/index.js
@@ -6,7 +6,6 @@ import { ImportDoc } from '@/components/doc/dataview/importdoc';
 import { LayoutDoc } from '@/components/doc/dataview/layoutdoc';
 import { LoadingDoc } from '@/components/doc/dataview/loadingdoc';
 import { PaginationDoc } from '@/components/doc/dataview/paginationdoc';
-import { PrimeFlexDoc } from '@/components/doc/dataview/primeflexdoc';
 import { PTDoc } from '@/components/doc/dataview/pt/ptdoc';
 import { Wireframe } from '@/components/doc/dataview/pt/wireframe';
 import { SortingDoc } from '@/components/doc/dataview/sortingdoc';
@@ -20,11 +19,6 @@ const DataViewDemo = () => {
             label: 'Import',
             component: ImportDoc
         },
-        {
-            id: 'primeflex',
-            label: 'PrimeFlex',
-            component: PrimeFlexDoc
-        },
         {
             id: 'basic',
             label: 'Basic',