From f66e2b45f43c7dfe10b0f2842f60f72dfc94877c Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 24 May 2019 12:29:52 +0300
Subject: [PATCH] Updated docs of DataView

---
 src/components/dataview/DataView.vue |   8 +-
 src/views/dataview/DataViewDemo.vue  |   4 +-
 src/views/dataview/DataViewDoc.vue   | 571 ++++++++++++++-------------
 3 files changed, 308 insertions(+), 275 deletions(-)

diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index 405596630..fa530029d 100644
--- a/src/components/dataview/DataView.vue
+++ b/src/components/dataview/DataView.vue
@@ -15,8 +15,8 @@
 		<div class="p-dataview-content">
 			<div class="p-grid">
 				<template v-for="(item,index) of items">
-					<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="item" :index="index"></slot>
-					<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="item" :index="index"></slot>
+					<slot v-if="$scopedSlots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
+					<slot v-if="$scopedSlots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
 				</template>
 				<div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div>
 			</div>
@@ -98,6 +98,10 @@
 			sortOrder: {
 				type: Number,
 				default: null
+            },
+            lazy: {
+				type: Boolean,
+				default: false
 			}
         },
         data() {
diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
index fa44c1697..81f0c6c2d 100644
--- a/src/views/dataview/DataViewDemo.vue
+++ b/src/views/dataview/DataViewDemo.vue
@@ -20,7 +20,7 @@
 						</div>
 					</div>
 				</template>
-				<template #listItem="slotProps" >
+				<template #list="slotProps" >
 					<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
 						<div class="p-grid">
 							<div class="p-col-12 p-md-3">
@@ -43,7 +43,7 @@
 						</div>
 					</div>
 				</template>
-				<template #gridItem="slotProps">
+				<template #grid="slotProps">
 					<div style="padding: .5em" class="p-col-12 p-md-3">
 						<Panel :header="slotProps.data.vin" style="text-align: center">
 							<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index af00a5b5d..a0a8161a2 100644
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -11,28 +11,30 @@ import DataView from 'primevue/dataview';
 				<p>DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.</p>
 <CodeHighlight lang="js">
 <template v-pre>
-data() {
-	return {
-		cars: null,
-	}
-},
-carService: null,
-created() {
-	this.carService = new CarService();
-},
-mounted() {
-	this.carService.getCarsLarge().then(data => this.cars = data);
+export default {
+    data() {
+        return {
+            cars: null,
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsLarge().then(data => this.cars = data);
+    }
 }
 </template>
 </CodeHighlight>
 
 				<h3>Layouts</h3>
-				<p>DataView has two layout modes; "list" and "grid" where a separate template is used to render an item in each mode. In list mode name of the template is "listItem" whereas
-					in grid mode it is "gridItem".</p>
+				<p>DataView has two layout modes; <i>list</i> and <i>grid</i> where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas
+					in grid mode it is "grid".</p>
 				<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
 <CodeHighlight>
 <template v-pre>
-&lt;template #listItem="slotProps" &gt;
+&lt;template #list="slotProps" &gt;
 	&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
 		&lt;div class="p-grid"&gt;
 			&lt;div class="p-col-12 p-md-3"&gt;
@@ -51,7 +53,7 @@ mounted() {
 		&lt;/div&gt;
 	&lt;/div&gt;
 &lt;/template&gt;
-&lt;template #gridItem="slotProps"&gt;
+&lt;template #grid="slotProps"&gt;
 	&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
 		&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
 			&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
@@ -65,9 +67,10 @@ mounted() {
 </CodeHighlight>
 
 				<h3>Sections</h3>
-				<p>Header and Footer are the two sections that are capable of displaying custom content.</p>
+				<p>Header and Footer are the two templates that are capable of displaying custom content.</p>
 <CodeHighlight>
-&lt;template #header&gt;List of Cars&lt;/template&gt;
+&lt;template #header&gt;Header Content&lt;/template&gt;
+&lt;template #footer&gt;Footer Content&lt;/template&gt;
 </CodeHighlight>
 
 				<h3>DataViewLayoutOptions</h3>
@@ -75,19 +78,26 @@ mounted() {
 					to display a buttonset to choose the layout mode in DataView. Location of the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element
 					you can create your own that updates the layout property of the DataView.
 				</p>
-<CodeHighlight>
-&lt;template #header&gt;
-	&lt;DataViewLayoutOptions :layout="layout" @change="changeMode"&gt;&lt;/DataViewLayoutOptions&gt;
-&lt;/template&gt;
 
-&lt;template #footer&gt;
-	&lt;DataViewLayoutOptions :layout="layout" @change="changeMode"&gt;&lt;/DataViewLayoutOptions&gt;
-&lt;/template&gt;
+<CodeHighlight>
+<template v-pre>
+&lt;DataView :value="cars" :layout="layout"&gt;
+	&lt;template #header&gt;
+		&lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt;
+	&lt;/template&gt;
+	&lt;template #list="slotProps" &gt;
+		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+	&lt;/template&gt;
+	&lt;template #grid="slotProps"&gt;
+		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+	&lt;/template&gt;
+&lt;/DataView&gt;
+</template>
 </CodeHighlight>
 
 				<h3>Paginator</h3>
 				<p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number
-					of page links to display. To customize the left and right side of the paginators, use "paginatorLeft" and "paginatorRight" templates.</p>
+					of page links to display. To customize the left and right side of the paginators, use <i>paginatorLeft</i> and <i>paginatorRight</i> templates.</p>
 <CodeHighlight>
 <template v-pre>
 &lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20"&gt;
@@ -97,13 +107,10 @@ mounted() {
 	&lt;template #paginatorRight&gt;
 		&lt;Button type="button" icon="pi pi-search" /&gt;
 	&lt;/template&gt;
-	&lt;template #header&gt;
-		List of Cars
-	&lt;/template&gt;
-	&lt;template #listItem="slotProps" &gt;
+	&lt;template #list="slotProps" &gt;
 		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
-	&lt;template #gridItem="slotProps"&gt;
+	&lt;template #grid="slotProps"&gt;
 		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/DataView&gt;
@@ -111,221 +118,247 @@ mounted() {
 </CodeHighlight>
 
 				<h3>Sorting</h3>
-				<p>sortField and sortOrder properties are available for sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element.
+				<p><i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element.
 					Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.</p>
 <CodeHighlight>
 <template v-pre>
 &lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt;
-	&lt;template #paginatorLeft&gt;
-		&lt;Button type="button" icon="pi pi-refresh"/&gt;
-	&lt;/template&gt;
-	&lt;template #paginatorRight&gt;
-		&lt;Button type="button" icon="pi pi-search" /&gt;
-	&lt;/template&gt;
-	&lt;template #header&gt;
-		List of Cars
-	&lt;/template&gt;
-	&lt;template #listItem="slotProps" &gt;
+    &lt;template #header&gt;
+        &lt;div class="p-grid p-nogutter"&gt;
+            &lt;div class="p-col-6" style="text-align: left"&gt;
+                &lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt;
+            &lt;/div&gt;
+            &lt;div class="p-col-6" style="text-align: right"&gt;
+                &lt;DataViewLayoutOptions v-model="layout" /&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+	&lt;template #list="slotProps" &gt;
 		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
-	&lt;template #gridItem="slotProps"&gt;
+	&lt;template #grid="slotProps"&gt;
 		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/DataView&gt;
 </template>
 </CodeHighlight>
 
-				<h3>Properties of DataViewLayoutOptions</h3>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Type</th>
-							<th>Default</th>
-							<th>Description</th>
-						</tr>
-						</thead>
-						<tbody>
-						<tr>
-							<td>layout</td>
-							<td>string</td>
-							<td>list</td>
-							<td>Layout of the items, valid values are "list" and "grid".</td>
-						</tr>
-						</tbody>
-					</table>
-				</div>
+<CodeHighlight lang="js">
+<template v-pre>
+export default {
+    data() {
+        return {
+            cars: null,
+            layout: 'list',
+            sortKey: null,
+            sortOrder: null,
+            sortField: null,
+            sortOptions: [
+                {label: 'Newest First', value: '!year'},
+                {label: 'Oldest First', value: 'year'},
+                {label: 'Brand', value: 'brand'}
+            ]
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsLarge().then(data => this.cars = data);
+    },
+    methods: {
+        onSortChange(event){
+            const value = event.value.value;
+            const sortValue = event.value;
 
-				<h3>Events of DataViewLayoutOptions</h3>
-				<div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Parameters</th>
-							<th>Description</th>
-						</tr>
-						</thead>
-						<tbody>
-						<tr>
-							<td>change</td>
-							<td>event.originalEvent:  browser event  <br/>
-								event.value = layout mode e.g. "list" or "grid"
-							</td>
-							<td>Callback to invoke when layout mode is changed.</td>
-						</tr>
-						</tbody>
-					</table>
-				</div>
+            if (value.indexOf('!') === 0) {
+                this.sortOrder = -1;
+                this.sortField = value.substring(1, value.length);
+                this.sortKey = sortValue;
+            }
+            else {
+                this.sortOrder = 1;
+                this.sortField = value;
+                this.sortKey = sortValue;
+            }
+        }
+    }
+}
+</template>
+</CodeHighlight>
 
 				<h3>Properties</h3>
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Type</th>
-							<th>Default</th>
-							<th>Description</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>value</td>
-							<td>array</td>
-							<td>null</td>
-							<td>An array of objects to display.</td>
-						</tr>
-						<tr>
-							<td>layout</td>
-							<td>string</td>
-							<td>list</td>
-							<td>Layout of the items, valid values are "list" and "grid".</td>
-						</tr>
-						<tr>
-							<td>rows</td>
-							<td>number</td>
-							<td>null</td>
-							<td>Number of rows to display per page.</td>
-						</tr>
-						<tr>
-							<td>first</td>
-							<td>number</td>
-							<td>0</td>
-							<td>Index of the first record to render.</td>
-						</tr>
-						<tr>
-							<td>totalRecords</td>
-							<td>number</td>
-							<td>null</td>
-							<td>Number of total records, defaults to length of value when not defined.</td>
-						</tr>
-						<tr>
-							<td>paginator</td>
-							<td>boolean</td>
-							<td>false</td>
-							<td>When specified as true, enables the pagination.</td>
-						</tr>
-						<tr>
-							<td>paginatorPosition</td>
-							<td>string</td>
-							<td>bottom</td>
-							<td>Position of the paginator, options are "top","bottom" or "both".</td>
-						</tr>
-						<tr>
-							<td>alwaysShowPaginator</td>
-							<td>boolean</td>
-							<td>true</td>
-							<td>Whether to show it even there is only one page.</td>
-						</tr>
-						<tr>
-							<td>paginatorTemplate</td>
-							<td>string</td>
-							<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
-							<td>Template of the paginator.</td>
-						</tr>
-						<tr>
-							<td>pageLinkSize</td>
-							<td>number</td>
-							<td>5</td>
-							<td>Number of page links to display.</td>
-						</tr>
-						<tr>
-							<td>rowsPerPageOptions</td>
-							<td>array</td>
-							<td>null</td>
-							<td>Array of integer values to display inside rows per page dropdown.</td>
-						</tr>
-						<tr>
-							<td>currentPageReportTemplate</td>
-							<td>string</td>
-							<td>({currentPage} of {totalPages})</td>
-							<td>Template of the current page report element.</td>
-						</tr>
-						<tr>
-							<td>emptyMessage</td>
-							<td>string</td>
-							<td>No records found.</td>
-							<td>Text to display when there is no data.</td>
-						</tr>
-						<tr>
-							<td>sortField</td>
-							<td>string</td>
-							<td>null</td>
-							<td>Name of the field to sort data by default.</td>
-						</tr>
-						<tr>
-							<td>sortOrder</td>
-							<td>number</td>
-							<td>null</td>
-							<td>Order to sort the data by default.</td>
-						</tr>
-						<tr>
-							<td>lazy</td>
-							<td>boolean</td>
-							<td>false</td>
-							<td>Defines if data is loaded and interacted with in lazy manner.</td>
-						</tr>
+                            <tr>
+                                <td>value</td>
+                                <td>array</td>
+                                <td>null</td>
+                                <td>An array of objects to display.</td>
+                            </tr>
+                            <tr>
+                                <td>layout</td>
+                                <td>string</td>
+                                <td>list</td>
+                                <td>Layout of the items, valid values are "list" and "grid".</td>
+                            </tr>
+                            <tr>
+                                <td>rows</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Number of rows to display per page.</td>
+                            </tr>
+                            <tr>
+                                <td>first</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Index of the first record to render.</td>
+                            </tr>
+                            <tr>
+                                <td>totalRecords</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Number of total records, defaults to length of value when not defined.</td>
+                            </tr>
+                            <tr>
+                                <td>paginator</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>When specified as true, enables the pagination.</td>
+                            </tr>
+                            <tr>
+                                <td>paginatorPosition</td>
+                                <td>string</td>
+                                <td>bottom</td>
+                                <td>Position of the paginator, options are "top","bottom" or "both".</td>
+                            </tr>
+                            <tr>
+                                <td>alwaysShowPaginator</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether to show it even there is only one page.</td>
+                            </tr>
+                            <tr>
+                                <td>paginatorTemplate</td>
+                                <td>string</td>
+                                <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
+                                <td>Template of the paginator.</td>
+                            </tr>
+                            <tr>
+                                <td>pageLinkSize</td>
+                                <td>number</td>
+                                <td>5</td>
+                                <td>Number of page links to display.</td>
+                            </tr>
+                            <tr>
+                                <td>rowsPerPageOptions</td>
+                                <td>array</td>
+                                <td>null</td>
+                                <td>Array of integer values to display inside rows per page dropdown.</td>
+                            </tr>
+                            <tr>
+                                <td>currentPageReportTemplate</td>
+                                <td>string</td>
+                                <td>({currentPage} of {totalPages})</td>
+                                <td>Template of the current page report element.</td>
+                            </tr>
+                            <tr>
+                                <td>emptyMessage</td>
+                                <td>string</td>
+                                <td>No records found.</td>
+                                <td>Text to display when there is no data.</td>
+                            </tr>
+                            <tr>
+                                <td>sortField</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Name of the field to sort data by default.</td>
+                            </tr>
+                            <tr>
+                                <td>sortOrder</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Order to sort the data by default.</td>
+                            </tr>
+                            <tr>
+                                <td>lazy</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Defines if data is loaded and interacted with in lazy manner.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>
 
+                <h3>Events</h3>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Parameters</th>
+                            <th>Description</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>page</td>
+                                <td>event.page: New page number <br/>
+                                    event.first: Index of first record <br/>
+                                    event.rows: Number of rows to display in new page <br/>
+                                    event.pageCount: Total number of pages 
+                                </td>
+                                <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
 				<h3>Styling</h3>
 				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Element</th>
-						</tr>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>p-dataview</td>
-							<td>Container element.</td>
-						</tr>
-						<tr>
-							<td>p-dataview-list</td>
-							<td>Container element in list layout.</td>
-						</tr>
-						<tr>
-							<td>p-dataview-grid</td>
-							<td>Container element in grid layout.</td>
-						</tr>
-						<tr>
-							<td>p-dataview-header</td>
-							<td>Header section.</td>
-						</tr>
-						<tr>
-							<td>p-dataview-footer</td>
-							<td>Footer section.</td>
-						</tr>
-						<tr>
-							<td>p-dataview-content</td>
-							<td>Container of items.</td>
-						</tr>
+                            <tr>
+                                <td>p-dataview</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-dataview-list</td>
+                                <td>Container element in list layout.</td>
+                            </tr>
+                            <tr>
+                                <td>p-dataview-grid</td>
+                                <td>Container element in grid layout.</td>
+                            </tr>
+                            <tr>
+                                <td>p-dataview-header</td>
+                                <td>Header section.</td>
+                            </tr>
+                            <tr>
+                                <td>p-dataview-footer</td>
+                                <td>Footer section.</td>
+                            </tr>
+                            <tr>
+                                <td>p-dataview-content</td>
+                                <td>Container of items.</td>
+                            </tr>
 						</tbody>
 					</table>
 
@@ -340,70 +373,67 @@ mounted() {
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;template&gt;
-	&lt;div&gt;
-		&lt;div class="content-section introduction"&gt;
-			&lt;div class="feature-intro"&gt;
-				&lt;h1&gt;DataView&lt;/h1&gt;
-				&lt;p&gt;DataView displays data in grid or list layout with pagination and sorting features.&lt;/p&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
+&lt;div&gt;
+    &lt;div class="content-section introduction"&gt;
+        &lt;div class="feature-intro"&gt;
+            &lt;h1&gt;DataView&lt;/h1&gt;
+            &lt;p&gt;DataView displays data in grid or list layout with pagination and sorting features.&lt;/p&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
 
-        &lt;div class="content-section implementation dataview-demo"&gt;
-			&lt;h3 class="first"&gt;Default&lt;/h3&gt;
-			&lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
-				&lt;template #header&gt;
-					&lt;div class="p-grid p-nogutter"&gt;
-						&lt;div class="p-col-6" style="text-align: left"&gt;
-							&lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt;
-						&lt;/div&gt;
-						&lt;div class="p-col-6" style="text-align: right"&gt;
-							&lt;DataViewLayoutOptions v-model="layout" /&gt;
-						&lt;/div&gt;
-					&lt;/div&gt;
-				&lt;/template&gt;
-				&lt;template #listItem="slotProps" &gt;
-					&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
-						&lt;div class="p-grid"&gt;
-							&lt;div class="p-col-12 p-md-3"&gt;
-								&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
-							&lt;/div&gt;
-							&lt;div class="p-col-12 p-md-8 car-details"&gt;
-								&lt;div class="p-grid"&gt;
-									&lt;div class="p-col-12"&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+    &lt;div class="content-section implementation dataview-demo"&gt;
+        &lt;h3 class="first"&gt;Default&lt;/h3&gt;
+        &lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
+            &lt;template #header&gt;
+                &lt;div class="p-grid p-nogutter"&gt;
+                    &lt;div class="p-col-6" style="text-align: left"&gt;
+                        &lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt;
+                    &lt;/div&gt;
+                    &lt;div class="p-col-6" style="text-align: right"&gt;
+                        &lt;DataViewLayoutOptions v-model="layout" /&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/template&gt;
+            &lt;template #list="slotProps" &gt;
+                &lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
+                    &lt;div class="p-grid"&gt;
+                        &lt;div class="p-col-12 p-md-3"&gt;
+                            &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
+                        &lt;/div&gt;
+                        &lt;div class="p-col-12 p-md-8 car-details"&gt;
+                            &lt;div class="p-grid"&gt;
+                                &lt;div class="p-col-12"&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
 
-									&lt;div class="p-col-12"&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt;
+                                &lt;div class="p-col-12"&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt;
 
-									&lt;div class="p-col-12"&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt;
+                                &lt;div class="p-col-12"&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt;
 
-									&lt;div class="p-col-12"&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt;
-								&lt;/div&gt;
-							&lt;/div&gt;
-							&lt;div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px"&gt;
-								&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
-							&lt;/div&gt;
-						&lt;/div&gt;
-					&lt;/div&gt;
-				&lt;/template&gt;
-				&lt;template #gridItem="slotProps"&gt;
-					&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
-						&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
-							&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
-							&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
-							&lt;hr class="ui-widget-content" style="border-top: 0" /&gt;
-							&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
-						&lt;/Panel&gt;
-					&lt;/div&gt;
-				&lt;/template&gt;
-			&lt;/DataView&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/template&gt;
+                                &lt;div class="p-col-12"&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt;
+                            &lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px"&gt;
+                            &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/template&gt;
+            &lt;template #grid="slotProps"&gt;
+                &lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
+                    &lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
+                        &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
+                        &lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
+                        &lt;hr class="ui-widget-content" style="border-top: 0" /&gt;
+                        &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
+                    &lt;/Panel&gt;
+                &lt;/div&gt;
+            &lt;/template&gt;
+        &lt;/DataView&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-<script>
 import CarService from '../../service/CarService';
 
 export default {
@@ -446,7 +476,6 @@ export default {
         }
     }
 }
-</script>
 </CodeHighlight>
 
 <CodeHighlight lang="css">