browser source for treetable
Tuğçe Küçükoğlu
parent
351ea5a069
commit
695048889d
|
|
@ -129,6 +129,58 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/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>
|
||||
`
|
||||
},
|
||||
'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 {
|
||||
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>`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -267,6 +267,108 @@ export default {
|
|||
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>`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -240,6 +240,118 @@ export default {
|
|||
|
||||
}
|
||||
<\\/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>
|
||||
`
|
||||
},
|
||||
'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;
|
||||
}
|
||||
}
|
||||
</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>`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -331,6 +331,132 @@ export default {
|
|||
}
|
||||
}
|
||||
<\\/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>
|
||||
`
|
||||
},
|
||||
'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 nodeService = new NodeService();
|
||||
const nodeService = ref(new NodeService());
|
||||
|
||||
return { nodes, nodeService }
|
||||
}
|
||||
}
|
||||
<\\/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>
|
||||
`
|
||||
},
|
||||
'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>
|
||||
`
|
||||
},
|
||||
'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