Fixed #1261 - Add responsiveLayout property to TreeTable

api-generator/components/treetable.js

@@ -214,6 +214,12 @@ const TreeTableProps = [
         type: "string",
         default: "null",
         description: 'Height of the scroll viewport in fixed units or the "flex" keyword for a dynamic size.'
+    },
+    {
+        name: "responsiveLayout",
+        type: "string",
+        default: "null",
+        description: 'Defines the responsive mode, currently only option is scroll.'
     }
 ];
 

src/components/treetable/TreeTable.d.ts

@@ -39,6 +39,7 @@ interface TreeTableProps {
     scrollable?: boolean;
     scrollHeight?: string;
     scrollDirection?: string;
+    responsiveLayout?: string;
 }
 
 declare class TreeTable {

src/components/treetable/TreeTable.vue

@@ -228,6 +228,10 @@ export default {
         scrollHeight: {
             type: String,
             default: null
+        },
+        responsiveLayout: {
+            type: String,
+            default: null
         }
     },
     documentColumnResizeListener: null,
@@ -766,7 +770,8 @@ export default {
                 'p-treetable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
                 'p-treetable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
                 'p-treetable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
-                'p-treetable-flex-scrollable': (this.scrollable && this.scrollHeight === 'flex')
+                'p-treetable-flex-scrollable': (this.scrollable && this.scrollHeight === 'flex'),
+                'p-treetable-responsive-scroll': this.responsiveLayout === 'scroll',
             }];
         },
         columns() {
@@ -891,10 +896,11 @@ export default {
     user-select: none;
 }
 
-.p-treetable-auto-layout > .p-treetable-wrapper {
+.p-treetable-responsive-scroll > .p-treetable-wrapper {
     overflow-x: auto;
 }
 
+.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
 .p-treetable-auto-layout > .p-treetable-wrapper > table {
     table-layout: auto;
 }

src/views/treetable/TreeTableDoc.vue

@@ -1271,57 +1271,14 @@ export default {
 </code></pre>
 
         <h5>Responsive</h5>
-        <p>TreeTable display can be optimized according to screen sizes, this example demonstrates a demo where columns are stacked on small screens.</p>
+        <p>TreeTable display can be optimized according to screen sizes using the built-in <i>responsiveLayout</i> property. Currently only available option is "scroll" that displays a horizontal scrollbar for small devices.</p>
 <pre v-code><code><template v-pre>
-&lt;TreeTable :value="nodes" class="p-treetable-responsive"&gt;
-    &lt;template #header&gt;
-        Responsive
-    &lt;/template&gt;
-    &lt;Column field="name" header="Name" :expander="true"&gt;
-            &lt;template #body="slotProps"&gt;
-            &#123;&#123;slotProps.node.data.name&#125;&#125;
-            &lt;span class="sm-visible"&gt;&#123;&#123;slotProps.node.data.size&#125;&#125;&lt;/span&gt;
-            &lt;span class="sm-visible"&gt;&#123;&#123;slotProps.node.data.type&#125;&#125;&lt;/span&gt;
-        &lt;/template&gt;
-    &lt;/Column&gt;
-    &lt;Column field="size" header="Size" headerClass="sm-invisible" bodyClass="sm-invisible"&gt;&lt;/Column&gt;
-    &lt;Column field="type" header="Type" headerClass="sm-invisible" bodyClass="sm-invisible"&gt;&lt;/Column&gt;
+&lt;TreeTable :value="nodes" responsiveLayout="scroll"&gt;
+    &lt;Column field="name" header="Name" :expander="true" style="min-width:200px"&gt;&lt;/Column&gt;
+    &lt;Column field="size" header="Size" style="min-width:200px"&gt;&lt;/Column&gt;
+    &lt;Column field="type" header="Type" style="min-width:200px"&gt;&lt;/Column&gt;
 &lt;/TreeTable&gt;
 </template>
-</code></pre>
-
-<pre v-code.script><code>
-import NodeService from '../../service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null
-        }
-    },
-    nodeService: null,
-    created() {
-        this.nodeService = new NodeService();
-    },
-    mounted() {
-        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
-    }
-}
-
-</code></pre>
-
-<pre v-code.css><code>
-.sm-visible {
-    display: none;
-}
-
-@media screen and (max-width: 40em) {
-    ::v-deep(.sm-visible) {
-        display: inline;
-        margin-right: .5rem;
-    }
-}
-
 </code></pre>
 
 		<h5>Properties</h5>
