primevue 3.28.0 → 3.29.0

package/treetable/treetable.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var api = require('primevue/api');
+var BaseComponent = require('primevue/basecomponent');
 var SpinnerIcon = require('primevue/icons/spinner');
 var Paginator = require('primevue/paginator');
 var utils = require('primevue/utils');
@@ -16,6 +17,7 @@ var Ripple = require('primevue/ripple');
 
 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);
@@ -29,6 +31,7 @@ var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script$4 = {
     name: 'FooterCell',
+    extends: BaseComponent__default["default"],
     props: {
         column: {
             type: Object,
@@ -54,6 +57,18 @@ var script$4 = {
         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');
@@ -100,10 +115,11 @@ var script$4 = {
 };
 
 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,
@@ -111,13 +127,14 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
         }, 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: {
@@ -164,6 +181,18 @@ var script$3 = {
         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');
@@ -300,33 +329,24 @@ var script$3 = {
     }
 };
 
-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), {
@@ -335,27 +355,34 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         }, 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: {
@@ -422,6 +449,32 @@ var script$2 = {
         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');
@@ -500,26 +553,23 @@ var script$2 = {
     }
 };
 
-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,
@@ -528,36 +578,36 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                 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,
@@ -565,12 +615,12 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                   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), {
@@ -578,14 +628,15 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
           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: {
@@ -946,10 +997,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   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,
@@ -961,7 +1012,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       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
@@ -980,12 +1031,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 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, {
@@ -1003,8 +1055,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
             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))
@@ -1014,6 +1067,7 @@ script$1.render = render$1;
 
 var script = {
     name: 'TreeTable',
+    extends: BaseComponent__default["default"],
     emits: [
         'node-expand',
         'node-collapse',
@@ -1869,45 +1923,7 @@ var script = {
     }
 };
 
-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");
@@ -1915,27 +1931,33 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   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, {
@@ -1949,7 +1971,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           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)
             ? {
@@ -2005,18 +2028,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 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
@@ -2031,38 +2057,42 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       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, {
@@ -2080,20 +2110,28 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   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
@@ -2101,16 +2139,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     (!$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,
@@ -2123,7 +2162,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           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)
             ? {
@@ -2179,15 +2219,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 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) {