Responsive demo for TreeTable

src/components/treetable/TreeTable.vue

@@ -916,28 +916,4 @@ export default {
 .p-treetable .p-treetable-loading-icon {
     font-size: 2em;
 }
-
-@media screen and (max-width: 40em) {
-    .p-treetable-responsive .p-treetable-thead > tr > th,
-    .p-treetable-responsive .p-treetable-tfoot > tr > td {
-        display: none !important;
-    }
-
-    .p-treetable-responsive .p-treetable-tbody > tr > td {
-        text-align: left;
-        display: block;
-        border: 0 none;
-        width: 100% !important;
-		float: left;
-		clear: left;
-    }
-
-    .p-treetable-responsive .p-treetable-tbody > tr > td .p-column-title {
-        padding: .4em;
-        min-width: 30%;
-        display: inline-block;
-        margin: -.4em 1em -.4em -.4em;
-        font-weight: bold;
-    }
-}
 </style>

src/components/treetable/TreeTableColumnSlot.vue

@@ -6,7 +6,7 @@ export default {
             type: null,
             default: null
         },
-        data: {
+        node: {
             type: null,
             default: null
         },
@@ -17,7 +17,7 @@ export default {
     },
     render(createElement, context) {
         const content = context.props.column.$scopedSlots[context.props.type]({
-            'data': context.props.data,
+            'node': context.props.node,
             'column': context.props.column
         });
         return [content];

src/components/treetable/TreeTableRow.vue

@@ -12,7 +12,7 @@
                     <span :class="checkboxIcon"></span>
                 </div>
             </div>
-            <TTColumnSlot :data="node" :column="col" type="body" v-if="col.$scopedSlots.body" />
+            <TTColumnSlot :node="node" :column="col" type="body" v-if="col.$scopedSlots.body" />
             <template v-else>{{resolveFieldData(node.data, col.field)}}</template>
         </td>
     </tr>

src/router.js

@@ -420,6 +420,11 @@ export default new Router({
 			path: '/treetable/coltoggle',
 			name: 'treetablecoltoggle',
 			component: () => import('./views/treetable/TreeTableColToggleDemo.vue')
+        },
+        {
+			path: '/treetable/responsive',
+			name: 'treetableresponsive',
+			component: () => import('./views/treetable/TreeTableResponsiveDemo.vue')
         },
 		{
 			path: '/tristatecheckbox',

src/views/datatable/DataTableResponsiveDemo.vue

@@ -5,7 +5,7 @@
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Responsive</h1>
-				<p>DataTable display can be optimized according to screen sizes, this example demonstrates a demo where columns are stacked on small screens.</p>
+				<p>DataTable display can be optimized according for different screen sizes, this example demonstrates a demo where columns are stacked on small screens.</p>
 			</div>
 		</div>
 

src/views/treetable/TreeTableResponsiveDemo.vue

@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <TreeTableSubMenu />
+
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>TreeTable - Responsive</h1>
+                <p>TreeTable display can be optimized according for different screen sizes, this example demonstrates a demo where columns are stacked on small screens.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <TreeTable :value="nodes" class="p-treetable-responsive">
+                <template #header>
+                    Responsive
+                </template>
+                <Column field="name" header="Name" :expander="true">
+                     <template #body="slotProps">
+                        {{slotProps.node.data.name}}
+                        <span class="sm-visible">{{slotProps.node.data.size}}</span>
+                        <span class="sm-visible">{{slotProps.node.data.type}}</span>
+                    </template>
+                </Column>
+                <Column field="size" header="Size" headerClass="sm-invisible" bodyClass="sm-invisible"></Column>
+                <Column field="type" header="Type" headerClass="sm-invisible" bodyClass="sm-invisible"></Column>
+            </TreeTable>
+        </div>
+    </div>
+</template>
+
+<script>
+import NodeService from '../../service/NodeService';
+import TreeTableDoc from './TreeTableDoc';
+import TreeTableSubMenu from './TreeTableSubMenu';
+
+export default {
+    data() {
+        return {
+            nodes: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    components: {
+        'TreeTableDoc': TreeTableDoc,
+        'TreeTableSubMenu': TreeTableSubMenu
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.sm-visible {
+    display: none;
+}
+
+@media screen and (max-width: 40em) {
+    /deep/ {
+        .sm-invisible {
+            display: none;
+        }
+
+        .sm-visible {
+            display: inline;
+            margin-right: .5em;
+        }
+    }
+}
+</style>