browser source for treetable
Tuğçe Küçükoğlu
parent
351ea5a069
commit
695048889d
|
|
@ -129,6 +129,58 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="./NodeService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Fit Mode</h5>
|
||||||
|
<p-treetable :value="nodes" :resizable-columns="true" column-resize-mode="fit" show-gridlines>
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Expand Mode</h5>
|
||||||
|
<p-treetable :value="nodes" :resizable-columns="true" column-resize-mode="expand" show-gridlines>
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
|
||||||
|
})
|
||||||
|
|
||||||
|
const nodes = ref(null);
|
||||||
|
const nodeService = ref(new NodeService());
|
||||||
|
|
||||||
|
return { nodes, nodeService }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -128,6 +128,59 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"><\\/script>
|
||||||
|
<script src="./NodeService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<p-treetable :value="nodes">
|
||||||
|
<template #header>
|
||||||
|
<div style="text-align:left">
|
||||||
|
<p-multiselect :model-value="selectedColumns" @update:model-value="onToggle" :options="columns" option-label="header" placeholder="Select Columns" style="width: 20em"></p-multiselect>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></p-olumn>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
|
||||||
|
})
|
||||||
|
const columns = ref([
|
||||||
|
{field: 'size', header: 'Size'},
|
||||||
|
{field: 'type', header: 'Type'}
|
||||||
|
]);
|
||||||
|
const nodes = ref();
|
||||||
|
const nodeService = ref(new NodeService());
|
||||||
|
const selectedColumns = ref(columns.value);
|
||||||
|
const onToggle = (val) => {
|
||||||
|
selectedColumns.value = columns.value.filter(col => val.includes(col));
|
||||||
|
}
|
||||||
|
|
||||||
|
return { columns, nodes, nodeService, selectedColumns, onToggle }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column,
|
||||||
|
"p-multiselect": primevue.multiselect
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1891,6 +1891,99 @@ export default {
|
||||||
button {
|
button {
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
|
</style>`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="./NodeService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Basic</h5>
|
||||||
|
<p-treetable :value="nodes">
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Dynamic Columns</h5>
|
||||||
|
<p-treetable :value="nodes">
|
||||||
|
<p-column v-for="col of columns" :key="col.field"
|
||||||
|
:field="col.field" :header="col.header" :expander="col.expander"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Programmatic Control</h5>
|
||||||
|
<div style="margin-bottom: 1em">
|
||||||
|
<p-button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></p-button>
|
||||||
|
<p-button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></p-button>
|
||||||
|
</div>
|
||||||
|
<p-treetable :value="nodes" :expanded-keys="expandedKeys">
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
|
||||||
|
})
|
||||||
|
const nodes = ref();
|
||||||
|
const expandedKeys = ref({});
|
||||||
|
const nodeService = ref(new NodeService());
|
||||||
|
const columns = ref([
|
||||||
|
{field: 'name', header: 'Vin', expander: true},
|
||||||
|
{field: 'size', header: 'Size'},
|
||||||
|
{field: 'type', header: 'Type'}
|
||||||
|
]);
|
||||||
|
const expandAll = () => {
|
||||||
|
for (let node of nodes.value) {
|
||||||
|
expandNode(node);
|
||||||
|
}
|
||||||
|
|
||||||
|
expandedKeys.value = {...expandedKeys.value};
|
||||||
|
};
|
||||||
|
const collapseAll = () => {
|
||||||
|
expandedKeys.value = {};
|
||||||
|
};
|
||||||
|
const expandNode = (node) => {
|
||||||
|
if (node.children && node.children.length) {
|
||||||
|
expandedKeys.value[node.key] = true;
|
||||||
|
|
||||||
|
for (let child of node.children) {
|
||||||
|
expandNode(child);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return { nodes, columns, expandedKeys, nodeService, expandAll, collapseAll, expandNode }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column,
|
||||||
|
"p-button": primevue.button
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style >
|
||||||
|
.p-button {
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
</style>`
|
</style>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -267,6 +267,108 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</style>`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="./NodeService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Lenient Filter</h5>
|
||||||
|
<p-treetable :value="nodes" :filters="filters1" filter-mode="lenient">
|
||||||
|
<template #header>
|
||||||
|
<div class="p-text-right">
|
||||||
|
<div class="p-input-icon-left">
|
||||||
|
<i class="pi pi-search"></i>
|
||||||
|
<p-inputtext v-model="filters1['global']" placeholder="Global Search" size="50"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<p-column field="name" header="Name" :expander="true">
|
||||||
|
<template #filter>
|
||||||
|
<p-inputtext type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Filter by name"></p-inputtext>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column field="size" header="Size">
|
||||||
|
<template #filter>
|
||||||
|
<p-inputtext type="text" v-model="filters1['size']" class="p-column-filter" placeholder="Filter by size"></p-inputtext>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column field="type" header="Type">
|
||||||
|
<template #filter>
|
||||||
|
<p-inputtext type="text" v-model="filters1['type']" class="p-column-filter" placeholder="Filter by type"></p-inputtext>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Strict Filter</h5>
|
||||||
|
<p-treetable :value="nodes" :filters="filters2" filter-mode="strict">
|
||||||
|
<template #header>
|
||||||
|
<div class="p-text-right">
|
||||||
|
<div class="p-input-icon-left">
|
||||||
|
<i class="pi pi-search"></i>
|
||||||
|
<p-inputtext v-model="filters2['global']" placeholder="Global Search" size="50"></p-inputtext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<p-column field="name" header="Name" :expander="true">
|
||||||
|
<template #filter>
|
||||||
|
<p-inputtext type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Filter by name"></p-inputtext>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column field="size" header="Size">
|
||||||
|
<template #filter>
|
||||||
|
<p-inputtext type="text" v-model="filters2['size']" class="p-column-filter" placeholder="Filter by size"></p-inputtext>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column field="type" header="Type">
|
||||||
|
<template #filter>
|
||||||
|
<p-inputtext type="text" v-model="filters2['type']" class="p-column-filter" placeholder="Filter by type"></p-inputtext>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
nodeService.value.getTreeTableNodes().then(data => nodes.value = data)
|
||||||
|
})
|
||||||
|
|
||||||
|
const filters1 = ref({});
|
||||||
|
const filters2 = ref({});
|
||||||
|
const nodes = ref();
|
||||||
|
const nodeService = ref(new NodeService());
|
||||||
|
|
||||||
|
return { filters1, filters2, nodes, nodeService }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column,
|
||||||
|
"p-inputtext": primevue.inputtext
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.p-filter-column .p-multiselect,
|
||||||
|
.p-filter-column .p-dropdown,
|
||||||
|
.p-filter-column .p-inputtext {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>`
|
</style>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -240,6 +240,118 @@ export default {
|
||||||
|
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<p-treetable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
|
||||||
|
@node-expand="onExpand" @page="onPage" :total-records="totalRecords">
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
nodes.value = loadNodes(0, rows.value);
|
||||||
|
totalRecords.value = 1000;
|
||||||
|
}, 1000);
|
||||||
|
})
|
||||||
|
const nodes = ref();
|
||||||
|
const rows = ref(10);
|
||||||
|
const loading = ref(false);
|
||||||
|
const totalRecords = ref(0);
|
||||||
|
const onExpand = (node) => {
|
||||||
|
if (!node.children) {
|
||||||
|
loading.value = 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 newNodes = nodes.value.map(n => {
|
||||||
|
if (n.key === node.key) {
|
||||||
|
n = lazyNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
return n;
|
||||||
|
});
|
||||||
|
|
||||||
|
loading.value = false;
|
||||||
|
nodes.value = newNodes;
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onPage = (event) => {
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
//imitate delay of a backend call
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
nodes.value = loadNodes(event.first, rows.value);
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
const 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { nodes, rows, loading, totalRecords, onExpand, onPage, loadNodes }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -127,6 +127,65 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="./NodeService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<p-treetable :value="nodes" :paginator="true" :rows="10">
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
const nodes = ref(files);
|
||||||
|
|
||||||
|
return { nodes }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -183,6 +183,82 @@ export default {
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
</style>`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="./NodeService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Scroll</h5>
|
||||||
|
<p>Built-in responsiveness using the <b>responsiveLayout</b> property set to scroll.</p>
|
||||||
|
<p-treetable :value="nodes" responsive-layout="scroll">
|
||||||
|
<p-column field="name" header="Name" :expander="true" style="min-width:200px"></p-column>
|
||||||
|
<p-column field="size" header="Size" style="min-width:200px"></p-column>
|
||||||
|
<p-column field="type" header="Type" style="min-width:200px"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Custom</h5>
|
||||||
|
<p>Custom implementation using media queries.</p>
|
||||||
|
<p-treetable :value="nodes">
|
||||||
|
<p-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>
|
||||||
|
</p-column>
|
||||||
|
<p-column field="size" header="Size" header-class="sm-invisible" body-class="sm-invisible"></p-column>
|
||||||
|
<p-column field="type" header="Type" header-class="sm-invisible" body-class="sm-invisible"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
|
||||||
|
})
|
||||||
|
|
||||||
|
const nodes = ref();
|
||||||
|
const nodeService = ref(new NodeService());
|
||||||
|
|
||||||
|
return { nodes, nodeService }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.sm-visible {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 40em) {
|
||||||
|
.sm-invisible {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-visible {
|
||||||
|
display: inline;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>`
|
</style>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -331,6 +331,132 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/togglebutton/togglebutton.min.js"><\\/script>
|
||||||
|
<script src="./NodeService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Vertical</h5>
|
||||||
|
<p-treetable :value="nodes" style="margin-bottom: 2rem" :scrollable="true" scroll-height="400px">
|
||||||
|
<p-column field="name" header="Name" :expander="true" style="min-width:200px"></p-column>
|
||||||
|
<p-column field="size" header="Size" style="min-width:200px"></p-column>
|
||||||
|
<p-column field="type" header="Type" style="min-width:200px"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Flexible Scroll</h5>
|
||||||
|
<p>Flex scroll feature makes the scrollable viewport section dynamic insteaf of a fixed value so that it can grow or shrink relative to the parent size of the table.
|
||||||
|
Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.</p>
|
||||||
|
|
||||||
|
<p-button label="Show" icon="pi pi-external-link" @click="openDialog"></p-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p-dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :content-style="{height: '300px'}">
|
||||||
|
<p-treetable :value="nodes" :scrollable="true" scroll-height="flex">
|
||||||
|
<p-column field="name" header="Name" :expander="true" style="min-width:200px"></p-column>
|
||||||
|
<p-column field="size" header="Size" style="min-width:200px"></p-column>
|
||||||
|
<p-column field="type" header="Type" style="min-width:200px"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
<template #footer>
|
||||||
|
<p-button label="Ok" icon="pi pi-check" @click="closeDialog"></p-button>
|
||||||
|
</template>
|
||||||
|
</p-dialog>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Horizontal and Vertical with Footer</h5>
|
||||||
|
<p-treetable :value="nodes" :scrollable="true" scroll-height="400px" scroll-direction="both">
|
||||||
|
<p-column field="name" header="Name" footer="Name" :expander="true" style="width:300px"></p-column>
|
||||||
|
<p-column header="Key" footer="Key" style="width:300px">
|
||||||
|
<template #body="{node}">
|
||||||
|
{{node.key}}
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column field="size" header="Size" footer="Size" style="width:300px"></p-column>
|
||||||
|
<p-column field="type" header="Type" footer="Type" style="width:300px"></p-column>
|
||||||
|
<p-column header="Children" footer="Children" style="width:300px">
|
||||||
|
<template #body="{node}">
|
||||||
|
{{node.children ? node.children.length : 0}}
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column header="Options" footer="Options" style="width:300px">
|
||||||
|
<template #body>
|
||||||
|
<p-button type="Button" icon="pi pi-check" label="Edit" class="p-mr-2"></p-button>
|
||||||
|
<p-button type="Button" icon="pi pi-check" label="Delete" class="p-button-warning"></p-button>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Frozen Columns</h5>
|
||||||
|
<p-togglebutton v-model="optionsFrozen" on-icon="pi pi-lock" off-icon="pi pi-lock-open" on-label="Unfreeze Options" off-label="Freeze Options" style="width: 12rem"></p-togglebutton>
|
||||||
|
|
||||||
|
<p-treetable :value="nodes" :scrollable="true" scroll-height="400px" scroll-direction="both" class="p-mt-3">
|
||||||
|
<p-column field="name" header="Name" :expander="true" style="width:300px" frozen></p-column>
|
||||||
|
<p-column header="Key" style="width:300px">
|
||||||
|
<template #body="{node}">
|
||||||
|
{{node.key}}
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column field="size" header="Size" style="width:300px"></p-column>
|
||||||
|
<p-column field="type" header="Type" style="width:300px"></p-column>
|
||||||
|
<p-column header="Children" style="width:300px">
|
||||||
|
<template #body="{node}">
|
||||||
|
{{node.children ? node.children.length : 0}}
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<p-column header="Options" style="width:200px" alignFrozen="right" :frozen="optionsFrozen">
|
||||||
|
<template #body>
|
||||||
|
<p-button type="Button" icon="pi pi-check" label="Edit Item" class="p-mr-2" style="width:100%"></p-button>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
|
||||||
|
})
|
||||||
|
|
||||||
|
const nodes = ref();
|
||||||
|
const nodeService = ref(new NodeService());
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const optionsFrozen = ref(false);
|
||||||
|
|
||||||
|
const openDialog = () => {
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
const closeDialog = () => {
|
||||||
|
dialogVisible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
return { nodes, openDialog, closeDialog, dialogVisible, optionsFrozen }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column,
|
||||||
|
"p-dialog": primevue.dialog,
|
||||||
|
"p-button": primevue.button,
|
||||||
|
"p-togglebutton": primevue.togglebutton
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -246,6 +246,105 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
|
||||||
|
<script src="./NodeService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<p-toast></p-toast>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Single Selection</h5>
|
||||||
|
<p-treetable :value="nodes" selection-mode="single" v-model:selection-keys="selectedKey1">
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Multiple Selection with MetaKey</h5>
|
||||||
|
<p-treetable :value="nodes" selection-mode="multiple" v-model:selection-keys="selectedKeys1">
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Multiple Selection without MetaKey</h5>
|
||||||
|
<p-treetable :value="nodes" selection-mode="multiple" v-model:selection-keys="selectedKeys2" :meta-key-selection="false">
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Checkbox Selection</h5>
|
||||||
|
<p-treetable :value="nodes" selection-mode="checkbox" v-model:selection-keys="selectedKeys3">
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Events</h5>
|
||||||
|
<p-treetable :value="nodes" selection-mode="single" v-model:selection-keys="selectedKey2"
|
||||||
|
@node-select="onNodeSelect" @node-unselect="onNodeUnselect">
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
const { useToast } = primevue.usetoast;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
|
||||||
|
})
|
||||||
|
|
||||||
|
const toast = useToast();
|
||||||
|
const selectedKey1 = ref();
|
||||||
|
const selectedKey2 = ref();
|
||||||
|
const selectedKeys1 = ref();
|
||||||
|
const selectedKeys2 = ref();
|
||||||
|
const selectedKeys3 = ref();
|
||||||
|
const nodes = ref();
|
||||||
|
const nodeService = ref(new NodeService());
|
||||||
|
const onNodeSelect = (node) => {
|
||||||
|
toast.add({severity:'success', summary: 'Node Selected', detail: node.data.name, life: 3000});
|
||||||
|
}
|
||||||
|
const onNodeUnselect = (node) => {
|
||||||
|
toast.add({severity:'success', summary: 'Node Unselected', detail: node.data.name, life: 3000});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { selectedKey1, selectedKey2, selectedKeys1, selectedKeys2, selectedKeys3, nodes, onNodeSelect, onNodeUnselect}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column,
|
||||||
|
"p-toast": primevue.toast
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.use(primevue.toastservice)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -166,12 +166,79 @@ export default {
|
||||||
})
|
})
|
||||||
|
|
||||||
const nodes = ref();
|
const nodes = ref();
|
||||||
const nodeService = new NodeService();
|
const nodeService = ref(new NodeService());
|
||||||
|
|
||||||
return { nodes, nodeService }
|
return { nodes, nodeService }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="./NodeService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="card">
|
||||||
|
<p-treetable :value="nodes" class="p-treetable-sm" style="margin-bottom: 2rem">
|
||||||
|
<template #header>
|
||||||
|
Small Table
|
||||||
|
</template>
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<p-treetable :value="nodes" style="margin-bottom: 2rem">
|
||||||
|
<template #header>
|
||||||
|
Normal Table
|
||||||
|
</template>
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<p-treetable :value="nodes" class="p-treetable-lg" >
|
||||||
|
<template #header>
|
||||||
|
Large Table
|
||||||
|
</template>
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
|
||||||
|
})
|
||||||
|
|
||||||
|
const nodes = ref();
|
||||||
|
const nodeService = ref(new NodeService());
|
||||||
|
|
||||||
|
return { nodes, nodeService }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -154,6 +154,67 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="./NodeService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Single Column Sorting</h5>
|
||||||
|
<p-treetable :value="nodes" sort-mode="single">
|
||||||
|
<p-column field="name" header="Name" :expander="true" :sortable="true"></p-column>
|
||||||
|
<p-column field="size" header="Size" :sortable="true"></p-column>
|
||||||
|
<p-column field="type" header="Type" :sortable="true"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Multiple Column Sorting</h5>
|
||||||
|
<p-treetable :value="nodes" sort-mode="multiple">
|
||||||
|
<p-column field="name" header="Name" :expander="true" :sortable="true"></p-column>
|
||||||
|
<p-column field="size" header="Size" :sortable="true"></p-column>
|
||||||
|
<p-column field="type" header="Type" :sortable="true"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h5>Removable Sort</h5>
|
||||||
|
<p-treetable :value="nodes" sort-mode="single" removable-sort>
|
||||||
|
<p-column field="name" header="Name" :expander="true" :sortable="true"></p-column>
|
||||||
|
<p-column field="size" header="Size" :sortable="true"></p-column>
|
||||||
|
<p-column field="type" header="Type" :sortable="true"></p-column>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
|
||||||
|
})
|
||||||
|
|
||||||
|
const nodes = ref();
|
||||||
|
const nodeService = ref(new NodeService());
|
||||||
|
|
||||||
|
return { nodes, nodeService }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -145,6 +145,64 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\\/script>
|
<\\/script>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'browser-source': {
|
||||||
|
tabName: 'Browser Source',
|
||||||
|
imports: `<script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"><\\/script>
|
||||||
|
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
|
||||||
|
<script src="./NodeService.js"><\\/script>`,
|
||||||
|
content: `
|
||||||
|
<div id="app">
|
||||||
|
<p-treetable :value="nodes">
|
||||||
|
<template #header>
|
||||||
|
FileSystem
|
||||||
|
</template>
|
||||||
|
<p-column field="name" header="Name" :expander="true"></p-column>
|
||||||
|
<p-column field="size" header="Size"></p-column>
|
||||||
|
<p-column field="type" header="Type"></p-column>
|
||||||
|
<p-column header-style="width: 8em" header-class="p-text-center" body-class="p-text-center">
|
||||||
|
<template #header>
|
||||||
|
<p-button type="button" icon="pi pi-cog"></p-button>
|
||||||
|
</template>
|
||||||
|
<template #body>
|
||||||
|
<p-button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></p-button>
|
||||||
|
<p-button type="button" icon="pi pi-pencil" class="p-button-warning"></p-button>
|
||||||
|
</template>
|
||||||
|
</p-column>
|
||||||
|
<template #footer>
|
||||||
|
<div style="text-align:left">
|
||||||
|
<p-button icon="pi pi-refresh"></p-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</p-treetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const { createApp, ref, onMounted } = Vue;
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
setup() {
|
||||||
|
onMounted(() => {
|
||||||
|
nodeService.value.getTreeTableNodes().then(data => nodes.value = data);
|
||||||
|
})
|
||||||
|
|
||||||
|
const nodes = ref();
|
||||||
|
const nodeService = ref(new NodeService());
|
||||||
|
|
||||||
|
return { nodes, nodeService }
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"p-treetable": primevue.treetable,
|
||||||
|
"p-column": primevue.column,
|
||||||
|
"p-button": primevue.button
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(primevue.config.default)
|
||||||
|
.mount("#app");
|
||||||
|
<\\/script>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue