primevue 3.28.0 → 3.29.0

package/treetable/treetable.js

@@ -1,9 +1,10 @@
 this.primevue = this.primevue || {};
-this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, MinusIcon, Ripple) {
+this.primevue.treetable = (function (api, BaseComponent, SpinnerIcon, Paginator, utils, vue, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, MinusIcon, Ripple) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
     var Paginator__default = /*#__PURE__*/_interopDefaultLegacy(Paginator);
     var SortAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAltIcon);
@@ -17,6 +18,7 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
 
     var script$4 = {
         name: 'FooterCell',
+        extends: BaseComponent__default["default"],
         props: {
             column: {
                 type: Object,
@@ -42,6 +44,18 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
             columnProp(prop) {
                 return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
+            getColumnPTOptions(key) {
+                return this.ptmo(this.getColumnProp(), key, {
+                    props: this.column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getColumnProp() {
+                return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
+            },
             updateStickyPosition() {
                 if (this.columnProp('frozen')) {
                     let align = this.columnProp('alignFrozen');
@@ -88,10 +102,11 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
     };
 
     function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("td", {
-        style: vue.normalizeStyle($options.containerStyle),
-        class: vue.normalizeClass($options.containerClass)
-      }, [
+      return (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
+        style: $options.containerStyle,
+        class: $options.containerClass,
+        role: "cell"
+      }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('footerCell') }), [
         ($props.column.children && $props.column.children.footer)
           ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.footer), {
               key: 0,
@@ -99,13 +114,14 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
             }, null, 8, ["column"]))
           : vue.createCommentVNode("", true),
         vue.createTextVNode(" " + vue.toDisplayString($options.columnProp('footer')), 1)
-      ], 6))
+      ], 16))
     }
 
     script$4.render = render$4;
 
     var script$3 = {
         name: 'HeaderCell',
+        extends: BaseComponent__default["default"],
         emits: ['column-click', 'column-resizestart'],
         props: {
             column: {
@@ -152,6 +168,18 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
             columnProp(prop) {
                 return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
+            getColumnPTOptions(key) {
+                return this.ptmo(this.getColumnProp(), key, {
+                    props: this.column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getColumnProp() {
+                return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+            },
             updateStickyPosition() {
                 if (this.columnProp('frozen')) {
                     let align = this.columnProp('alignFrozen');
@@ -288,33 +316,24 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
         }
     };
 
-    const _hoisted_1$3 = ["tabindex", "aria-sort"];
-    const _hoisted_2$2 = {
-      key: 2,
-      class: "p-column-title"
-    };
-    const _hoisted_3$1 = { key: 3 };
-    const _hoisted_4$1 = {
-      key: 4,
-      class: "p-sortable-column-badge"
-    };
+    const _hoisted_1$2 = ["tabindex", "aria-sort"];
 
     function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("th", {
-        style: vue.normalizeStyle([$options.containerStyle]),
-        class: vue.normalizeClass($options.containerClass),
+      return (vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
+        style: [$options.containerStyle],
+        class: $options.containerClass,
         onClick: _cache[1] || (_cache[1] = (...args) => ($options.onClick && $options.onClick(...args))),
         onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
         tabindex: $options.columnProp('sortable') ? '0' : null,
         "aria-sort": $options.ariaSort,
         role: "columnheader"
-      }, [
+      }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('headerCell') }), [
         ($props.resizableColumns && !$options.columnProp('frozen'))
-          ? (vue.openBlock(), vue.createElementBlock("span", {
+          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
               key: 0,
               class: "p-column-resizer",
               onMousedown: _cache[0] || (_cache[0] = (...args) => ($options.onResizeStart && $options.onResizeStart(...args)))
-            }, null, 32))
+            }, $options.getColumnPTOptions('columnResizer')), null, 16))
           : vue.createCommentVNode("", true),
         ($props.column.children && $props.column.children.header)
           ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.header), {
@@ -323,27 +342,34 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
             }, null, 8, ["column"]))
           : vue.createCommentVNode("", true),
         ($options.columnProp('header'))
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, vue.toDisplayString($options.columnProp('header')), 1))
+          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+              key: 2,
+              class: "p-column-title"
+            }, $options.getColumnPTOptions('headerTitle')), vue.toDisplayString($options.columnProp('header')), 17))
           : vue.createCommentVNode("", true),
         ($options.columnProp('sortable'))
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, [
+          ? (vue.openBlock(), vue.createElementBlock("span", vue.normalizeProps(vue.mergeProps({ key: 3 }, $options.getColumnPTOptions('sort'))), [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.sorticon) || $options.sortableColumnIcon), {
                 sorted: $options.sortState.sorted,
                 sortOrder: $options.sortState.sortOrder,
                 class: "p-sortable-column-icon"
               }, null, 8, ["sorted", "sortOrder"]))
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
         ($options.isMultiSorted())
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, vue.toDisplayString($options.getMultiSortMetaIndex() + 1), 1))
+          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+              key: 4,
+              class: "p-sortable-column-badge"
+            }, $options.getColumnPTOptions('sortBadge')), vue.toDisplayString($options.getMultiSortMetaIndex() + 1), 17))
           : vue.createCommentVNode("", true)
-      ], 46, _hoisted_1$3))
+      ], 16, _hoisted_1$2))
     }
 
     script$3.render = render$3;
 
     var script$2 = {
         name: 'BodyCell',
+        extends: BaseComponent__default["default"],
         emits: ['node-toggle', 'checkbox-toggle'],
         props: {
             node: {
@@ -410,6 +436,32 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
             columnProp(prop) {
                 return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
+            getColumnPTOptions(key) {
+                return this.ptmo(this.getColumnProp(), key, {
+                    props: this.column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getColumnCheckboxPTOptions(key) {
+                return this.ptmo(this.getColumnProp(), key, {
+                    props: this.column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    },
+                    context: {
+                        checked: this.checked,
+                        focused: this.checkboxFocused,
+                        partialChecked: this.partialChecked
+                    }
+                });
+            },
+            getColumnProp() {
+                return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
+            },
             updateStickyPosition() {
                 if (this.columnProp('frozen')) {
                     let align = this.columnProp('alignFrozen');
@@ -488,26 +540,23 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
         }
     };
 
-    const _hoisted_1$2 = { class: "p-hidden-accessible" };
-    const _hoisted_2$1 = { key: 3 };
-
     function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("td", {
-        style: vue.normalizeStyle($options.containerStyle),
-        class: vue.normalizeClass($options.containerClass),
+      return (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
+        style: $options.containerStyle,
+        class: $options.containerClass,
         role: "cell"
-      }, [
+      }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('bodyCell') }), [
         ($options.columnProp('expander'))
-          ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+          ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
               key: 0,
               type: "button",
               class: "p-treetable-toggler p-link",
               onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
-              style: vue.normalizeStyle($options.togglerStyle),
+              style: $options.togglerStyle,
               tabindex: "-1"
-            }, [
+            }, $options.getColumnPTOptions('rowToggler')), [
               ($props.templates['togglericon'])
                 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['togglericon']), {
                     key: 0,
@@ -516,36 +565,36 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
                     class: "p-tree-toggler-icon"
                   }, null, 8, ["node", "expanded"]))
                 : ($props.expanded)
-                  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.expandedIcon ? 'span' : 'ChevronDownIcon'), {
+                  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.expandedIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
                       key: 1,
                       class: "p-tree-toggler-icon"
-                    }))
-                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), {
+                    }, $options.getColumnPTOptions('rowTogglerIcon')), null, 16))
+                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), vue.mergeProps({
                       key: 2,
                       class: "p-tree-toggler-icon"
-                    }))
-            ], 4)), [
+                    }, $options.getColumnPTOptions('rowTogglerIcon')), null, 16))
+            ], 16)), [
               [_directive_ripple]
             ])
           : vue.createCommentVNode("", true),
         ($options.checkboxSelectionMode && $options.columnProp('expander'))
-          ? (vue.openBlock(), vue.createElementBlock("div", {
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
               key: 1,
-              class: vue.normalizeClass(['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': $data.checkboxFocused }]),
+              class: ['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': $data.checkboxFocused }],
               onClick: _cache[3] || (_cache[3] = (...args) => ($options.toggleCheckbox && $options.toggleCheckbox(...args)))
-            }, [
-              vue.createElementVNode("div", _hoisted_1$2, [
-                vue.createElementVNode("input", {
+            }, $options.getColumnPTOptions('checkboxWrapper')), [
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, $options.getColumnPTOptions('hiddenInputWrapper')), [
+                vue.createElementVNode("input", vue.mergeProps({
                   type: "checkbox",
                   onFocus: _cache[1] || (_cache[1] = (...args) => ($options.onCheckboxFocus && $options.onCheckboxFocus(...args))),
                   onBlur: _cache[2] || (_cache[2] = (...args) => ($options.onCheckboxBlur && $options.onCheckboxBlur(...args))),
                   tabindex: "-1"
-                }, null, 32)
-              ]),
-              vue.createElementVNode("div", {
+                }, $options.getColumnPTOptions('hiddenInput')), null, 16)
+              ], 16),
+              vue.createElementVNode("div", vue.mergeProps({
                 ref: "checkboxEl",
-                class: vue.normalizeClass($options.checkboxClass)
-              }, [
+                class: $options.checkboxClass
+              }, $options.getColumnCheckboxPTOptions('checkbox')), [
                 ($props.templates['checkboxicon'])
                   ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['checkboxicon']), {
                       key: 0,
@@ -553,12 +602,12 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
                       partialChecked: $props.partialChecked,
                       class: "p-checkbox-icon"
                     }, null, 8, ["checked", "partialChecked"]))
-                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.checked ? 'CheckIcon' : $props.partialChecked ? 'MinusIcon' : null), {
+                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.checked ? 'CheckIcon' : $props.partialChecked ? 'MinusIcon' : null), vue.mergeProps({
                       key: 1,
                       class: "p-checkbox-icon"
-                    }))
-              ], 2)
-            ], 2))
+                    }, $options.getColumnCheckboxPTOptions('checkboxIcon')), null, 16))
+              ], 16)
+            ], 16))
           : vue.createCommentVNode("", true),
         ($props.column.children && $props.column.children.body)
           ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.body), {
@@ -566,14 +615,15 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
               node: $props.node,
               column: $props.column
             }, null, 8, ["node", "column"]))
-          : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString($options.resolveFieldData($props.node.data, $options.columnProp('field'))), 1))
-      ], 6))
+          : (vue.openBlock(), vue.createElementBlock("span", vue.normalizeProps(vue.mergeProps({ key: 3 }, $options.getColumnPTOptions('cellContent'))), vue.toDisplayString($options.resolveFieldData($props.node.data, $options.columnProp('field'))), 17))
+      ], 16))
     }
 
     script$2.render = render$2;
 
     var script$1 = {
         name: 'TreeTableRow',
+        extends: BaseComponent__default["default"],
         emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange'],
         props: {
             node: {
@@ -934,10 +984,10 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
       const _component_TreeTableRow = vue.resolveComponent("TreeTableRow", true);
 
       return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createElementVNode("tr", {
+        vue.createElementVNode("tr", vue.mergeProps({
           ref: "node",
-          class: vue.normalizeClass($options.containerClass),
-          style: vue.normalizeStyle($props.node.style),
+          class: $options.containerClass,
+          style: $props.node.style,
           tabindex: $props.tabindex,
           role: "row",
           "aria-expanded": $options.expanded,
@@ -949,7 +999,7 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
           onClick: _cache[1] || (_cache[1] = (...args) => ($options.onClick && $options.onClick(...args))),
           onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
           onTouchend: _cache[3] || (_cache[3] = (...args) => ($options.onTouchEnd && $options.onTouchEnd(...args)))
-        }, [
+        }, _ctx.ptm('row')), [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.columns, (col, i) => {
             return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -968,12 +1018,13 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
                     partialChecked: $options.partialChecked,
                     templates: $props.templates,
                     onNodeToggle: _cache[0] || (_cache[0] = $event => (_ctx.$emit('node-toggle', $event))),
-                    onCheckboxToggle: $options.toggleCheckbox
-                  }, null, 8, ["column", "node", "level", "leaf", "indentation", "expanded", "selectionMode", "checked", "partialChecked", "templates", "onCheckboxToggle"]))
+                    onCheckboxToggle: $options.toggleCheckbox,
+                    pt: _ctx.pt
+                  }, null, 8, ["column", "node", "level", "leaf", "indentation", "expanded", "selectionMode", "checked", "partialChecked", "templates", "onCheckboxToggle", "pt"]))
                 : vue.createCommentVNode("", true)
             ], 64))
           }), 128))
-        ], 46, _hoisted_1$1),
+        ], 16, _hoisted_1$1),
         ($options.expanded && $props.node.children && $props.node.children.length)
           ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList($props.node.children, (childNode) => {
               return (vue.openBlock(), vue.createBlock(_component_TreeTableRow, {
@@ -991,8 +1042,9 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
                 templates: $props.templates,
                 onNodeToggle: _cache[4] || (_cache[4] = $event => (_ctx.$emit('node-toggle', $event))),
                 onNodeClick: _cache[5] || (_cache[5] = $event => (_ctx.$emit('node-click', $event))),
-                onCheckboxChange: $options.onCheckboxChange
-              }, null, 8, ["columns", "node", "parentNode", "level", "expandedKeys", "selectionMode", "selectionKeys", "indentation", "ariaPosInset", "ariaSetSize", "templates", "onCheckboxChange"]))
+                onCheckboxChange: $options.onCheckboxChange,
+                pt: _ctx.pt
+              }, null, 8, ["columns", "node", "parentNode", "level", "expandedKeys", "selectionMode", "selectionKeys", "indentation", "ariaPosInset", "ariaSetSize", "templates", "onCheckboxChange", "pt"]))
             }), 128))
           : vue.createCommentVNode("", true)
       ], 64))
@@ -1002,6 +1054,7 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
 
     var script = {
         name: 'TreeTable',
+        extends: BaseComponent__default["default"],
         emits: [
             'node-expand',
             'node-collapse',
@@ -1857,45 +1910,7 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
         }
     };
 
-    const _hoisted_1 = {
-      key: 0,
-      class: "p-treetable-loading"
-    };
-    const _hoisted_2 = { class: "p-treetable-loading-overlay p-component-overlay" };
-    const _hoisted_3 = {
-      key: 1,
-      class: "p-treetable-header"
-    };
-    const _hoisted_4 = {
-      class: "p-treetable-thead",
-      role: "rowgroup"
-    };
-    const _hoisted_5 = { role: "row" };
-    const _hoisted_6 = { key: 0 };
-    const _hoisted_7 = {
-      class: "p-treetable-tbody",
-      role: "rowgroup"
-    };
-    const _hoisted_8 = {
-      key: 1,
-      class: "p-treetable-emptymessage"
-    };
-    const _hoisted_9 = ["colspan"];
-    const _hoisted_10 = {
-      key: 0,
-      class: "p-treetable-tfoot",
-      role: "rowgroup"
-    };
-    const _hoisted_11 = { role: "row" };
-    const _hoisted_12 = {
-      key: 4,
-      class: "p-treetable-footer"
-    };
-    const _hoisted_13 = {
-      ref: "resizeHelper",
-      class: "p-column-resizer-helper p-highlight",
-      style: {"display":"none"}
-    };
+    const _hoisted_1 = ["colspan"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_TTPaginator = vue.resolveComponent("TTPaginator");
@@ -1903,27 +1918,33 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
       const _component_TTRow = vue.resolveComponent("TTRow");
       const _component_TTFooterCell = vue.resolveComponent("TTFooterCell");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass($options.containerClass),
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: $options.containerClass,
         "data-scrollselectors": ".p-treetable-scrollable-body",
         role: "table"
-      }, [
+      }, _ctx.ptm('root')), [
         ($props.loading)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-              vue.createElementVNode("div", _hoisted_2, [
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 0,
+              class: "p-treetable-loading"
+            }, _ctx.ptm('loadingWrapper')), [
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-treetable-loading-overlay p-component-overlay" }, _ctx.ptm('loadingOverlay')), [
                 vue.renderSlot(_ctx.$slots, "loadingicon", {}, () => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.loadingIcon ? 'span' : 'SpinnerIcon'), {
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.loadingIcon ? 'span' : 'SpinnerIcon'), vue.mergeProps({
                     spin: "",
-                    class: vue.normalizeClass(['p-treetable-loading-icon', $props.loadingIcon])
-                  }, null, 8, ["class"]))
+                    class: ['p-treetable-loading-icon', $props.loadingIcon]
+                  }, _ctx.ptm('loadingIcon')), null, 16, ["class"]))
                 ])
-              ])
-            ]))
+              ], 16)
+            ], 16))
           : vue.createCommentVNode("", true),
         (_ctx.$slots.header)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 1,
+              class: "p-treetable-header"
+            }, _ctx.ptm('header')), [
               vue.renderSlot(_ctx.$slots, "header")
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
         ($options.paginatorTop)
           ? (vue.openBlock(), vue.createBlock(_component_TTPaginator, {
@@ -1937,7 +1958,8 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
               currentPageReportTemplate: $props.currentPageReportTemplate,
               class: "p-paginator-top",
               onPage: _cache[0] || (_cache[0] = $event => ($options.onPage($event))),
-              alwaysShow: $props.alwaysShowPaginator
+              alwaysShow: $props.alwaysShowPaginator,
+              pt: _ctx.ptm('paginator')
             }, vue.createSlots({ _: 2 }, [
               (_ctx.$slots.paginatorstart)
                 ? {
@@ -1993,18 +2015,21 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
                     key: "5"
                   }
                 : undefined
-            ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
+            ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow", "pt"]))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
+        vue.createElementVNode("div", vue.mergeProps({
           class: "p-treetable-wrapper",
-          style: vue.normalizeStyle({ maxHeight: $props.scrollHeight })
-        }, [
+          style: { maxHeight: $props.scrollHeight }
+        }, _ctx.ptm('wrapper')), [
           vue.createElementVNode("table", vue.mergeProps({
             ref: "table",
             role: "table"
-          }, $props.tableProps), [
-            vue.createElementVNode("thead", _hoisted_4, [
-              vue.createElementVNode("tr", _hoisted_5, [
+          }, { ...$props.tableProps, ..._ctx.ptm('table') }), [
+            vue.createElementVNode("thead", vue.mergeProps({
+              class: "p-treetable-thead",
+              role: "rowgroup"
+            }, _ctx.ptm('thead')), [
+              vue.createElementVNode("tr", vue.mergeProps({ role: "row" }, _ctx.ptm('headerRow')), [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.columns, (col, i) => {
                   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                     key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -2019,38 +2044,42 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
                           multiSortMeta: $data.d_multiSortMeta,
                           sortMode: $props.sortMode,
                           onColumnClick: $options.onColumnHeaderClick,
-                          onColumnResizestart: $options.onColumnResizeStart
-                        }, null, 8, ["column", "resizableColumns", "sortField", "sortOrder", "multiSortMeta", "sortMode", "onColumnClick", "onColumnResizestart"]))
+                          onColumnResizestart: $options.onColumnResizeStart,
+                          pt: _ctx.pt
+                        }, null, 8, ["column", "resizableColumns", "sortField", "sortOrder", "multiSortMeta", "sortMode", "onColumnClick", "onColumnResizestart", "pt"]))
                       : vue.createCommentVNode("", true)
                   ], 64))
                 }), 128))
-              ]),
+              ], 16),
               ($options.hasColumnFilter())
-                ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_6, [
+                ? (vue.openBlock(), vue.createElementBlock("tr", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.ptm('headerRow'))), [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.columns, (col, i) => {
                       return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                         key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
                       }, [
                         (!$options.columnProp(col, 'hidden'))
-                          ? (vue.openBlock(), vue.createElementBlock("th", {
+                          ? (vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
                               key: 0,
-                              class: vue.normalizeClass($options.getFilterColumnHeaderClass(col)),
-                              style: vue.normalizeStyle([$options.columnProp(col, 'style'), $options.columnProp(col, 'filterHeaderStyle')])
-                            }, [
+                              class: $options.getFilterColumnHeaderClass(col),
+                              style: [$options.columnProp(col, 'style'), $options.columnProp(col, 'filterHeaderStyle')]
+                            }, _ctx.ptm('headerCell')), [
                               (col.children && col.children.filter)
                                 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(col.children.filter), {
                                     key: 0,
                                     column: col
                                   }, null, 8, ["column"]))
                                 : vue.createCommentVNode("", true)
-                            ], 6))
+                            ], 16))
                           : vue.createCommentVNode("", true)
                       ], 64))
                     }), 128))
-                  ]))
+                  ], 16))
                 : vue.createCommentVNode("", true)
-            ]),
-            vue.createElementVNode("tbody", _hoisted_7, [
+            ], 16),
+            vue.createElementVNode("tbody", vue.mergeProps({
+              class: "p-treetable-tbody",
+              role: "rowgroup"
+            }, _ctx.ptm('tbody')), [
               (!$options.empty)
                 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList($options.dataToRender, (node, index) => {
                     return (vue.openBlock(), vue.createBlock(_component_TTRow, {
@@ -2068,20 +2097,28 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
                       templates: _ctx.$slots,
                       onNodeToggle: $options.onNodeToggle,
                       onNodeClick: $options.onNodeClick,
-                      onCheckboxChange: $options.onCheckboxChange
-                    }, null, 8, ["columns", "node", "expandedKeys", "indentation", "selectionMode", "selectionKeys", "ariaSetSize", "ariaPosInset", "tabindex", "templates", "onNodeToggle", "onNodeClick", "onCheckboxChange"]))
+                      onCheckboxChange: $options.onCheckboxChange,
+                      pt: _ctx.pt
+                    }, null, 8, ["columns", "node", "expandedKeys", "indentation", "selectionMode", "selectionKeys", "ariaSetSize", "ariaPosInset", "tabindex", "templates", "onNodeToggle", "onNodeClick", "onCheckboxChange", "pt"]))
                   }), 128))
-                : (vue.openBlock(), vue.createElementBlock("tr", _hoisted_8, [
-                    vue.createElementVNode("td", {
+                : (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
+                    key: 1,
+                    class: "p-treetable-emptymessage"
+                  }, _ctx.ptm('emptyMessage')), [
+                    vue.createElementVNode("td", vue.mergeProps({
                       colspan: $options.columns.length
-                    }, [
+                    }, _ctx.ptm('bodyCell')), [
                       vue.renderSlot(_ctx.$slots, "empty")
-                    ], 8, _hoisted_9)
-                  ]))
-            ]),
+                    ], 16, _hoisted_1)
+                  ], 16))
+            ], 16),
             ($options.hasFooter)
-              ? (vue.openBlock(), vue.createElementBlock("tfoot", _hoisted_10, [
-                  vue.createElementVNode("tr", _hoisted_11, [
+              ? (vue.openBlock(), vue.createElementBlock("tfoot", vue.mergeProps({
+                  key: 0,
+                  class: "p-treetable-tfoot",
+                  role: "rowgroup"
+                }, _ctx.ptm('tfoot')), [
+                  vue.createElementVNode("tr", vue.mergeProps({ role: "row" }, _ctx.ptm('footerRow')), [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.columns, (col, i) => {
                       return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                         key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -2089,16 +2126,17 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
                         (!$options.columnProp(col, 'hidden'))
                           ? (vue.openBlock(), vue.createBlock(_component_TTFooterCell, {
                               key: 0,
-                              column: col
-                            }, null, 8, ["column"]))
+                              column: col,
+                              pt: _ctx.pt
+                            }, null, 8, ["column", "pt"]))
                           : vue.createCommentVNode("", true)
                       ], 64))
                     }), 128))
-                  ])
-                ]))
+                  ], 16)
+                ], 16))
               : vue.createCommentVNode("", true)
           ], 16)
-        ], 4),
+        ], 16),
         ($options.paginatorBottom)
           ? (vue.openBlock(), vue.createBlock(_component_TTPaginator, {
               key: 3,
@@ -2111,7 +2149,8 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
               currentPageReportTemplate: $props.currentPageReportTemplate,
               class: "p-paginator-bottom",
               onPage: _cache[1] || (_cache[1] = $event => ($options.onPage($event))),
-              alwaysShow: $props.alwaysShowPaginator
+              alwaysShow: $props.alwaysShowPaginator,
+              pt: _ctx.pt
             }, vue.createSlots({ _: 2 }, [
               (_ctx.$slots.paginatorstart)
                 ? {
@@ -2167,15 +2206,22 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
                     key: "5"
                   }
                 : undefined
-            ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
+            ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow", "pt"]))
           : vue.createCommentVNode("", true),
         (_ctx.$slots.footer)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 4,
+              class: "p-treetable-footer"
+            }, _ctx.ptm('footer')), [
               vue.renderSlot(_ctx.$slots, "footer")
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_13, null, 512)
-      ], 2))
+        vue.createElementVNode("div", vue.mergeProps({
+          ref: "resizeHelper",
+          class: "p-column-resizer-helper p-highlight",
+          style: {"display":"none"}
+        }, _ctx.ptm('resizeHelper')), null, 16)
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -2212,4 +2258,4 @@ this.primevue.treetable = (function (api, SpinnerIcon, Paginator, utils, vue, So
 
     return script;
 
-})(primevue.api, primevue.icons.spinner, primevue.paginator, primevue.utils, Vue, primevue.icons.sortalt, primevue.icons.sortamountdown, primevue.icons.sortamountupalt, primevue.icons.check, primevue.icons.chevrondown, primevue.icons.chevronright, primevue.icons.minus, primevue.ripple);
+})(primevue.api, primevue.basecomponent, primevue.icons.spinner, primevue.paginator, primevue.utils, Vue, primevue.icons.sortalt, primevue.icons.sortamountdown, primevue.icons.sortamountupalt, primevue.icons.check, primevue.icons.chevrondown, primevue.icons.chevronright, primevue.icons.minus, primevue.ripple);