From 57af5b27967321784cac884e87736b524599c586 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 15 May 2021 13:31:39 +0300 Subject: [PATCH] Fixed #1261 - Add responsiveLayout property to TreeTable --- api-generator/components/treetable.js | 6 ++ src/components/treetable/TreeTable.d.ts | 1 + src/components/treetable/TreeTable.vue | 10 +- src/views/treetable/TreeTableDoc.vue | 59 +++-------- .../treetable/TreeTableResponsiveDemo.vue | 97 ++++++++++++------- 5 files changed, 90 insertions(+), 83 deletions(-) diff --git a/api-generator/components/treetable.js b/api-generator/components/treetable.js index 337f37964..d71465969 100644 --- a/api-generator/components/treetable.js +++ b/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.' } ]; diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts index 595d72a56..61ab479e4 100755 --- a/src/components/treetable/TreeTable.d.ts +++ b/src/components/treetable/TreeTable.d.ts @@ -39,6 +39,7 @@ interface TreeTableProps { scrollable?: boolean; scrollHeight?: string; scrollDirection?: string; + responsiveLayout?: string; } declare class TreeTable { diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue index ed981a996..887ce5735 100755 --- a/src/components/treetable/TreeTable.vue +++ b/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; } diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue index 59940fb8b..5f99134a5 100755 --- a/src/views/treetable/TreeTableDoc.vue +++ b/src/views/treetable/TreeTableDoc.vue @@ -1271,57 +1271,14 @@ export default {
Responsive
-

TreeTable display can be optimized according to screen sizes, this example demonstrates a demo where columns are stacked on small screens.

+

TreeTable display can be optimized according to screen sizes using the built-in responsiveLayout property. Currently only available option is "scroll" that displays a horizontal scrollbar for small devices.


-
- -

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

-.sm-visible {
-    display: none;
-}
-
-@media screen and (max-width: 40em) {
-    ::v-deep(.sm-visible) {
-        display: inline;
-        margin-right: .5rem;
-    }
-}
-
Properties
@@ -1553,6 +1510,12 @@ export default { string null Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size. + + + responsiveLayout + string + stack + Defines the responsive mode, currently only option is scroll.. diff --git a/src/views/treetable/TreeTableResponsiveDemo.vue b/src/views/treetable/TreeTableResponsiveDemo.vue index d70c7249f..9313b3c90 100755 --- a/src/views/treetable/TreeTableResponsiveDemo.vue +++ b/src/views/treetable/TreeTableResponsiveDemo.vue @@ -3,17 +3,26 @@

TreeTable - Responsive

-

TreeTable display can be optimized according for different screen sizes, this example demonstrates a demo where columns are stacked on small screens.

+

TreeTable display can be optimized according for different screen sizes.

- - +
Scroll
+

Built-in responsiveness using the responsiveLayout property set to scroll.

+ + + + + +
+ +
+
Custom
+

Custom implementation using media queries.

+