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 {
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.
-<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 :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>
-
-
-
-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;
- }
-}
-
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.
Built-in responsiveness using the responsiveLayout property set to scroll.
+Custom implementation using media queries.
+Built-in responsiveness using the responsiveLayout property set to scroll.
+Custom implementation using media queries.
+Built-in responsiveness using the responsiveLayout property set to scroll.
+Custom implementation using media queries.
+