vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1261 - Add responsiveLayout property to TreeTable

pull/1196/head^2
Cagatay Civici 2021-05-15 13:31:39 +03:00
parent d8fac497c7
commit 57af5b2796
5 changed files with 90 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/treetable.js
View File

@ -214,6 +214,12 @@ const TreeTableProps = [
type: "string", type: "string",
default: "null", default: "null",
description: 'Height of the scroll viewport in fixed units or the "flex" keyword for a dynamic size.' 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.'
} }
]; ];

1
src/components/treetable/TreeTable.d.ts vendored
View File

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

10
src/components/treetable/TreeTable.vue
View File

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

59
src/views/treetable/TreeTableDoc.vue
View File

@ -1271,57 +1271,14 @@ export default {
</code></pre> </code></pre>
<h5>Responsive</h5> <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> <pre v-code><code><template v-pre>
&lt;TreeTable :value="nodes" class="p-treetable-responsive"&gt; &lt;TreeTable :value="nodes" responsiveLayout="scroll"&gt;
&lt;template #header&gt; &lt;Column field="name" header="Name" :expander="true" style="min-width:200px"&gt;&lt;/Column&gt;
Responsive &lt;Column field="size" header="Size" style="min-width:200px"&gt;&lt;/Column&gt;
&lt;/template&gt; &lt;Column field="type" header="Type" style="min-width:200px"&gt;&lt;/Column&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&gt; &lt;/TreeTable&gt;
</template> </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> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
@ -1553,6 +1510,12 @@ export default {
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.</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> </tr>
</tbody> </tbody>
</table> </table>

97
src/views/treetable/TreeTableResponsiveDemo.vue
View File

@ -3,17 +3,26 @@
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>TreeTable - Responsive</h1> <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> </div>
<AppDemoActions /> <AppDemoActions />
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<TreeTable :value="nodes" class="p-treetable-responsive"> <h5>Scroll</h5>
<template #header> <p>Built-in responsiveness using the <b>responsiveLayout</b> property set to scroll.</p>
Responsive <TreeTable :value="nodes" responsiveLayout="scroll">
</template> <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"> <Column field="name" header="Name" :expander="true">
<template #body="slotProps"> <template #body="slotProps">
{{slotProps.node.data.name}} {{slotProps.node.data.name}}
@ -44,20 +53,31 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<TreeTable :value="nodes" class="p-treetable-responsive"> <div class="card">
<template #header> <h5>Scroll</h5>
Responsive <p>Built-in responsiveness using the <b>responsiveLayout</b> property set to scroll.</p>
</template> <TreeTable :value="nodes" responsiveLayout="scroll">
<Column field="name" header="Name" :expander="true"> <Column field="name" header="Name" :expander="true" style="min-width:200px"></Column>
<template #body="slotProps"> <Column field="size" header="Size" style="min-width:200px"></Column>
{{slotProps.node.data.name}} <Column field="type" header="Type" style="min-width:200px"></Column>
<span class="sm-visible">{{slotProps.node.data.size}}</span> </TreeTable>
<span class="sm-visible">{{slotProps.node.data.type}}</span> </div>
</template>
</Column> <div class="card">
<Column field="size" header="Size" headerClass="sm-invisible" bodyClass="sm-invisible"></Column> <h5>Custom</h5>
<Column field="type" header="Type" headerClass="sm-invisible" bodyClass="sm-invisible"></Column> <p>Custom implementation using media queries.</p>
</TreeTable> <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> </div>
</template> </template>
@ -102,20 +122,31 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<TreeTable :value="nodes" class="p-treetable-responsive"> <div class="card">
<template #header> <h5>Scroll</h5>
Responsive <p>Built-in responsiveness using the <b>responsiveLayout</b> property set to scroll.</p>
</template> <TreeTable :value="nodes" responsiveLayout="scroll">
<Column field="name" header="Name" :expander="true"> <Column field="name" header="Name" :expander="true" style="min-width:200px"></Column>
<template #body="slotProps"> <Column field="size" header="Size" style="min-width:200px"></Column>
{{slotProps.node.data.name}} <Column field="type" header="Type" style="min-width:200px"></Column>
<span class="sm-visible">{{slotProps.node.data.size}}</span> </TreeTable>
<span class="sm-visible">{{slotProps.node.data.type}}</span> </div>
</template>
</Column> <div class="card">
<Column field="size" header="Size" headerClass="sm-invisible" bodyClass="sm-invisible"></Column> <h5>Custom</h5>
<Column field="type" header="Type" headerClass="sm-invisible" bodyClass="sm-invisible"></Column> <p>Custom implementation using media queries.</p>
</TreeTable> <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> </div>
</template> </template>