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

csb for treetable

pull/880/head
Tuğçe Küçükoğlu 2021-01-22 11:23:03 +03:00
parent fe6395600d
commit d35247bc48
11 changed files with 860 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/views/treetable/TreeTableColResizeDemo.vue
View File

@ -31,6 +31,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;h3&gt;Fit Mode&lt;/h3&gt;
@ -78,6 +81,40 @@ export default {
<script>
import NodeService from '../../service/NodeService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
nodes: null,
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Fit Mode</h5>
<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit" class="p-treetable-gridlines">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
<div class="card">
<h5>Expand Mode</h5>
<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" class="p-treetable-gridlines">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</div>
</div>
</template>
<script>
import NodeService from '../service/NodeService';
export default {
data() {
@ -93,4 +130,20 @@ export default {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
}
}
`
}
}
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
},
mounted() {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
},
components: {
LiveEditor
}
}
</script>

61
src/views/treetable/TreeTableColToggleDemo.vue
View File

@ -24,6 +24,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'MultiSelect']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;TreeTable :value="nodes"&gt;
@ -81,6 +84,36 @@ export default {
<script>
import NodeService from '../../service/NodeService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
selectedColumns: null,
columns: null,
nodes: null,
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<TreeTable :value="nodes">
<template #header>
<div style="text-align:left">
<MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" placeholder="Select Columns" style="width: 20em"/>
</div>
</template>
<Column field="name" header="Name" :expander="true"></Column>
<Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
</TreeTable>
</div>
</div>
</div>
</template>
<script>
import NodeService from '../service/NodeService';
export default {
data() {
@ -110,4 +143,32 @@ export default {
}
}
}
`
}
}
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
this.columns = [
{field: 'size', header: 'Size'},
{field: 'type', header: 'Type'}
];
this.selectedColumns = this.columns;
},
mounted() {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
},
methods: {
onToggle(value) {
this.selectedColumns = this.columns.filter(col => value.includes(col));
}
},
components: {
LiveEditor
}
}
</script>

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

@ -1639,9 +1639,12 @@ export default {
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/treetable" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'Button']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
@ -1723,3 +1726,110 @@ export default {
</TabView>
</div>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<TreeTable :value="nodes">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
<div class="card">
<h5>Dynamic Columns</h5>
<TreeTable :value="nodes">
<Column v-for="col of columns" :key="col.field"
:field="col.field" :header="col.header" :expander="col.expander"></Column>
</TreeTable>
</div>
<div class="card">
<h5>Programmatic Control</h5>
<div style="margin-bottom: 1em">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
<TreeTable :value="nodes" :expandedKeys="expandedKeys">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</div>
<TreeTableDoc />
</div>
</template>
<script>
import NodeService from '../service/NodeService';
export default {
data() {
return {
nodes: null,
columns: null,
expandedKeys: {}
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
this.columns = [
{field: 'name', header: 'Vin', expander: true},
{field: 'size', header: 'Size'},
{field: 'type', header: 'Type'}
];
},
mounted() {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
},
methods: {
expandAll() {
for (let node of this.nodes) {
this.expandNode(node);
}
this.expandedKeys = {...this.expandedKeys};
},
collapseAll() {
this.expandedKeys = {};
},
expandNode(node) {
if (node.children && node.children.length) {
this.expandedKeys[node.key] = true;
for (let child of node.children) {
this.expandNode(child);
}
}
}
}
}
`,
style: `<style scoped>
button {
margin-right: .5rem;
}
</style>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

102
src/views/treetable/TreeTableFilterDemo.vue
View File

@ -70,6 +70,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'InputText']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;div class="card"&gt;
@ -163,6 +166,82 @@ export default {
<script>
import NodeService from '../../service/NodeService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
filters1: {},
filters2: {},
nodes: null,
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Lenient Filter</h5>
<TreeTable :value="nodes" :filters="filters1" filterMode="lenient">
<template #header>
<div class="p-text-right">
<div class="p-input-icon-left">
<i class="pi pi-search"></i>
<InputText v-model="filters1['global']" placeholder="Global Search" size="50" />
</div>
</div>
</template>
<Column field="name" header="Name" :expander="true">
<template #filter>
<InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Filter by name" />
</template>
</Column>
<Column field="size" header="Size">
<template #filter>
<InputText type="text" v-model="filters1['size']" class="p-column-filter" placeholder="Filter by size"/>
</template>
</Column>
<Column field="type" header="Type">
<template #filter>
<InputText type="text" v-model="filters1['type']" class="p-column-filter" placeholder="Filter by type"/>
</template>
</Column>
</TreeTable>
</div>
<div class="card">
<h5>Strict Filter</h5>
<TreeTable :value="nodes" :filters="filters2" filterMode="strict">
<template #header>
<div class="p-text-right">
<div class="p-input-icon-left">
<i class="pi pi-search"></i>
<InputText v-model="filters2['global']" placeholder="Global Search" size="50" />
</div>
</div>
</template>
<Column field="name" header="Name" :expander="true">
<template #filter>
<InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Filter by name" />
</template>
</Column>
<Column field="size" header="Size">
<template #filter>
<InputText type="text" v-model="filters2['size']" class="p-column-filter" placeholder="Filter by size" />
</template>
</Column>
<Column field="type" header="Type">
<template #filter>
<InputText type="text" v-model="filters2['type']" class="p-column-filter" placeholder="Filter by type" />
</template>
</Column>
</TreeTable>
</div>
</div>
</div>
</template>
<script>
import NodeService from '../service/NodeService';
export default {
data() {
@ -180,6 +259,29 @@ export default {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
}
}
`,
style: `<style scoped lang="scss">
.p-filter-column {
.p-multiselect, .p-dropdown, .p-inputtext {
width: 100%;
}
}
</style>`
}
}
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
},
mounted() {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
},
components: {
LiveEditor
}
}
</script>
<style scoped lang="scss">

115
src/views/treetable/TreeTableLazyDemo.vue
View File

@ -22,6 +22,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="TreeTableDemo" :sources="sources" :components="['Column']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
@ -130,6 +133,33 @@ export default {
</div>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
nodes: null,
rows: 10,
loading: false,
totalRecords: 0,
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
@node-expand="onExpand" @page="onPage" :totalRecords="totalRecords">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
@ -217,4 +247,89 @@ export default {
}
}
}
`
}
}
}
},
mounted() {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.nodes = this.loadNodes(0, this.rows);
this.totalRecords = 1000;
}, 1000);
},
methods: {
onExpand(node) {
if (!node.children) {
this.loading = true;
setTimeout(() => {
let lazyNode = {...node};
lazyNode.children = [
{
data: {
name: lazyNode.data.name + ' - 0',
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'File'
},
},
{
data: {
name: lazyNode.data.name + ' - 1',
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'File'
}
}
];
let nodes = this.nodes.map(n => {
if (n.key === node.key) {
n = lazyNode;
}
return n;
});
this.loading = false;
this.nodes = nodes;
}, 250);
}
},
onPage(event) {
this.loading = true;
//imitate delay of a backend call
setTimeout(() => {
this.loading = false;
this.nodes = this.loadNodes(event.first, this.rows);
}, 1000);
},
loadNodes(first, rows) {
let nodes = [];
for(let i = 0; i < rows; i++) {
let node = {
key: (first + i),
data: {
name: 'Item ' + (first + i),
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'Type ' + (first + i)
},
leaf: false
};
nodes.push(node);
}
return nodes;
}
},
components: {
LiveEditor
}
}
</script>

