diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 2897bb82d..6ca939745 100644
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -12,7 +12,7 @@
-
@@ -300,4 +300,38 @@ export default {
text-transform: uppercase;
}
}
+
+/* Responsive */
+.p-datatable-customers .p-datatable-tbody > tr > td .p-column-title {
+ display: none;
+}
+
+@media screen and (max-width: 64em) {
+ /deep/ .p-datatable {
+ &.p-datatable-customers {
+ .p-datatable-thead > tr > th,
+ .p-datatable-tfoot > tr > td {
+ display: none !important;
+ }
+
+ .p-datatable-tbody > tr > td {
+ text-align: left;
+ display: block;
+ border: 0 none !important;
+ width: 100% !important;
+ float: left;
+ clear: left;
+ border: 0 none;
+
+ .p-column-title {
+ padding: .4em;
+ min-width: 30%;
+ display: inline-block;
+ margin: -.4em 1em -.4em -.4em;
+ font-weight: bold;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 1fb50927f..b1b454515 100644
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -2604,6 +2604,40 @@ export default {
text-transform: uppercase;
}
}
+
+/* Responsive */
+.p-datatable-customers .p-datatable-tbody > tr > td .p-column-title {
+ display: none;
+}
+
+@media screen and (max-width: 64em) {
+ /deep/ .p-datatable {
+ &.p-datatable-customers {
+ .p-datatable-thead > tr > th,
+ .p-datatable-tfoot > tr > td {
+ display: none !important;
+ }
+
+ .p-datatable-tbody > tr > td {
+ text-align: left;
+ display: block;
+ border: 0 none !important;
+ width: 100% !important;
+ float: left;
+ clear: left;
+ border: 0 none;
+
+ .p-column-title {
+ padding: .4em;
+ min-width: 30%;
+ display: inline-block;
+ margin: -.4em 1em -.4em -.4em;
+ font-weight: bold;
+ }
+ }
+ }
+ }
+}