Responsive demo for DataTable

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;

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;
         }
     }

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;
         }
     }

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;
         }
     }

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" class="p-datatable-responsive">
-			<DataTable :value="cars">
+                <template #header>
-                <Column field="vin" header="Vin"></Column>
+                    Responsive
-                <Column field="year" header="Year"></Column>
+                </template>
-                <Column field="brand" header="Brand"></Column>
+                <Column field="vin" header="Vin">
-                <Column field="color" header="Color"></Column>
+                    <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>
+</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>