62
src/views/treetable/TreeTablePaginatorDemo.vue
View File

@ -20,6 +20,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="TreeTableDemo" :sources="sources" :components="['Column']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;TreeTable :value="nodes" :paginator="true" :rows="10"&gt;
@ -74,6 +77,29 @@ export default {
</div>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
nodes: null,
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<TreeTable :value="nodes" :paginator="true" :rows="10">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
@ -109,4 +135,40 @@ export default {
this.nodes = files;
}
}
`
}
}
}
},
created() {
let files = [];
for(let i = 0; i < 50; i++) {
let node = {
key: i,
data: {
name: 'Item ' + i,
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'Type ' + i
},
children: [
{
key: i + ' - 0',
data: {
name: 'Item ' + i + ' - 0',
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
type: 'Type ' + i
}
}
]
};
files.push(node);
}
this.nodes = files;
},
components: {
LiveEditor
}
}
</script>

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

@ -29,6 +29,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;TreeTable :value="nodes" class="p-treetable-responsive"&gt;
@ -92,6 +95,39 @@ export default {
<script>
import NodeService from '../../service/NodeService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
nodes: null,
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<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>
</div>
</div>
</template>
<script>
import NodeService from '../service/NodeService';
export default {
data() {
@ -107,6 +143,38 @@ export default {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
}
}
`,
style: `<style scoped lang="scss">
.sm-visible {
display: none;
}
@media screen and (max-width: 40em) {
::v-deep(.sm-invisible) {
display: none;
}
::v-deep(.sm-visible) {
display: inline;
margin-right: .5rem;
}
}
</style>`
}
}
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
},
mounted() {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
},
components: {
LiveEditor
}
}
</script>
<style scoped lang="scss">

95
src/views/treetable/TreeTableSelectionDemo.vue
View File