@@ -1553,6 +1510,12 @@ export default {
                         <td>string</td>
                         <td>null</td>
                         <td>Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.</td>
+                    </tr>
+                    <tr>
+                        <td>responsiveLayout</td>
+                        <td>string</td>
+                        <td>stack</td>
+                        <td>Defines the responsive mode, currently only option is scroll..</td>
                     </tr>
 				</tbody>
 			</table>

src/views/treetable/TreeTableResponsiveDemo.vue

@@ -3,17 +3,26 @@
         <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>
+                <p>TreeTable display can be optimized according for different screen sizes.</p>
             </div>
             <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
             <div class="card">
-                <TreeTable :value="nodes" class="p-treetable-responsive">
-                    <template #header>
-                        Responsive
-                    </template>
+                <h5>Scroll</h5>
+                <p>Built-in responsiveness using the <b>responsiveLayout</b> property set to scroll.</p>
+                <TreeTable :value="nodes" responsiveLayout="scroll">
+                    <Column field="name" header="Name" :expander="true" style="min-width:200px"></Column>
+                    <Column field="size" header="Size" style="min-width:200px"></Column>
+                    <Column field="type" header="Type" style="min-width:200px"></Column>
+                </TreeTable>
+            </div>
+
+            <div class="card">
+                <h5>Custom</h5>
+                <p>Custom implementation using media queries.</p>
+                <TreeTable :value="nodes">
                     <Column field="name" header="Name" :expander="true">
                         <template #body="slotProps">
                             {{slotProps.node.data.name}}
@@ -44,10 +53,20 @@ export default {
                     content: `
 <template>
     <div>
-        <TreeTable :value="nodes" class="p-treetable-responsive">
-            <template #header>
-                Responsive
-            </template>
+        <div class="card">
+            <h5>Scroll</h5>
+            <p>Built-in responsiveness using the <b>responsiveLayout</b> property set to scroll.</p>
+            <TreeTable :value="nodes" responsiveLayout="scroll">
+                <Column field="name" header="Name" :expander="true" style="min-width:200px"></Column>
+                <Column field="size" header="Size" style="min-width:200px"></Column>
+                <Column field="type" header="Type" style="min-width:200px"></Column>
+            </TreeTable>
+        </div>
+
+        <div class="card">
+            <h5>Custom</h5>
+            <p>Custom implementation using media queries.</p>
+            <TreeTable :value="nodes">
                 <Column field="name" header="Name" :expander="true">
                     <template #body="slotProps">
                         {{slotProps.node.data.name}}
@@ -59,6 +78,7 @@ export default {
                 <Column field="type" header="Type" headerClass="sm-invisible" bodyClass="sm-invisible"></Column>
             </TreeTable>
         </div>
+    </div>                    
 </template>
 
 <script>
@@ -102,10 +122,20 @@ export default {
                     content: `
 <template>
     <div>
-        <TreeTable :value="nodes" class="p-treetable-responsive">
-            <template #header>
-                Responsive
-            </template>
+        <div class="card">
+            <h5>Scroll</h5>
+            <p>Built-in responsiveness using the <b>responsiveLayout</b> property set to scroll.</p>
+            <TreeTable :value="nodes" responsiveLayout="scroll">
+                <Column field="name" header="Name" :expander="true" style="min-width:200px"></Column>
+                <Column field="size" header="Size" style="min-width:200px"></Column>
+                <Column field="type" header="Type" style="min-width:200px"></Column>
+            </TreeTable>
+        </div>
+
+        <div class="card">
+            <h5>Custom</h5>
+            <p>Custom implementation using media queries.</p>
+            <TreeTable :value="nodes">
                 <Column field="name" header="Name" :expander="true">
                     <template #body="slotProps">
                         {{slotProps.node.data.name}}
@@ -117,6 +147,7 @@ export default {
                 <Column field="type" header="Type" headerClass="sm-invisible" bodyClass="sm-invisible"></Column>
             </TreeTable>
         </div>
+    </div>                    
 </template>
 
 <script>