From 938462c6678eb6be44f2b5663700522452b30b07 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 9 Jul 2019 16:15:42 +0300
Subject: [PATCH] Responsive demo for DataTable

---
 src/components/datatable/DataTable.vue        | 31 +--------
 src/components/datatable/HeaderCheckbox.vue   |  6 +-
 src/components/datatable/RowCheckbox.vue      |  6 +-
 src/components/datatable/RowRadioButton.vue   |  6 +-
 .../datatable/DataTableResponsiveDemo.vue     | 68 ++++++++++++++++---
 5 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index f900fa68e..cf141c47e 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -830,7 +830,7 @@ export default {
         },
         allRowsSelected() {
             const val = this.processedData;
-            return (this.value && this.value.length > 0 && this.selection && this.selection.length > 0 && this.selection.length === this.value.length);
+            return (val && val.length > 0 && this.selection && this.selection.length > 0 && this.selection.length === val.length);
         }
     },
     components: {
@@ -995,35 +995,6 @@ export default {
     display: none;
 }
 
-/* Responsive */
-.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
-    display: none;
-}
-
-@media screen and (max-width: 40em) {
-    .p-datatable-responsive .p-datatable-thead > tr > th,
-    .p-datatable-responsive .p-datatable-tfoot > tr > td {
-        display: none !important;
-    }
-
-    .p-datatable-responsive .p-datatable-tbody > tr > td {
-        text-align: left;
-        display: block;
-        border: 0 none;
-        width: 100% !important;
-		float: left;
-		clear: left;
-    }
-
-    .p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
-        padding: .4em;
-        min-width: 30%;
-        display: inline-block;
-        margin: -.4em 1em -.4em -.4em;
-        font-weight: bold;
-    }
-}
-
 /* Loader */
 .p-datatable .p-datatable-loading-overlay {
     position: absolute;
diff --git a/src/components/datatable/HeaderCheckbox.vue b/src/components/datatable/HeaderCheckbox.vue
index 3401a9a35..fe8071157 100644
--- a/src/components/datatable/HeaderCheckbox.vue
+++ b/src/components/datatable/HeaderCheckbox.vue
@@ -10,8 +10,6 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
-
 export default {
     inheritAttrs: false,
     props: {
@@ -30,10 +28,10 @@ export default {
                 this.$refs.input.focus();
             }
         },
-        onFocus(event) {
+        onFocus() {
             this.focused = true;
         },
-        onBlur(event) {
+        onBlur() {
             this.focused = false;
         }
     }
diff --git a/src/components/datatable/RowCheckbox.vue b/src/components/datatable/RowCheckbox.vue
index b79bdc023..be13734fe 100644
--- a/src/components/datatable/RowCheckbox.vue
+++ b/src/components/datatable/RowCheckbox.vue
@@ -10,8 +10,6 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
-
 export default {
     inheritAttrs: false,
     props: {
@@ -35,10 +33,10 @@ export default {
                 this.$refs.input.focus();
             }
         },
-        onFocus(event) {
+        onFocus() {
             this.focused = true;
         },
-        onBlur(event) {
+        onBlur() {
             this.focused = false;
         }
     }
diff --git a/src/components/datatable/RowRadioButton.vue b/src/components/datatable/RowRadioButton.vue
index 1c718463b..8ae31a4da 100644
--- a/src/components/datatable/RowRadioButton.vue
+++ b/src/components/datatable/RowRadioButton.vue
@@ -10,8 +10,6 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
-
 export default {
     inheritAttrs: false,
     props: {
@@ -37,10 +35,10 @@ export default {
                 this.$refs.input.focus();
             }
         },
-        onFocus(event) {
+        onFocus() {
             this.focused = true;
         },
-        onBlur(event) {
+        onBlur() {
             this.focused = false;
         }
     }
diff --git a/src/views/datatable/DataTableResponsiveDemo.vue b/src/views/datatable/DataTableResponsiveDemo.vue
index 41f776fa1..cd3e820ba 100644
--- a/src/views/datatable/DataTableResponsiveDemo.vue
+++ b/src/views/datatable/DataTableResponsiveDemo.vue
@@ -5,17 +5,39 @@
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Responsive</h1>
-				<p>DataTable columns are displayed as stacked in responsive mode if the screen size becomes smaller than a certain breakpoint value.</p>
+				<p>DataTable display can be optimized according to screen sizes, this example demonstrates a demo where columns are stacked on small screens.</p>
 			</div>
 		</div>
 
 		<div class="content-section implementation">
-			<h3 class="first">Basic</h3>
-			<DataTable :value="cars">
-                <Column field="vin" header="Vin"></Column>
-                <Column field="year" header="Year"></Column>
-                <Column field="brand" header="Brand"></Column>
-                <Column field="color" header="Color"></Column>
+			<DataTable :value="cars" class="p-datatable-responsive">
+                <template #header>
+                    Responsive
+                </template>
+                <Column field="vin" header="Vin">
+                    <template #body="slotProps">
+                        <span class="p-column-title">Vin</span>
+                        {{slotProps.data.vin}}
+                    </template>
+                </Column>
+                <Column field="year" header="Year">
+                    <template #body="slotProps">
+                        <span class="p-column-title">Year</span>
+                        {{slotProps.data.year}}
+                    </template>
+                </Column>
+                <Column field="brand" header="Brand">
+                    <template #body="slotProps">
+                        <span class="p-column-title">Brand</span>
+                        {{slotProps.data.brand}}
+                    </template>
+                </Column>
+                <Column field="color" header="Color">
+                    <template #body="slotProps">
+                        <span class="p-column-title">Color</span>
+                        {{slotProps.data.color}}
+                    </template>
+                </Column>
             </DataTable>
 		</div>
 	</div>
@@ -42,4 +64,34 @@ export default {
         'DataTableSubMenu': DataTableSubMenu
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
+    display: none;
+}
+
+@media screen and (max-width: 40em) {
+    .p-datatable-responsive .p-datatable-thead > tr > th,
+    .p-datatable-responsive .p-datatable-tfoot > tr > td {
+        display: none !important;
+    }
+
+    .p-datatable-responsive .p-datatable-tbody > tr > td {
+        text-align: left;
+        display: block;
+        border: 0 none;
+        width: 100% !important;
+		float: left;
+		clear: left;
+    }
+
+    .p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
+        padding: .4em;
+        min-width: 30%;
+        display: inline-block;
+        margin: -.4em 1em -.4em -.4em;
+        font-weight: bold;
+    }
+}
+</style>
\ No newline at end of file