Fixed #1261 - Add responsiveLayout property to TreeTable
Cagatay Civici
parent
d8fac497c7
commit
57af5b2796
|
|
@ -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.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ interface TreeTableProps {
|
|||
scrollable?: boolean;
|
||||
scrollHeight?: string;
|
||||
scrollDirection?: string;
|
||||
responsiveLayout?: string;
|
||||
}
|
||||
|
||||
declare class TreeTable {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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,20 +53,31 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<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 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}}
|
||||
<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>
|
||||
|
||||
|
|
@ -102,20 +122,31 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<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 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}}
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue