From fda68fac9efc61b82556939a78c87c1a82a89eba Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Sun, 11 Aug 2019 14:24:57 +0300 Subject: [PATCH] Docs for TreeTable --- src/components/treetable/TreeTable.vue | 5 + src/views/datatable/DataTableDoc.vue | 4 +- src/views/tree/TreeDoc.vue | 4 +- src/views/treetable/TreeTableDoc.vue | 1369 +++++++++++++++++++----- 4 files changed, 1099 insertions(+), 283 deletions(-) diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue index 893d3051c..d1eece4b5 100644 --- a/src/components/treetable/TreeTable.vue +++ b/src/components/treetable/TreeTable.vue @@ -579,6 +579,11 @@ export default { valueChanged = valueChanged || !localMatch || globalMatch; } + this.$emit('filter', { + filters: this.filters, + filteredValue: filteredNodes + }); + return valueChanged ? filteredNodes : value; }, findFilteredNodes(node, paramsWithoutNode) { diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue index 5cbfafd6f..077f77140 100644 --- a/src/views/datatable/DataTableDoc.vue +++ b/src/views/datatable/DataTableDoc.vue @@ -116,7 +116,7 @@ export default { } -

Column Component Properties

+

Column Component Properties utilized by the DataTable

@@ -857,7 +857,7 @@ export default { - + diff --git a/src/views/tree/TreeDoc.vue b/src/views/tree/TreeDoc.vue index 6a904d974..ad7f6b202 100644 --- a/src/views/tree/TreeDoc.vue +++ b/src/views/tree/TreeDoc.vue @@ -10,7 +10,7 @@ import Tree from 'primevue/tree';

Getting Started

Tree component requires an array of TreeNode objects as its value.

-

TreeNode API

+

TreeNode API utilized by the Tree

pi pi-spinner The icon to show while indicating data load is in progress.
sortField string null
@@ -544,7 +544,7 @@ export default {

Properties

-

Any valid attribute such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.

+

Any valid attribute such as style and class are passed to the underlying root element. Following is the additional property to configure the component.

diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue index 596abce99..a1a0e8ba7 100644 --- a/src/views/treetable/TreeTableDoc.vue +++ b/src/views/treetable/TreeTableDoc.vue @@ -4,13 +4,13 @@

Import

-import Tree from 'primevue/tree'; +import TreeTable from 'primevue/treetable';

Getting Started

-

Tree component requires an array of TreeNode objects as its value.

+

Tree component requires an array of TreeNode objects as its value and columns defined with Column component.

-

TreeNode API

+

TreeNode API utilized by the TreeTable

@@ -28,30 +28,12 @@ import Tree from 'primevue/tree'; - - - - - - - - - - - - - - - - - - @@ -70,12 +52,6 @@ import Tree from 'primevue/tree'; - - - - - - @@ -86,10 +62,14 @@ import Tree from 'primevue/tree';
null Mandatory unique key of the node.
labelstringnullLabel of the node.
data any null Data represented by the node.
typestringnullType of the node to match a template.
iconstringnullIcon of the node to display next to content.
children TreeNode[]null Style class of the node.
selectablebooleannullWhether the node is selectable when selection mode is enabled.
leaf boolean
-

Example below loads the tree nodes from a remote datasource via a service called NodeService.

+

Example below loads the nodes from a remote datasource via a service called NodeService.

@@ -107,7 +87,7 @@ export default { this.nodeService = new NodeService(); }, mounted() { - this.nodeService.getTreeNodes().then(data => this.nodes = data); + this.nodeService.getTreeTableNodes().then(data => this.nodes = data); } } @@ -117,70 +97,516 @@ import axios from 'axios'; export default class NodeService { - getTreeNodes() { - return axios.get('demo/data/treenodes.json').then(res => res.data.root); + getTreeTableNodes() { + return axios.get('demo/data/treetablenodes.json').then(res => res.data.root); } }

The json response sample would be as following.

+ +
{ - "root": [ + "root": + [ { "key": "0", - "label": "Documents", - "data": "Documents Folder", - "icon": "pi pi-fw pi-inbox", - "children": [{ - "key": "0-0", - "label": "Work", - "data": "Work Folder", - "icon": "pi pi-fw pi-cog", - "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }] + "data":{ + "name":"Applications", + "size":"100kb", + "type":"Folder" }, - { - "key": "0-1", - "label": "Home", - "data": "Home Folder", - "icon": "pi pi-fw pi-home", - "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }] - }] + "children":[ + { + "key": "0-0", + "data":{ + "name":"Vue", + "size":"25kb", + "type":"Folder" + }, + "children":[ + { + "key": "0-0-0", + "data":{ + "name":"Vue.app", + "size":"10kb", + "type":"Application" + } + }, + { + "key": "0-0-1", + "data":{ + "name":"native.app", + "size":"10kb", + "type":"Application" + } + }, + { + "key": "0-0-2", + "data":{ + "name":"mobile.app", + "size":"5kb", + "type":"Application" + } + } + ] + }, + { + "key": "0-1", + "data":{ + "name":"editor.app", + "size":"25kb", + "type":"Application" + } + }, + { + "key": "0-2", + "data":{ + "name":"settings.app", + "size":"50kb", + "type":"Application" + } + } + ] }, - { + { "key": "1", - "label": "Events", - "data": "Events Folder", - "icon": "pi pi-fw pi-calendar", - "children": [ - { "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" }, - { "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" }, - { "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }] - }, - { - "key": "2", - "label": "Movies", - "data": "Movies Folder", - "icon": "pi pi-fw pi-star", - "children": [{ - "key": "2-0", - "icon": "pi pi-fw pi-star", - "label": "Al Pacino", - "data": "Pacino Movies", - "children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }] + "data":{ + "name":"Cloud", + "size":"20kb", + "type":"Folder" }, - { - "key": "2-1", - "label": "Robert De Niro", - "icon": "pi pi-fw pi-star", - "data": "De Niro Movies", - "children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }] - }] + "children":[ + { + "key": "1-0", + "data":{ + "name":"backup-1.zip", + "size":"10kb", + "type":"Zip" + } + }, + { + "key": "1-1", + "data":{ + "name":"backup-2.zip", + "size":"10kb", + "type":"Zip" + } + } + ] + }, + { + "key": "2", + "data": { + "name":"Desktop", + "size":"150kb", + "type":"Folder" + }, + "children":[ + { + "key": "2-0", + "data":{ + "name":"note-meeting.txt", + "size":"50kb", + "type":"Text" + } + }, + { + "key": "2-1", + "data":{ + "name":"note-todo.txt", + "size":"100kb", + "type":"Text" + } + } + ] + }, + { + "key": "3", + "data":{ + "name":"Documents", + "size":"75kb", + "type":"Folder" + }, + "children":[ + { + "key": "3-0", + "data":{ + "name":"Work", + "size":"55kb", + "type":"Folder" + }, + "children":[ + { + "key": "3-0-0", + "data":{ + "name":"Expenses.doc", + "size":"30kb", + "type":"Document" + } + }, + { + "key": "3-0-1", + "data":{ + "name":"Resume.doc", + "size":"25kb", + "type":"Resume" + } + } + ] + }, + { + "key": "3-1", + "data":{ + "name":"Home", + "size":"20kb", + "type":"Folder" + }, + "children":[ + { + "key": "3-1-0", + "data":{ + "name":"Invoices", + "size":"20kb", + "type":"Text" + } + } + ] + } + ] + }, + { + "key": "4", + "data": { + "name":"Downloads", + "size":"25kb", + "type":"Folder" + }, + "children":[ + { + "key": "4-0", + "data": { + "name":"Spanish", + "size":"10kb", + "type":"Folder" + }, + "children":[ + { + "key": "4-0-0", + "data":{ + "name":"tutorial-a1.txt", + "size":"5kb", + "type":"Text" + } + }, + { + "key": "4-0-1", + "data":{ + "name":"tutorial-a2.txt", + "size":"5kb", + "type":"Text" + } + } + ] + }, + { + "key": "4-1", + "data":{ + "name":"Travel", + "size":"15kb", + "type":"Text" + }, + "children":[ + { + "key": "4-1-0", + "data":{ + "name":"Hotel.pdf", + "size":"10kb", + "type":"PDF" + } + }, + { + "key": "4-1-1", + "data":{ + "name":"Flight.pdf", + "size":"5kb", + "type":"PDF" + } + } + ] + } + ] + }, + { + "key": "5", + "data": { + "name":"Main", + "size":"50kb", + "type":"Folder" + }, + "children":[ + { + "key": "5-0", + "data":{ + "name":"bin", + "size":"50kb", + "type":"Link" + } + }, + { + "key": "5-1", + "data":{ + "name":"etc", + "size":"100kb", + "type":"Link" + } + }, + { + "key": "5-2", + "data":{ + "name":"var", + "size":"100kb", + "type":"Link" + } + } + ] + }, + { + "key": "6", + "data":{ + "name":"Other", + "size":"5kb", + "type":"Folder" + }, + "children":[ + { + "key": "6-0", + "data":{ + "name":"todo.txt", + "size":"3kb", + "type":"Text" + } + }, + { + "key": "6-1", + "data":{ + "name":"logo.png", + "size":"2kb", + "type":"Picture" + } + } + ] + }, + { + "key": "7", + "data":{ + "name":"Pictures", + "size":"150kb", + "type":"Folder" + }, + "children":[ + { + "key": "7-0", + "data":{ + "name":"barcelona.jpg", + "size":"90kb", + "type":"Picture" + } + }, + { + "key": "7-1", + "data":{ + "name":"primeng.png", + "size":"30kb", + "type":"Picture" + } + }, + { + "key": "7-2", + "data":{ + "name":"prime.jpg", + "size":"30kb", + "type":"Picture" + } + } + ] + }, + { + "key": "8", + "data":{ + "name":"Videos", + "size":"1500kb", + "type":"Folder" + }, + "children":[ + { + "key": "8-0", + "data":{ + "name":"primefaces.mkv", + "size":"1000kb", + "type":"Video" + } + }, + { + "key": "8-1", + "data":{ + "name":"intro.avi", + "size":"500kb", + "type":"Video" + } + } + ] } ] } +
+ +

Dynamic Columns

+

Column components can be dynamically generated using a v-for as well.

+ + + + + + +import NodeService from '../../service/NodeService'; + +export default { + data() { + return { + nodes: null, + columns: null + } + }, + 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); + } +} + + +

Column Component Properties utilized by the TreeTable

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
columnKeyanynullIdentifier of a column if field property is not defined.
expanderbooleanfalseWhether the column would display a toggle icon.
fieldstringnullProperty of a row data.
sortFieldstringnullProperty of a row data used for sorting, defaults to field.
sortableanyfalseDefines if a column is sortable.
headeranynullHeader content of the column.
footeranynullFooter content of the column.
headerStyleobjectnullInline style of the column.
headerClassstringnullStyle class of the column.
bodyStyleobjectnullInline style of the column.
bodyClassstringnullStyle class of the column.
footerStyleobjectnullInline style of the column.
footerClassstringnullStyle class of the column.
filterMatchModestringnullDefines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in" and "custom".
excludeGlobalFilterbooleanfalseWhether to exclude from global filtering or not.
+

Programmatic Control

Tree state can be controlled programmatically with the expandedKeys property that defines the keys @@ -190,11 +616,15 @@ export default class NodeService {

Example below expands and collapses all nodes with buttons.

@@ -213,7 +643,7 @@ export default { this.nodeService = new NodeService(); }, mounted() { - this.nodeService.getTreeNodes().then(data => this.nodes = data); + this.nodeService.getTreeTableNodes().then(data => this.nodes = data); }, methods: { expandAll() { @@ -227,8 +657,9 @@ export default { this.expandedKeys = {}; }, expandNode(node) { - this.expandedKeys[node.key] = true; if (node.children && node.children.length) { + this.expandedKeys[node.key] = true; + for (let child of node.children) { this.expandNode(child); } @@ -254,13 +685,211 @@ export default { this.nodeService = new NodeService(); }, mounted() { - this.nodeService.getTreeNodes().then(data => { + this.nodeService.getTreeTableNodes().then(data => { this.nodes = data; this.expandedKeys[this.nodes[0].key] = true; this.expandedKeys[this.nodes[1].key] = true; }); } } + + +

Templating

+

Field data of a corresponding node is displayed as the cell content by default, this can be customized using a body template where current node data and column properties are passed via the slot props. + On the other hand, header and footer sections of a column can either be defined with the properties or the templates. Similarly TreeTable itself also provides header and footer properties along with the templates for the main header and footer of the table.

+ + + + + +

Pagination

+

Pagination is enabled by setting paginator property to true and defining the rows property defines the number of rows per page. + See the Paginator for the available customization options such as paginator templates, page links, + rows per page options and more which can be passed through the TreeTable.

+ + + + + +

paginatorLeft and paginatorLeft templates are available to specify custom content at the left and right side.

+ + + + +

Paginator can also be programmed programmatically using a binding to the first property that defines the index of the + first element to display. For example setting first to zero will reset the paginator to the very first page. This property + also supports "sync" keyword in case you'd like your binding to be updated whenever the user changes the page.

+ + + + +

Sorting

+

Enabling sortable property at column component would be enough to make a column sortable. + The property to use when sorting is the field by default and can be customized using the sortField.

+ + + + + +

By default sorting is executed on the clicked column only. To enable multiple field sorting, set sortMode property to "multiple" and use metakey when clicking on another column.

+ + + + +

In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use sortField and sortOrder properties. These + two properties also support the "sync" keyword to get updated when the user applies sort a column.

+ + + + +

In multiple mode, use the multiSortMeta property and bind an array of SortMeta objects instead.

+ + + + + +data() { + return { + multiSortMeta: [ + {field: 'year', order: 1}, + {field: 'brand', order: -1} + ] + } +} + + +

Filtering

+

Filtering is enabled by defining a filter template per column to populate the filters property of the TreeTable. The filters + property should be an key-value object where keys are the field name and the value is the filter value. The filter template receives the column properties + via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the filterMatchMode property that also accepts + "contains", "endsWith", "equals", "notEquals" and "in" as available modes.

+

Optionally a global filter is available to search against all the fields, in this case the special global keyword should be the property to be populated.

+ +

In addition filterMode specifies the filtering strategy. In lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, + in strict mode when the query matches a node, filtering continues on all descendants.

+ + + + + +import NodeService from '../../service/NodeService'; + +export default { + data() { + return { + filters: {}, + nodes: null + } + }, + nodeService: null, + created() { + this.nodeService = new NodeService(); + }, + mounted() { + this.nodeService.getTreeTableNodes().then(data => this.nodes = data); + } +}

Selection

@@ -272,21 +901,33 @@ export default { in "checkbox" mode, instead of a boolean, value should be an object that has "checked" and "partialChecked" properties to represent the checked state of a node.

@@ -309,14 +950,14 @@ export default { this.nodeService = new NodeService(); }, mounted() { - this.nodeService.getTreeNodes().then(data => this.nodes = data); + this.nodeService.getTreeTableNodes().then(data => this.nodes = data); }, methods: { onNodeSelect(node) { - this.$toast.add({severity:'success', summary: 'Node Selected', detail: node.label, life: 3000}); + 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.label, life: 3000}); + this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.data.name, life: 3000}); } } } @@ -342,7 +983,7 @@ export default { this.nodeService = new NodeService(); }, mounted() { - this.nodeService.getTreeNodes().then(data => { + this.nodeService.getTreeTableNodes().then(data => { this.nodes = data; //single preselection @@ -360,14 +1001,168 @@ export default {

Lazy

-

Lazy Loading is handy to deal with huge datasets. Idea is instead of loading the whole tree, load child nodes on demand - using expand expand. The important part is setting leaf to true on a node instance so that even without children, +

Lazy Loading is handy to deal with huge datasets. Idea is instead of loading the whole tree, load nodes on demand when necessary. + The important part when lazy loading nodes is setting leaf to true on a node instance so that even without children, tree would render an expand icon. Example below uses an in memory collection to mimic a lazy loading scenario with timeouts.

+

In addition lazy loading of root level nodes is implemented by handling pagination and sorting using page and sort events by making a remote query using the information + passed to the events such as first offset, number of rows and sort field for ordering. Filtering is handled differently as filter elements are defined using templates, use + the event you prefer on your form elements such as input, change, blur to make a remote call by passing the filters property to update the displayed data. Note that, + in lazy filtering, totalRecords should also be updated to align the data with the paginator.

.

+ +

Example below uses an in memory collection to mimic a lazy loading scenario with timeouts.

+ + + + +export default { + data() { + return { + nodes: null, + rows: 10, + loading: false, + totalRecords: 0 + } + }, + 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; + } + } +} + + +

Column Resize

+

Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. + In "expand" mode, table width also changes along with the column width. column-resize-end is a callback that passes the resized column header and delta change as a parameter.

+ + + + +

It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.

+ + + + +

Responsive

+

TreeTable display can be optimized according to screen sizes, this example demonstrates a demo where columns are stacked on small screens.

+ + @@ -377,7 +1172,6 @@ import NodeService from '../../service/NodeService'; export default { data() { return { - loading: false, nodes: null } }, @@ -386,164 +1180,32 @@ export default { this.nodeService = new NodeService(); }, mounted() { - this.loading = true; - - setTimeout(() => { - this.nodes = this.initateNodes(); - this.loading = false; - }, 2000); - }, - methods: { - onNodeExpand(node) { - if (!node.children) { - this.loading = true; - - setTimeout(() => { - let _node = {...node}; - _node.children = []; - - for (let i = 0; i < 3; i++) { - _node.children.push({ - key: node.key + '-' + i, - label: 'Lazy ' + node.label + '-' + i - }); - } - - let _nodes = {...this.nodes} - _nodes[parseInt(node.key, 10)] = _node; - - this.nodes = _nodes; - this.loading = false; - }, 500); - } - }, - initateNodes() { - return [{ - key: '0', - label: 'Node 0', - leaf: false - }, - { - key: '1', - label: 'Node 1', - leaf: false - }, - { - key: '2', - label: 'Node 2', - leaf: false - }]; - } + this.nodeService.getTreeTableNodes().then(data => this.nodes = data); } } -

Templating

-

The type property of a TreeNode is used to map a template to a node to create the node label. If it is undefined and no default template is available, - label of the node is used.

- - - - - -export default { - data() { - return { - nodes: [ - { - key: '0', - label: 'Introduction', - children: [ - {key: '0-0', label: 'What is Vue.js?', data:'https://vuejs.org/v2/guide/#What-is-Vue-js', type: 'url'}, - {key: '0-1', label: 'Getting Started', data: 'https://vuejs.org/v2/guide/#Getting-Started', type: 'url'}, - {key: '0-2', label: 'Declarative Rendering', data:'https://vuejs.org/v2/guide/#Declarative-Rendering', type: 'url'}, - {key: '0-3', label: 'Conditionals and Loops', data: 'https://vuejs.org/v2/guide/#Conditionals-and-Loops', type: 'url'} - ] - }, - { - key: '1', - label: 'Components In-Depth', - children: [ - {key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/v2/guide/components-registration.html', type: 'url'}, - {key: '1-1', llabel: 'Props', data: 'https://vuejs.org/v2/guide/components-props.html', type: 'url'}, - {key: '1-2', llabel: 'Custom Events', data: 'https://vuejs.org/v2/guide/components-custom-events.html', type: 'url'}, - {key: '1-3', llabel: 'Slots', data: 'https://vuejs.org/v2/guide/components-slots.html', type: 'url'} - ] - } - ] - } - } + +.sm-visible { + display: none; } - -

Filtering

-

Filtering is enabled by setting the filter property to true, by default label property of a node - is used to compare against the value in the text field, in order to customize which field(s) should be used during search, define the filterBy property as a comma separated list.

- -

In addition filterMode specifies the filtering strategy. In lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, - in strict mode when the query matches a node, filtering continues on all descendants.

- - - - - - -import NodeService from '../../service/NodeService'; - -export default { - data() { - return { - nodes: null, - expandedKeys: {} +@media screen and (max-width: 40em) { + /deep/ { + .sm-invisible { + display: none; } - }, - nodeService: null, - created() { - this.nodeService = new NodeService(); - }, - mounted() { - this.nodeService.getTreeNodes().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) { - this.expandedKeys[node.key] = true; - if (node.children << node.children.length) { - for (let child of node.children) { - this.expandNode(child); - } - } + .sm-visible { + display: inline; + margin-right: .5em; } } }

Properties

-

Any valid attribute such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.

+

Any valid attribute such as style and class are passed to the underlying root element. Following is the additional property to configure the component.

@@ -567,18 +1229,18 @@ export default { - - - - - - + + + + + + @@ -586,29 +1248,143 @@ export default { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - + + - + - + - + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -617,10 +1393,16 @@ export default { - + + + + + + + - - + +
null A map of keys to represent the state of the tree expansion state in controlled mode.
selectionModestringnullDefines the selection mode, valid values "single", "multiple", and "checkbox".
selectionKeys any null A map of keys to control the selection state.
selectionModestringnullDefines the selection mode, valid values "single", "multiple", and "checkbox".
metaKeySelection booleanDefines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
rowsnumbernullNumber of rows to display per page.
firstnumber0Index of the first row to be displayed.
totalRecordsnumbernullNumber of total records, defaults to length of value when not defined.
paginatorbooleanfalseWhen specified as true, enables the pagination.
paginatorPositionstringbottomPosition of the paginator, options are "top","bottom" or "both".
alwaysShowPaginatorbooleantrueWhether to show it even there is only one page.
paginatorTemplatestringFirstPageLink PrevPageLink PageLinks
NextPageLink LastPageLink RowsPerPageDropdown		Template of the paginator.
paginatorLeftElementnullContent for the left side of the paginator.
paginatorRightElementnullContent for the right side of the paginator.
pageLinkSizenumber5Number of page links to display.
rowsPerPageOptionsarraynullArray of integer values to display inside rows per page dropdown.
currentPageReportTemplatestring({currentPage} of {totalPages})Template of the current page report element.
lazybooleanfalseDefines if data is loaded and interacted with in lazy manner.
loading boolean falseWhether to display loading indicator.Displays a loader to indicate data load is in progress.
loadingIcon stringpi pi-spinIcon to display when tree is loading.pi pi-spinnerThe icon to show while indicating data load is in progress.
filterrowHover boolean falseWhen specified, displays an input field to filter the items.When enabled, background of the rows change on hover.
filterByautoLayoutbooleanfalseWhether the cell widths scale according to their content or not.
sortField stringlabelWhen filtering is enabled, filterBy decides which field or fields (comma separated) to search against.nullName of the field to sort data by default.
sortOrdernumbernullOrder to sort the data by default.
defaultSortOrdernumber1Default sort order of an unsorted column.
multiSortMetaarraynullAn array of SortMeta objects to sort the data by default in multiple sort mode.
sortModestringsingleDefines whether sorting works on single column or on multiple columns.
filtersobjectnullFilters object with key-value pairs to define the filters.
filterModeMode for filtering valid values are "lenient" and "strict". Default is lenient.
filterPlaceholderresizableColumnsbooleanfalseWhen enabled, columns can be resized using drag and drop.
columnResizeMode stringnullPlaceholder text to show when filter input is empty.fitDefines whether the overall table width should change on column resize,
valid values are "fit" and "expand".
@@ -637,6 +1419,29 @@ export default { + + page + event.page: New page number
+ event.first: Index of first record
+ event.rows: Number of rows to display in new page
+ event.pageCount: Total number of pages + + Callback to invoke on pagination. + + + sort + event.originalEvent: Browser event.
+ event.sortField: Field to sort against.
+ event.sortOrder: Sort order as integer.
+ event.multiSortMeta: MultiSort metadata. + Callback to invoke on sort. + + + filter + event.filters: Collection of active filters.
+ event.filteredValue: Filtered collection. + Callback to invoke on filtering. + node-select node: Node instance @@ -656,6 +1461,12 @@ export default { node-collapse node: Node instance Callback to invoke when a node is collapsed. + + + column-resize-end + event.element: DOM element of the resized column.
+ event.delta: Change in column width + Callback to invoke when a column is resized. @@ -673,44 +1484,44 @@ export default { - p-tree - Main container element + p-treetable + Container element. - p-tree-horizontal - Main container element in horizontal mode + p-treetable-header + Header section. - p-tree-container - Container of nodes + p-treetable-footer + Footer section. - p-treenode - A treenode element + p-column-title + Title of a column. - p-treenode-content - Content of a treenode + p-sortable-column + Sortable column header. - p-treenode-toggler - Toggle element + p-treetable-scrollable-header + Container of header in a scrollable table. - p-treenode-toggler-icon - Toggle icon + p-treetable-scrollable-body + Container of body in a scrollable table. - p-treenode-icon - Icon of a treenode + p-treetable-scrollable-footer + Container of footer in a scrollable table. - p-treenode-label - Label of a treenode + p-treetable-emptymessage + Cell containing the empty message. - p-treenode-children - Container element for node children + p-treetable-toggler + Toggler icon.