primevue 3.16.2 → 3.18.0

package/treetable/treetable.esm.js

@@ -6,7 +6,7 @@ import Paginator from 'primevue/paginator';
 
 var script$4 = {
     name: 'BodyCell',
-    emits: ['node-toggle','checkbox-toggle'],
+    emits: ['node-toggle', 'checkbox-toggle'],
     props: {
         node: {
             type: Object,
@@ -49,7 +49,7 @@ var script$4 = {
         return {
             styleObject: {},
             checkboxFocused: false
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -71,20 +71,24 @@ var script$4 = {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
             }
@@ -104,15 +108,19 @@ var script$4 = {
     },
     computed: {
         containerClass() {
-            return [this.columnProp('bodyClass'), this.columnProp('class'), {
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('bodyClass'),
+                this.columnProp('class'),
+                {
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('bodyStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
         },
         togglerStyle() {
             return {
@@ -121,20 +129,20 @@ var script$4 = {
             };
         },
         togglerIcon() {
-            return ['p-treetable-toggler-icon pi', {'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded}];
+            return ['p-treetable-toggler-icon pi', { 'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded }];
         },
         checkboxSelectionMode() {
             return this.selectionMode === 'checkbox';
         },
         checkboxClass() {
-            return ['p-checkbox-box', {'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked}];
+            return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
         },
         checkboxIcon() {
-            return ['p-checkbox-icon', {'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked}];
+            return ['p-checkbox-icon', { 'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked }];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
 };
 
@@ -168,7 +176,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     ($options.checkboxSelectionMode && $options.columnProp('expander'))
       ? (openBlock(), createElementBlock("div", {
           key: 1,
-          class: normalizeClass(['p-checkbox p-treetable-checkbox p-component', {'p-checkbox-focused': $data.checkboxFocused}]),
+          class: normalizeClass(['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': $data.checkboxFocused }]),
           onClick: _cache[3] || (_cache[3] = (...args) => ($options.toggleCheckbox && $options.toggleCheckbox(...args))),
           role: "checkbox",
           "aria-checked": $props.checked
@@ -204,7 +212,7 @@ script$4.render = render$4;
 
 var script$3 = {
     name: 'TreeTableRow',
-    emits: ['node-click', 'node-toggle', 'checkbox-change','nodeClick', 'nodeToggle', 'checkboxChange'],
+    emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange'],
     props: {
         node: {
             type: null,
@@ -248,16 +256,15 @@ var script$3 = {
             this.$emit('node-toggle', this.node);
         },
         onClick(event) {
-            if (DomHandler.isClickable(event.target) ||
-                DomHandler.hasClass(event.target, 'p-treetable-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
+            if (DomHandler.isClickable(event.target) || DomHandler.hasClass(event.target, 'p-treetable-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
                 return;
             }
 
             this.$emit('node-click', {
-                    originalEvent: event,
-                    nodeTouched: this.nodeTouched,
-                    node: this.node
-                });
+                originalEvent: event,
+                nodeTouched: this.nodeTouched,
+                node: this.node
+            });
 
             this.nodeTouched = false;
         },
@@ -272,6 +279,7 @@ var script$3 = {
                     //down arrow
                     case 40: {
                         const nextRow = rowElement.nextElementSibling;
+
                         if (nextRow) {
                             nextRow.focus();
                         }
@@ -283,6 +291,7 @@ var script$3 = {
                     //up arrow
                     case 38: {
                         const previousRow = rowElement.previousElementSibling;
+
                         if (previousRow) {
                             previousRow.focus();
                         }
@@ -293,11 +302,13 @@ var script$3 = {
 
                     //right-left arrows
                     case 37:
+
                     case 39: {
                         if (!this.leaf) {
                             this.$emit('node-toggle', this.node);
                             event.preventDefault();
                         }
+
                         break;
                     }
 
@@ -311,7 +322,7 @@ var script$3 = {
             }
         },
         toggleCheckbox() {
-            let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
+            let _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
             const _check = !this.checked;
 
             this.propagateDown(this.node, _check, _selectionKeys);
@@ -323,10 +334,8 @@ var script$3 = {
             });
         },
         propagateDown(node, check, selectionKeys) {
-            if (check)
-                selectionKeys[node.key] = {checked: true, partialChecked: false};
-            else
-                delete selectionKeys[node.key];
+            if (check) selectionKeys[node.key] = { checked: true, partialChecked: false };
+            else delete selectionKeys[node.key];
 
             if (node.children && node.children.length) {
                 for (let child of node.children) {
@@ -336,29 +345,24 @@ var script$3 = {
         },
         propagateUp(event) {
             let check = event.check;
-            let _selectionKeys = {...event.selectionKeys};
+            let _selectionKeys = { ...event.selectionKeys };
             let checkedChildCount = 0;
             let childPartialSelected = false;
 
-            for(let child of this.node.children) {
-                if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
-                    checkedChildCount++;
-                else if(_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked)
-                    childPartialSelected = true;
+            for (let child of this.node.children) {
+                if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;
+                else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
             }
 
-            if(check && checkedChildCount === this.node.children.length) {
-                _selectionKeys[this.node.key] = {checked: true, partialChecked: false};
-            }
-            else {
+            if (check && checkedChildCount === this.node.children.length) {
+                _selectionKeys[this.node.key] = { checked: true, partialChecked: false };
+            } else {
                 if (!check) {
                     delete _selectionKeys[this.node.key];
                 }
 
-                if(childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length))
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: true};
-                else
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: false};
+                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };
+                else _selectionKeys[this.node.key] = { checked: false, partialChecked: false };
             }
 
             this.$emit('checkbox-change', {
@@ -369,29 +373,24 @@ var script$3 = {
         },
         onCheckboxChange(event) {
             let check = event.check;
-            let _selectionKeys = {...event.selectionKeys};
+            let _selectionKeys = { ...event.selectionKeys };
             let checkedChildCount = 0;
             let childPartialSelected = false;
 
-            for(let child of this.node.children) {
-                if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
-                    checkedChildCount++;
-                else if(_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked)
-                    childPartialSelected = true;
+            for (let child of this.node.children) {
+                if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;
+                else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;
             }
 
-            if(check && checkedChildCount === this.node.children.length) {
-                _selectionKeys[this.node.key] = {checked: true, partialChecked: false};
-            }
-            else {
+            if (check && checkedChildCount === this.node.children.length) {
+                _selectionKeys[this.node.key] = { checked: true, partialChecked: false };
+            } else {
                 if (!check) {
                     delete _selectionKeys[this.node.key];
                 }
 
-                if(childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length))
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: true};
-                else
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: false};
+                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };
+                else _selectionKeys[this.node.key] = { checked: false, partialChecked: false };
             }
 
             this.$emit('checkbox-change', {
@@ -403,9 +402,12 @@ var script$3 = {
     },
     computed: {
         containerClass() {
-            return [this.node.styleClass, {
-                'p-highlight': this.selected
-            }]
+            return [
+                this.node.styleClass,
+                {
+                    'p-highlight': this.selected
+                }
+            ];
         },
         hasChildren() {
             return this.node.children && this.node.children.length > 0;
@@ -417,20 +419,20 @@ var script$3 = {
             return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
         },
         selected() {
-            return (this.selectionMode && this.selectionKeys) ? this.selectionKeys[this.node.key] === true : false;
+            return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.node.key] === true : false;
         },
         childLevel() {
             return this.level + 1;
         },
         checked() {
-            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked: false;
+            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked : false;
         },
         partialChecked() {
-            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked: false;
+            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked : false;
         }
     },
     components: {
-        'TTBodyCell': script$4
+        TTBodyCell: script$4
     }
 };
 
@@ -449,7 +451,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
         return (openBlock(), createElementBlock(Fragment, {
-          key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||i
+          key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
         }, [
           (!$options.columnProp(col, 'hidden'))
             ? (openBlock(), createBlock(_component_TTBodyCell, {
@@ -495,7 +497,7 @@ script$3.render = render$3;
 
 var script$2 = {
     name: 'HeaderCell',
-    emits: ['column-click','column-resizestart'],
+    emits: ['column-click', 'column-resizestart'],
     props: {
         column: {
             type: Object,
@@ -525,7 +527,7 @@ var script$2 = {
     data() {
         return {
             styleObject: {}
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -544,37 +546,43 @@ var script$2 = {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
 
                 let filterRow = this.$el.parentElement.nextElementSibling;
+
                 if (filterRow) {
                     let index = DomHandler.index(this.$el);
+
                     filterRow.children[index].style.left = this.styleObject.left;
                     filterRow.children[index].style.right = this.styleObject.right;
                 }
             }
         },
         onClick(event) {
-            this.$emit('column-click', {originalEvent: event, column: this.column});
+            this.$emit('column-click', { originalEvent: event, column: this.column });
         },
         onKeyDown(event) {
             if (event.which === 13 && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
-                this.$emit('column-click', {originalEvent: event, column: this.column});
+                this.$emit('column-click', { originalEvent: event, column: this.column });
             }
         },
         onResizeStart(event) {
@@ -585,6 +593,7 @@ var script$2 = {
 
             for (let i = 0; i < this.multiSortMeta.length; i++) {
                 let meta = this.multiSortMeta[i];
+
                 if (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')) {
                     index = i;
                     break;
@@ -594,26 +603,30 @@ var script$2 = {
             return index;
         },
         isMultiSorted() {
-            return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1
+            return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1;
         },
         isColumnSorted() {
-            return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'))) : this.isMultiSorted();
+            return this.sortMode === 'single' ? this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField')) : this.isMultiSorted();
         }
     },
     computed: {
         containerClass() {
-            return [this.columnProp('headerClass'), this.columnProp('class'), {
-                'p-sortable-column': this.columnProp('sortable'),
-                'p-resizable-column': this.resizableColumns,
-                'p-highlight': this.isColumnSorted(),
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('headerClass'),
+                this.columnProp('class'),
+                {
+                    'p-sortable-column': this.columnProp('sortable'),
+                    'p-resizable-column': this.resizableColumns,
+                    'p-highlight': this.isColumnSorted(),
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let headerStyle = this.columnProp('headerStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject]: [columnStyle, headerStyle];
+            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
         },
         sortableColumnIcon() {
             let sorted = false;
@@ -621,10 +634,10 @@ var script$2 = {
 
             if (this.sortMode === 'single') {
                 sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));
-                sortOrder = sorted ? this.sortOrder: 0;
-            }
-            else if (this.sortMode === 'multiple') {
+                sortOrder = sorted ? this.sortOrder : 0;
+            } else if (this.sortMode === 'multiple') {
                 let metaIndex = this.getMultiSortMetaIndex();
+
                 if (metaIndex > -1) {
                     sorted = true;
                     sortOrder = this.multiSortMeta[metaIndex].order;
@@ -632,7 +645,8 @@ var script$2 = {
             }
 
             return [
-                'p-sortable-column-icon pi pi-fw', {
+                'p-sortable-column-icon pi pi-fw',
+                {
                     'pi-sort-alt': !sorted,
                     'pi-sort-amount-up-alt': sorted && sortOrder > 0,
                     'pi-sort-amount-down': sorted && sortOrder < 0
@@ -642,17 +656,14 @@ var script$2 = {
         ariaSort() {
             if (this.columnProp('sortable')) {
                 const sortIcon = this.sortableColumnIcon;
-                if (sortIcon[1]['pi-sort-amount-down'])
-                    return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt'])
-                    return 'ascending';
-                else
-                    return 'none';
-            }
-            else {
+
+                if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
+                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                else return 'none';
+            } else {
                 return null;
             }
-        },
+        }
     }
 };
 
@@ -716,7 +727,7 @@ var script$1 = {
     data() {
         return {
             styleObject: {}
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -735,20 +746,24 @@ var script$1 = {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
             }
@@ -756,15 +771,19 @@ var script$1 = {
     },
     computed: {
         containerClass() {
-            return [this.columnProp('footerClass'), this.columnProp('class'), {
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('footerClass'),
+                this.columnProp('class'),
+                {
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('footerStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
         }
     }
 };
@@ -788,8 +807,23 @@ script$1.render = render$1;
 
 var script = {
     name: 'TreeTable',
-    emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect',
-        'update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'column-resize-end'],
+    emits: [
+        'node-expand',
+        'node-collapse',
+        'update:expandedKeys',
+        'update:selectionKeys',
+        'node-select',
+        'node-unselect',
+        'update:first',
+        'update:rows',
+        'page',
+        'update:sortField',
+        'update:sortOrder',
+        'update:multiSortMeta',
+        'sort',
+        'filter',
+        'column-resize-end'
+    ],
     props: {
         value: {
             type: null,
@@ -929,7 +963,7 @@ var script = {
         },
         scrollDirection: {
             type: String,
-            default: "vertical"
+            default: 'vertical'
         },
         scrollHeight: {
             type: String,
@@ -951,8 +985,8 @@ var script = {
             d_rows: this.rows,
             d_sortField: this.sortField,
             d_sortOrder: this.sortOrder,
-            d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
-        }
+            d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : []
+        };
     },
     watch: {
         expandedKeys(newValue) {
@@ -994,13 +1028,12 @@ var script = {
             if (this.d_expandedKeys[key]) {
                 delete this.d_expandedKeys[key];
                 this.$emit('node-collapse', node);
-            }
-            else {
+            } else {
                 this.d_expandedKeys[key] = true;
                 this.$emit('node-expand', node);
             }
 
-            this.d_expandedKeys = {...this.d_expandedKeys};
+            this.d_expandedKeys = { ...this.d_expandedKeys };
             this.$emit('update:expandedKeys', this.d_expandedKeys);
         },
         onNodeClick(event) {
@@ -1014,27 +1047,24 @@ var script = {
         handleSelectionWithMetaKey(event) {
             const originalEvent = event.originalEvent;
             const node = event.node;
-            const metaKey = (originalEvent.metaKey||originalEvent.ctrlKey);
+            const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
             const selected = this.isNodeSelected(node);
             let _selectionKeys;
 
             if (selected && metaKey) {
                 if (this.isSingleSelectionMode()) {
                     _selectionKeys = {};
-                }
-                else {
-                    _selectionKeys = {...this.selectionKeys};
+                } else {
+                    _selectionKeys = { ...this.selectionKeys };
                     delete _selectionKeys[node.key];
                 }
 
                 this.$emit('node-unselect', node);
-            }
-            else {
+            } else {
                 if (this.isSingleSelectionMode()) {
                     _selectionKeys = {};
-                }
-                else if (this.isMultipleSelectionMode()) {
-                    _selectionKeys = !metaKey ? {} : (this.selectionKeys ? {...this.selectionKeys} : {});
+                } else if (this.isMultipleSelectionMode()) {
+                    _selectionKeys = !metaKey ? {} : this.selectionKeys ? { ...this.selectionKeys } : {};
                 }
 
                 _selectionKeys[node.key] = true;
@@ -1052,22 +1082,19 @@ var script = {
                 if (selected) {
                     _selectionKeys = {};
                     this.$emit('node-unselect', node);
-                }
-                else {
+                } else {
                     _selectionKeys = {};
                     _selectionKeys[node.key] = true;
                     this.$emit('node-select', node);
                 }
-            }
-            else {
+            } else {
                 if (selected) {
-                    _selectionKeys = {...this.selectionKeys};
+                    _selectionKeys = { ...this.selectionKeys };
                     delete _selectionKeys[node.key];
 
                     this.$emit('node-unselect', node);
-                }
-                else {
-                    _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
+                } else {
+                    _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
                     _selectionKeys[node.key] = true;
 
                     this.$emit('node-select', node);
@@ -1079,10 +1106,8 @@ var script = {
         onCheckboxChange(event) {
             this.$emit('update:selectionKeys', event.selectionKeys);
 
-            if (event.check)
-                this.$emit('node-select', event.node);
-            else
-                this.$emit('node-unselect', event.node);
+            if (event.check) this.$emit('node-select', event.node);
+            else this.$emit('node-unselect', event.node);
         },
         isSingleSelectionMode() {
             return this.selectionMode === 'single';
@@ -1095,6 +1120,7 @@ var script = {
             this.d_rows = event.rows;
 
             let pageEvent = this.createLazyLoadEvent(event);
+
             pageEvent.pageCount = event.pageCount;
             pageEvent.page = event.page;
 
@@ -1107,9 +1133,13 @@ var script = {
             this.$emit('update:first', this.d_first);
         },
         getFilterColumnHeaderClass(column) {
-            return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), {
-                'p-frozen-column': this.columnProp(column, 'frozen')
-            }];
+            return [
+                'p-filter-column',
+                this.columnProp(column, 'filterHeaderClass'),
+                {
+                    'p-frozen-column': this.columnProp(column, 'frozen')
+                }
+            ];
         },
         onColumnHeaderClick(e) {
             let event = e.originalEvent;
@@ -1119,21 +1149,23 @@ var script = {
                 const targetNode = event.target;
                 const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
 
-                if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
-                    || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
+                if (
+                    DomHandler.hasClass(targetNode, 'p-sortable-column') ||
+                    DomHandler.hasClass(targetNode, 'p-column-title') ||
+                    DomHandler.hasClass(targetNode, 'p-sortable-column-icon') ||
+                    DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')
+                ) {
                     DomHandler.clearSelection();
 
                     if (this.sortMode === 'single') {
                         if (this.d_sortField === columnField) {
-                            if (this.removableSort && (this.d_sortOrder * -1 === this.defaultSortOrder)) {
+                            if (this.removableSort && this.d_sortOrder * -1 === this.defaultSortOrder) {
                                 this.d_sortOrder = null;
                                 this.d_sortField = null;
-                            }
-                            else {
+                            } else {
                                 this.d_sortOrder = this.d_sortOrder * -1;
                             }
-                        }
-                        else {
+                        } else {
                             this.d_sortOrder = this.defaultSortOrder;
                             this.d_sortField = columnField;
                         }
@@ -1141,11 +1173,11 @@ var script = {
                         this.$emit('update:sortField', this.d_sortField);
                         this.$emit('update:sortOrder', this.d_sortOrder);
                         this.resetPage();
-                    }
-                    else if (this.sortMode === 'multiple') {
+                    } else if (this.sortMode === 'multiple') {
                         let metaKey = event.metaKey || event.ctrlKey;
+
                         if (!metaKey) {
-                            this.d_multiSortMeta =  this.d_multiSortMeta.filter(meta => meta.field === columnField);
+                            this.d_multiSortMeta = this.d_multiSortMeta.filter((meta) => meta.field === columnField);
                         }
 
                         this.addMultiSortField(columnField);
@@ -1157,16 +1189,13 @@ var script = {
             }
         },
         addMultiSortField(field) {
-            let index =  this.d_multiSortMeta.findIndex(meta => meta.field === field);
+            let index = this.d_multiSortMeta.findIndex((meta) => meta.field === field);
 
             if (index >= 0) {
-                if (this.removableSort && (this.d_multiSortMeta[index].order * -1 === this.defaultSortOrder))
-                    this.d_multiSortMeta.splice(index, 1);
-                else
-                    this.d_multiSortMeta[index] = {field: field, order: this.d_multiSortMeta[index].order * -1};
-            }
-            else {
-                this.d_multiSortMeta.push({field: field, order: this.defaultSortOrder});
+                if (this.removableSort && this.d_multiSortMeta[index].order * -1 === this.defaultSortOrder) this.d_multiSortMeta.splice(index, 1);
+                else this.d_multiSortMeta[index] = { field: field, order: this.d_multiSortMeta[index].order * -1 };
+            } else {
+                this.d_multiSortMeta.push({ field: field, order: this.defaultSortOrder });
             }
 
             this.d_multiSortMeta = [...this.d_multiSortMeta];
@@ -1182,18 +1211,13 @@ var script = {
                 const value2 = ObjectUtils.resolveFieldData(node2.data, this.d_sortField);
                 let result = null;
 
-                if (value1 == null && value2 != null)
-                    result = -1;
-                else if (value1 != null && value2 == null)
-                    result = 1;
-                else if (value1 == null && value2 == null)
-                    result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string')
-                    result = value1.localeCompare(value2, undefined, { numeric: true });
-                else
-                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
-
-                return (this.d_sortOrder * result);
+                if (value1 == null && value2 != null) result = -1;
+                else if (value1 != null && value2 == null) result = 1;
+                else if (value1 == null && value2 == null) result = 0;
+                else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+
+                return this.d_sortOrder * result;
             });
 
             return _nodes;
@@ -1203,6 +1227,7 @@ var script = {
         },
         sortNodesMultiple(nodes) {
             let _nodes = [...nodes];
+
             _nodes.sort((node1, node2) => {
                 return this.multisortField(node1, node2, 0);
             });
@@ -1214,32 +1239,26 @@ var script = {
             const value2 = ObjectUtils.resolveFieldData(node2.data, this.d_multiSortMeta[index].field);
             let result = null;
 
-            if (value1 == null && value2 != null)
-                result = -1;
-            else if (value1 != null && value2 == null)
-                result = 1;
-            else if (value1 == null && value2 == null)
-                result = 0;
+            if (value1 == null && value2 != null) result = -1;
+            else if (value1 != null && value2 == null) result = 1;
+            else if (value1 == null && value2 == null) result = 0;
             else {
-                if (value1 === value2)  {
-                    return (this.d_multiSortMeta.length - 1) > (index) ? (this.multisortField(node1, node2, index + 1)) : 0;
-                }
-                else {
-                    if ((typeof value1 === 'string' || value1 instanceof String) && (typeof value2 === 'string' || value2 instanceof String))
-                        return (this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true }));
-                    else
-                        result = (value1 < value2) ? -1 : 1;
+                if (value1 === value2) {
+                    return this.d_multiSortMeta.length - 1 > index ? this.multisortField(node1, node2, index + 1) : 0;
+                } else {
+                    if ((typeof value1 === 'string' || value1 instanceof String) && (typeof value2 === 'string' || value2 instanceof String)) return this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true });
+                    else result = value1 < value2 ? -1 : 1;
                 }
             }
 
-            return (this.d_multiSortMeta[index].order * result);
+            return this.d_multiSortMeta[index].order * result;
         },
         filter(value) {
             let filteredNodes = [];
             const strict = this.filterMode === 'strict';
 
             for (let node of value) {
-                let copyNode = {...node};
+                let copyNode = { ...node };
                 let localMatch = true;
                 let globalMatch = false;
 
@@ -1252,11 +1271,13 @@ var script = {
                         let filterMatchMode = this.columnProp(col, 'filterMatchMode') || 'startsWith';
                         let filterValue = this.filters[this.columnProp(col, 'field')];
                         let filterConstraint = FilterService.filters[filterMatchMode];
-                        let paramsWithoutNode = {filterField, filterValue, filterConstraint, strict};
+                        let paramsWithoutNode = { filterField, filterValue, filterConstraint, strict };
 
-                        if ((strict && !(this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
-                            (!strict && !(this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode)))) {
-                                localMatch = false;
+                        if (
+                            (strict && !(this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
+                            (!strict && !(this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode)))
+                        ) {
+                            localMatch = false;
                         }
 
                         if (!localMatch) {
@@ -1266,20 +1287,23 @@ var script = {
 
                     //global
                     if (this.hasGlobalFilter() && !globalMatch) {
-                        let copyNodeForGlobal = {...copyNode};
+                        let copyNodeForGlobal = { ...copyNode };
                         let filterValue = this.filters['global'];
                         let filterConstraint = FilterService.filters['contains'];
-                        let globalFilterParamsWithoutNode = {filterField, filterValue, filterConstraint, strict};
-
-                        if ((strict && (this.findFilteredNodes(copyNodeForGlobal, globalFilterParamsWithoutNode) || this.isFilterMatched(copyNodeForGlobal, globalFilterParamsWithoutNode))) ||
-                            (!strict && (this.isFilterMatched(copyNodeForGlobal, globalFilterParamsWithoutNode) || this.findFilteredNodes(copyNodeForGlobal, globalFilterParamsWithoutNode)))) {
-                                globalMatch = true;
-                                copyNode = copyNodeForGlobal;
+                        let globalFilterParamsWithoutNode = { filterField, filterValue, filterConstraint, strict };
+
+                        if (
+                            (strict && (this.findFilteredNodes(copyNodeForGlobal, globalFilterParamsWithoutNode) || this.isFilterMatched(copyNodeForGlobal, globalFilterParamsWithoutNode))) ||
+                            (!strict && (this.isFilterMatched(copyNodeForGlobal, globalFilterParamsWithoutNode) || this.findFilteredNodes(copyNodeForGlobal, globalFilterParamsWithoutNode)))
+                        ) {
+                            globalMatch = true;
+                            copyNode = copyNodeForGlobal;
                         }
                     }
                 }
 
                 let matches = localMatch;
+
                 if (this.hasGlobalFilter()) {
                     matches = localMatch && globalMatch;
                 }
@@ -1290,6 +1314,7 @@ var script = {
             }
 
             let filterEvent = this.createLazyLoadEvent(event);
+
             filterEvent.filteredValue = filteredNodes;
             this.$emit('filter', filterEvent);
 
@@ -1298,11 +1323,15 @@ var script = {
         findFilteredNodes(node, paramsWithoutNode) {
             if (node) {
                 let matched = false;
+
                 if (node.children) {
                     let childNodes = [...node.children];
+
                     node.children = [];
+
                     for (let childNode of childNodes) {
-                        let copyChildNode = {...childNode};
+                        let copyChildNode = { ...childNode };
+
                         if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
                             matched = true;
                             node.children.push(copyChildNode);
@@ -1315,30 +1344,32 @@ var script = {
                 }
             }
         },
-        isFilterMatched(node, {filterField, filterValue, filterConstraint, strict}) {
+        isFilterMatched(node, { filterField, filterValue, filterConstraint, strict }) {
             let matched = false;
             let dataFieldValue = ObjectUtils.resolveFieldData(node.data, filterField);
+
             if (filterConstraint(dataFieldValue, filterValue, this.filterLocale)) {
                 matched = true;
             }
 
             if (!matched || (strict && !this.isNodeLeaf(node))) {
-                matched = this.findFilteredNodes(node, {filterField, filterValue, filterConstraint, strict}) || matched;
+                matched = this.findFilteredNodes(node, { filterField, filterValue, filterConstraint, strict }) || matched;
             }
 
             return matched;
         },
         isNodeSelected(node) {
-            return (this.selectionMode && this.selectionKeys) ? this.selectionKeys[node.key] === true : false;
+            return this.selectionMode && this.selectionKeys ? this.selectionKeys[node.key] === true : false;
         },
         isNodeLeaf(node) {
             return node.leaf === false ? false : !(node.children && node.children.length);
         },
         createLazyLoadEvent(event) {
             let filterMatchModes;
+
             if (this.hasFilters()) {
                 filterMatchModes = {};
-                this.columns.forEach(col => {
+                this.columns.forEach((col) => {
                     if (this.columnProp(col, 'field')) {
                         filterMatchModes[col.props.field] = this.columnProp(col, 'filterMatchMode');
                     }
@@ -1358,26 +1389,28 @@ var script = {
         },
         onColumnResizeStart(event) {
             let containerLeft = DomHandler.getOffset(this.$el).left;
+
             this.resizeColumnElement = event.target.parentElement;
             this.columnResizing = true;
-            this.lastResizeHelperX = (event.pageX - containerLeft + this.$el.scrollLeft);
+            this.lastResizeHelperX = event.pageX - containerLeft + this.$el.scrollLeft;
 
             this.bindColumnResizeEvents();
         },
         onColumnResize(event) {
             let containerLeft = DomHandler.getOffset(this.$el).left;
+
             DomHandler.addClass(this.$el, 'p-unselectable-text');
             this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px';
             this.$refs.resizeHelper.style.top = 0 + 'px';
-            this.$refs.resizeHelper.style.left = (event.pageX - containerLeft + this.$el.scrollLeft) + 'px';
+            this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px';
 
             this.$refs.resizeHelper.style.display = 'block';
         },
         onColumnResizeEnd() {
- let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
+            let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
             let columnWidth = this.resizeColumnElement.offsetWidth;
             let newColumnWidth = columnWidth + delta;
-            let minWidth = this.resizeColumnElement.style.minWidth||15;
+            let minWidth = this.resizeColumnElement.style.minWidth || 15;
 
             if (columnWidth + delta > parseInt(minWidth, 10)) {
                 if (this.columnResizeMode === 'fit') {
@@ -1387,22 +1420,19 @@ var script = {
                     if (newColumnWidth > 15 && nextColumnWidth > 15) {
                         if (!this.scrollable) {
                             this.resizeColumnElement.style.width = newColumnWidth + 'px';
-                            if(nextColumn) {
+
+                            if (nextColumn) {
                                 nextColumn.style.width = nextColumnWidth + 'px';
                             }
-                        }
-                        else {
+                        } else {
                             this.resizeTableCells(newColumnWidth, nextColumnWidth);
                         }
                     }
-                }
-                else if (this.columnResizeMode === 'expand') {
+                } else if (this.columnResizeMode === 'expand') {
                     this.$refs.table.style.width = this.$refs.table.offsetWidth + delta + 'px';
 
-                    if (!this.scrollable)
-                        this.resizeColumnElement.style.width = newColumnWidth + 'px';
-                    else
-                        this.resizeTableCells(newColumnWidth);
+                    if (!this.scrollable) this.resizeColumnElement.style.width = newColumnWidth + 'px';
+                    else this.resizeTableCells(newColumnWidth);
                 }
 
                 this.$emit('column-resize-end', {
@@ -1420,13 +1450,16 @@ var script = {
         resizeTableCells(newColumnWidth, nextColumnWidth) {
             let colIndex = DomHandler.index(this.resizeColumnElement);
             let children = this.$refs.table.children;
+
             for (let child of children) {
                 for (let row of child.children) {
                     let resizeCell = row.children[colIndex];
+
                     resizeCell.style.flex = '0 0 ' + newColumnWidth + 'px';
 
                     if (this.columnResizeMode === 'fit') {
                         let nextCell = resizeCell.nextElementSibling;
+
                         if (nextCell) {
                             nextCell.style.flex = '0 0 ' + nextColumnWidth + 'px';
                         }
@@ -1437,7 +1470,7 @@ var script = {
         bindColumnResizeEvents() {
             if (!this.documentColumnResizeListener) {
                 this.documentColumnResizeListener = document.addEventListener('mousemove', () => {
-                    if(this.columnResizing) {
+                    if (this.columnResizing) {
                         this.onColumnResize(event);
                     }
                 });
@@ -1445,13 +1478,12 @@ var script = {
 
             if (!this.documentColumnResizeEndListener) {
                 this.documentColumnResizeEndListener = document.addEventListener('mouseup', () => {
-                    if(this.columnResizing) {
+                    if (this.columnResizing) {
                         this.columnResizing = false;
                         this.onColumnResizeEnd();
                     }
                 });
             }
-
         },
         unbindColumnResizeEvents() {
             if (this.documentColumnResizeListener) {
@@ -1461,7 +1493,7 @@ var script = {
 
             if (this.documentColumnResizeEndListener) {
                 document.removeEventListener('document', this.documentColumnResizeEndListener);
-                 this.documentColumnResizeEndListener = null;
+                this.documentColumnResizeEndListener = null;
             }
         },
         onColumnKeyDown(event, col) {
@@ -1492,29 +1524,30 @@ var script = {
     },
     computed: {
         containerClass() {
-            return ['p-treetable p-component', {
-                'p-treetable-hoverable-rows': (this.rowHover || this.rowSelectionMode),
-                'p-treetable-auto-layout': this.autoLayout,
-                'p-treetable-resizable': this.resizableColumns,
-                'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
-                'p-treetable-gridlines': this.showGridlines,
-                'p-treetable-scrollable': this.scrollable,
-                'p-treetable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
-                'p-treetable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
-                'p-treetable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
-                'p-treetable-flex-scrollable': (this.scrollable && this.scrollHeight === 'flex'),
-                'p-treetable-responsive-scroll': this.responsiveLayout === 'scroll',
-            }];
+            return [
+                'p-treetable p-component',
+                {
+                    'p-treetable-hoverable-rows': this.rowHover || this.rowSelectionMode,
+                    'p-treetable-auto-layout': this.autoLayout,
+                    'p-treetable-resizable': this.resizableColumns,
+                    'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
+                    'p-treetable-gridlines': this.showGridlines,
+                    'p-treetable-scrollable': this.scrollable,
+                    'p-treetable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
+                    'p-treetable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
+                    'p-treetable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
+                    'p-treetable-flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
+                    'p-treetable-responsive-scroll': this.responsiveLayout === 'scroll'
+                }
+            ];
         },
         columns() {
             let cols = [];
             let children = this.$slots.default();
 
-            children.forEach(child => {
-                if (child.children && child.children instanceof Array)
-                    cols = [...cols, ...child.children];
-                else if (child.type.name === 'Column')
-                    cols.push(child);
+            children.forEach((child) => {
+                if (child.children && child.children instanceof Array) cols = [...cols, ...child.children];
+                else if (child.type.name === 'Column') cols.push(child);
             });
 
             return cols;
@@ -1522,16 +1555,13 @@ var script = {
         processedData() {
             if (this.lazy) {
                 return this.value;
-            }
-            else {
+            } else {
                 if (this.value && this.value.length) {
                     let data = this.value;
 
                     if (this.sorted) {
-                        if(this.sortMode === 'single')
-                            data = this.sortSingle(data);
-                        else if(this.sortMode === 'multiple')
-                            data = this.sortMultiple(data);
+                        if (this.sortMode === 'single') data = this.sortSingle(data);
+                        else if (this.sortMode === 'multiple') data = this.sortMultiple(data);
                     }
 
                     if (this.hasFilters()) {
@@ -1539,8 +1569,7 @@ var script = {
                     }
 
                     return data;
-                }
-                else {
+                } else {
                     return null;
                 }
             }
@@ -1550,15 +1579,16 @@ var script = {
 
             if (this.paginator) {
                 const first = this.lazy ? 0 : this.d_first;
+
                 return data.slice(first, first + this.d_rows);
-            }
-            else {
+            } else {
                 return data;
             }
         },
         empty() {
             const data = this.processedData;
-            return (!data || data.length === 0);
+
+            return !data || data.length === 0;
         },
         sorted() {
             return this.d_sortField || (this.d_multiSortMeta && this.d_multiSortMeta.length > 0);
@@ -1567,7 +1597,7 @@ var script = {
             let hasFooter = false;
 
             for (let col of this.columns) {
-                if (this.columnProp(col, 'footer')|| (col.children && col.children.footer)) {
+                if (this.columnProp(col, 'footer') || (col.children && col.children.footer)) {
                     hasFooter = true;
                     break;
                 }
@@ -1593,9 +1623,9 @@ var script = {
         totalRecordsLength() {
             if (this.lazy) {
                 return this.totalRecords;
-            }
-            else {
+            } else {
                 const data = this.processedData;
+
                 return data ? data.length : 0;
             }
         },
@@ -1604,10 +1634,10 @@ var script = {
         }
     },
     components: {
-        'TTRow': script$3,
-        'TTPaginator': Paginator,
-        'TTHeaderCell': script$2,
-        'TTFooterCell': script$1
+        TTRow: script$3,
+        TTPaginator: Paginator,
+        TTHeaderCell: script$2,
+        TTFooterCell: script$1
     }
 };
 
@@ -1686,7 +1716,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 name: "start",
                 fn: withCtx(() => [
                   renderSlot(_ctx.$slots, "paginatorstart")
-                ])
+                ]),
+                key: "0"
               }
             : undefined,
           (_ctx.$slots.paginatorend)
@@ -1694,21 +1725,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 name: "end",
                 fn: withCtx(() => [
                   renderSlot(_ctx.$slots, "paginatorend")
-                ])
+                ]),
+                key: "1"
               }
             : undefined
         ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
       : createCommentVNode("", true),
     createElementVNode("div", {
       class: "p-treetable-wrapper",
-      style: normalizeStyle({maxHeight: $props.scrollHeight})
+      style: normalizeStyle({ maxHeight: $props.scrollHeight })
     }, [
       createElementVNode("table", _hoisted_4, [
         createElementVNode("thead", _hoisted_5, [
           createElementVNode("tr", null, [
             (openBlock(true), createElementBlock(Fragment, null, renderList($options.columns, (col, i) => {
               return (openBlock(), createElementBlock(Fragment, {
-                key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||i
+                key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
               }, [
                 (!$options.columnProp(col, 'hidden'))
                   ? (openBlock(), createBlock(_component_TTHeaderCell, {
@@ -1730,13 +1762,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ? (openBlock(), createElementBlock("tr", _hoisted_6, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList($options.columns, (col, i) => {
                   return (openBlock(), createElementBlock(Fragment, {
-                    key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||i
+                    key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
                   }, [
                     (!$options.columnProp(col, 'hidden'))
                       ? (openBlock(), createElementBlock("th", {
                           key: 0,
                           class: normalizeClass($options.getFilterColumnHeaderClass(col)),
-                          style: normalizeStyle([$options.columnProp(col, 'style'),$options.columnProp(col, 'filterHeaderStyle')])
+                          style: normalizeStyle([$options.columnProp(col, 'style'), $options.columnProp(col, 'filterHeaderStyle')])
                         }, [
                           (col.children && col.children.filter)
                             ? (openBlock(), createBlock(resolveDynamicComponent(col.children.filter), {
@@ -1781,7 +1813,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               createElementVNode("tr", null, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList($options.columns, (col, i) => {
                   return (openBlock(), createElementBlock(Fragment, {
-                    key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||i
+                    key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
                   }, [
                     (!$options.columnProp(col, 'hidden'))
                       ? (openBlock(), createBlock(_component_TTFooterCell, {
@@ -1815,7 +1847,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 name: "start",
                 fn: withCtx(() => [
                   renderSlot(_ctx.$slots, "paginatorstart")
-                ])
+                ]),
+                key: "0"
               }
             : undefined,
           (_ctx.$slots.paginatorend)
@@ -1823,7 +1856,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 name: "end",
                 fn: withCtx(() => [
                   renderSlot(_ctx.$slots, "paginatorend")
-                ])
+                ]),
+                key: "1"
               }
             : undefined
         ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
@@ -1864,7 +1898,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-treetable {\n    position: relative;\n}\n.p-treetable table {\n    border-collapse: collapse;\n    width: 100%;\n    table-layout: fixed;\n}\n.p-treetable .p-sortable-column {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treetable-responsive-scroll > .p-treetable-wrapper {\n    overflow-x: auto;\n}\n.p-treetable-responsive-scroll > .p-treetable-wrapper > table,\n.p-treetable-auto-layout > .p-treetable-wrapper > table {\n    table-layout: auto;\n}\n.p-treetable-hoverable-rows .p-treetable-tbody > tr {\n    cursor: pointer;\n}\n.p-treetable-toggler {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    vertical-align: middle;\n    overflow: hidden;\n    position: relative;\n}\n.p-treetable-toggler + .p-checkbox {\n    vertical-align: middle;\n}\n.p-treetable-toggler + .p-checkbox + span {\n    vertical-align: middle;\n}\n\n/* Resizable */\n.p-treetable-resizable > .p-treetable-wrapper {\n    overflow-x: auto;\n}\n.p-treetable-resizable .p-treetable-thead > tr > th,\n.p-treetable-resizable .p-treetable-tfoot > tr > td,\n.p-treetable-resizable .p-treetable-tbody > tr > td {\n    overflow: hidden;\n}\n.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {\n    background-clip: padding-box;\n    position: relative;\n}\n.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n    display: none;\n}\n.p-treetable .p-column-resizer {\n    display: block;\n    position: absolute !important;\n    top: 0;\n    right: 0;\n    margin: 0;\n    width: .5rem;\n    height: 100%;\n    padding: 0px;\n    cursor:col-resize;\n    border: 1px solid transparent;\n}\n.p-treetable .p-column-resizer-helper {\n    width: 1px;\n    position: absolute;\n    z-index: 10;\n    display: none;\n}\n.p-treetable .p-treetable-loading-overlay {\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    z-index: 2;\n}\n\n/* Scrollable */\n.p-treetable-scrollable .p-treetable-wrapper {\n    position: relative;\n    overflow: auto;\n}\n.p-treetable-scrollable .p-treetable-table {\n    display: block;\n}\n.p-treetable-scrollable .p-treetable-thead,\n.p-treetable-scrollable .p-treetable-tbody,\n.p-treetable-scrollable .p-treetable-tfoot {\n    display: block;\n}\n.p-treetable-scrollable .p-treetable-thead > tr,\n.p-treetable-scrollable .p-treetable-tbody > tr,\n.p-treetable-scrollable .p-treetable-tfoot > tr {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n    width: 100%;\n}\n.p-treetable-scrollable .p-treetable-thead > tr > th,\n.p-treetable-scrollable .p-treetable-tbody > tr > td,\n.p-treetable-scrollable .p-treetable-tfoot > tr > td {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 0px;\n            flex: 1 1 0;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-treetable-scrollable .p-treetable-thead {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n}\n.p-treetable-scrollable .p-treetable-tfoot {\n    position: sticky;\n    bottom: 0;\n    z-index: 1;\n}\n.p-treetable-scrollable .p-frozen-column {\n    position: sticky;\n    background: inherit;\n}\n.p-treetable-scrollable th.p-frozen-column {\n    z-index: 1;\n}\n.p-treetable-scrollable-both .p-treetable-thead > tr > th,\n.p-treetable-scrollable-both .p-treetable-tbody > tr > td,\n.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,\n.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th\n.p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,\n.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treetable-flex-scrollable {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    height: 100%;\n}\n.p-treetable-flex-scrollable .p-treetable-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    height: 100%;\n}\n";
+var css_248z = "\n.p-treetable {\n    position: relative;\n}\n.p-treetable table {\n    border-collapse: collapse;\n    width: 100%;\n    table-layout: fixed;\n}\n.p-treetable .p-sortable-column {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treetable-responsive-scroll > .p-treetable-wrapper {\n    overflow-x: auto;\n}\n.p-treetable-responsive-scroll > .p-treetable-wrapper > table,\n.p-treetable-auto-layout > .p-treetable-wrapper > table {\n    table-layout: auto;\n}\n.p-treetable-hoverable-rows .p-treetable-tbody > tr {\n    cursor: pointer;\n}\n.p-treetable-toggler {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    vertical-align: middle;\n    overflow: hidden;\n    position: relative;\n}\n.p-treetable-toggler + .p-checkbox {\n    vertical-align: middle;\n}\n.p-treetable-toggler + .p-checkbox + span {\n    vertical-align: middle;\n}\n\n/* Resizable */\n.p-treetable-resizable > .p-treetable-wrapper {\n    overflow-x: auto;\n}\n.p-treetable-resizable .p-treetable-thead > tr > th,\n.p-treetable-resizable .p-treetable-tfoot > tr > td,\n.p-treetable-resizable .p-treetable-tbody > tr > td {\n    overflow: hidden;\n}\n.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {\n    background-clip: padding-box;\n    position: relative;\n}\n.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n    display: none;\n}\n.p-treetable .p-column-resizer {\n    display: block;\n    position: absolute !important;\n    top: 0;\n    right: 0;\n    margin: 0;\n    width: 0.5rem;\n    height: 100%;\n    padding: 0px;\n    cursor: col-resize;\n    border: 1px solid transparent;\n}\n.p-treetable .p-column-resizer-helper {\n    width: 1px;\n    position: absolute;\n    z-index: 10;\n    display: none;\n}\n.p-treetable .p-treetable-loading-overlay {\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    z-index: 2;\n}\n\n/* Scrollable */\n.p-treetable-scrollable .p-treetable-wrapper {\n    position: relative;\n    overflow: auto;\n}\n.p-treetable-scrollable .p-treetable-table {\n    display: block;\n}\n.p-treetable-scrollable .p-treetable-thead,\n.p-treetable-scrollable .p-treetable-tbody,\n.p-treetable-scrollable .p-treetable-tfoot {\n    display: block;\n}\n.p-treetable-scrollable .p-treetable-thead > tr,\n.p-treetable-scrollable .p-treetable-tbody > tr,\n.p-treetable-scrollable .p-treetable-tfoot > tr {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n    width: 100%;\n}\n.p-treetable-scrollable .p-treetable-thead > tr > th,\n.p-treetable-scrollable .p-treetable-tbody > tr > td,\n.p-treetable-scrollable .p-treetable-tfoot > tr > td {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 0px;\n            flex: 1 1 0;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-treetable-scrollable .p-treetable-thead {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n}\n.p-treetable-scrollable .p-treetable-tfoot {\n    position: sticky;\n    bottom: 0;\n    z-index: 1;\n}\n.p-treetable-scrollable .p-frozen-column {\n    position: sticky;\n    background: inherit;\n}\n.p-treetable-scrollable th.p-frozen-column {\n    z-index: 1;\n}\n.p-treetable-scrollable-both .p-treetable-thead > tr > th,\n.p-treetable-scrollable-both .p-treetable-tbody > tr > td,\n.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,\n.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,\n.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treetable-flex-scrollable {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    height: 100%;\n}\n.p-treetable-flex-scrollable .p-treetable-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    height: 100%;\n}\n";
 styleInject(css_248z);
 
 script.render = render;