@ -58,6 +58,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;h3&gt;Single Selection&lt;/h3&gt;
@ -139,6 +142,74 @@ export default {
<script>
import NodeService from '../../service/NodeService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
selectedKey1: null,
selectedKey2: null,
selectedKeys1: null,
selectedKeys2: null,
selectedKeys3: null,
nodes: null,
sources: {
'template': {
content: `<template>
<div class="layout-content">
<Toast />
<div class="content-section implementation">
<div class="card">
<h5>Single Selection</h5>
<TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
<div class="card">
<h5>Multiple Selection with MetaKey</h5>
<TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
<div class="card">
<h5>Multiple Selection without MetaKey</h5>
<TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
<div class="card">
<h5>Checkbox Selection</h5>
<TreeTable :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
<div class="card">
<h5>Events</h5>
<TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2"
@node-select="onNodeSelect" @node-unselect="onNodeUnselect">
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</div>
</div>
</template>
<script>
import NodeService from '../service/NodeService';
export default {
data() {
@ -167,4 +238,28 @@ export default {
}
}
}
`
}
}
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
},
mounted() {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
},
methods: {
onNodeSelect(node) {
this.$toast.add({severity:'success', summary: 'Node Selected', detail: node.data.name, life: 3000});
},
onNodeUnselect(node) {
this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.data.name, life: 3000});
}
},
components: {
LiveEditor
}
}
</script>

68
src/views/treetable/TreeTableSizeDemo.vue
View File

@ -45,6 +45,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'Button']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;TreeTable :value="nodes" class="p-treetable-sm" style="margin-bottom: 2rem"&gt;
@ -104,11 +107,60 @@ export default {
<script>
import NodeService from '../../service/NodeService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
nodes: null,
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<TreeTable :value="nodes" class="p-treetable-sm" style="margin-bottom: 2rem">
<template #header>
Small Table
</template>
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
<div class="card">
<TreeTable :value="nodes" style="margin-bottom: 2rem">
<template #header>
Normal Table
</template>
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
<div class="card">
<TreeTable :value="nodes" class="p-treetable-lg" >
<template #header>
Large Table
</template>
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
</TreeTable>
</div>
</div>
</div>
</template>
<script>
import NodeService from '../service/NodeService';
export default {
data() {
return {
nodes: null
}
},
nodeService: null,
@ -119,4 +171,20 @@ export default {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
}
}
`
}
}
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
},
mounted() {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
},
components: {
LiveEditor
}
}
</script>

62
src/views/treetable/TreeTableSortDemo.vue
View File

@ -39,6 +39,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;h3&gt;Single Column Sorting&lt;/h3&gt;
@ -93,6 +96,49 @@ export default {
<script>
import NodeService from '../../service/NodeService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
nodes: null,
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Single Column Sorting</h5>
<TreeTable :value="nodes" sortMode="single">
<Column field="name" header="Name" :expander="true" :sortable="true"></Column>
<Column field="size" header="Size" :sortable="true"></Column>
<Column field="type" header="Type" :sortable="true"></Column>
</TreeTable>
</div>
<div class="card">
<h5>Multiple Column Sorting</h5>
<TreeTable :value="nodes" sortMode="multiple">
<Column field="name" header="Name" :expander="true" :sortable="true"></Column>
<Column field="size" header="Size" :sortable="true"></Column>
<Column field="type" header="Type" :sortable="true"></Column>
</TreeTable>
</div>
<div class="card">
<h5>Removable Sort</h5>
<TreeTable :value="nodes" sortMode="single" removableSort>
<Column field="name" header="Name" :expander="true" :sortable="true"></Column>
<Column field="size" header="Size" :sortable="true"></Column>
<Column field="type" header="Type" :sortable="true"></Column>
</TreeTable>
</div>
</div>
</div>
</template>
<script>
import NodeService from '../service/NodeService';
export default {
data() {
@ -108,4 +154,20 @@ export default {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
}
}
`
}
}
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
},
mounted() {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
},
components: {
LiveEditor
}
}
</script>

60
src/views/treetable/TreeTableTemplatingDemo.vue
View File

@ -37,6 +37,9 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex p-jc-end">
<LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'Button']" />
</div>
<pre v-code>
<code><template v-pre>
&lt;TreeTable :value="nodes"&gt;
@ -92,6 +95,47 @@ export default {
<script>
import NodeService from '../../service/NodeService';
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
nodes: null,
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<TreeTable :value="nodes">
<template #header>
FileSystem
</template>
<Column field="name" header="Name" :expander="true"></Column>
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
<Column headerStyle="width: 8em" headerClass="p-text-center" bodyClass="p-text-center">
<template #header>
<Button type="button" icon="pi pi-cog"></Button>
</template>
<template #body>
<Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
<Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
</template>
</Column>
<template #footer>
<div style="text-align:left">
<Button icon="pi pi-refresh" />
</div>
</template>
</TreeTable>
</div>
</div>
</div>
</template>
<script>
import NodeService from '../service/NodeService';
export default {
data() {
@ -107,4 +151,20 @@ export default {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
}
}
`
}
}
}
},
nodeService: null,
created() {
this.nodeService = new NodeService();
},
mounted() {
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
},
components: {
LiveEditor
}
}
</script>