primevue 3.28.0 → 3.29.0

package/treetable/treetable.esm.js

@@ -1,8 +1,9 @@
 import { FilterService } from 'primevue/api';
+import BaseComponent from 'primevue/basecomponent';
 import SpinnerIcon from 'primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
 import { ObjectUtils, DomHandler } from 'primevue/utils';
-import { openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, resolveDirective, withDirectives, createElementVNode, resolveComponent, Fragment, renderList, renderSlot, createSlots, withCtx, mergeProps } from 'vue';
+import { openBlock, createElementBlock, mergeProps, createBlock, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, normalizeProps, resolveDirective, withDirectives, createElementVNode, resolveComponent, Fragment, renderList, renderSlot, createSlots, withCtx } from 'vue';
 import SortAltIcon from 'primevue/icons/sortalt';
 import SortAmountDownIcon from 'primevue/icons/sortamountdown';
 import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
@@ -14,6 +15,7 @@ import Ripple from 'primevue/ripple';
 
 var script$4 = {
     name: 'FooterCell',
+    extends: BaseComponent,
     props: {
         column: {
             type: Object,
@@ -39,6 +41,18 @@ var script$4 = {
         columnProp(prop) {
             return 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');
@@ -85,10 +99,11 @@ var script$4 = {
 };
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("td", {
-    style: normalizeStyle($options.containerStyle),
-    class: normalizeClass($options.containerClass)
-  }, [
+  return (openBlock(), createElementBlock("td", mergeProps({
+    style: $options.containerStyle,
+    class: $options.containerClass,
+    role: "cell"
+  }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('footerCell') }), [
     ($props.column.children && $props.column.children.footer)
       ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.footer), {
           key: 0,
@@ -96,13 +111,14 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["column"]))
       : createCommentVNode("", true),
     createTextVNode(" " + toDisplayString($options.columnProp('footer')), 1)
-  ], 6))
+  ], 16))
 }
 
 script$4.render = render$4;
 
 var script$3 = {
     name: 'HeaderCell',
+    extends: BaseComponent,
     emits: ['column-click', 'column-resizestart'],
     props: {
         column: {
@@ -149,6 +165,18 @@ var script$3 = {
         columnProp(prop) {
             return 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');
@@ -285,33 +313,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 (openBlock(), createElementBlock("th", {
-    style: normalizeStyle([$options.containerStyle]),
-    class: normalizeClass($options.containerClass),
+  return (openBlock(), createElementBlock("th", 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'))
-      ? (openBlock(), createElementBlock("span", {
+      ? (openBlock(), createElementBlock("span", 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))
       : createCommentVNode("", true),
     ($props.column.children && $props.column.children.header)
       ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.header), {
@@ -320,27 +339,34 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["column"]))
       : createCommentVNode("", true),
     ($options.columnProp('header'))
-      ? (openBlock(), createElementBlock("span", _hoisted_2$2, toDisplayString($options.columnProp('header')), 1))
+      ? (openBlock(), createElementBlock("span", mergeProps({
+          key: 2,
+          class: "p-column-title"
+        }, $options.getColumnPTOptions('headerTitle')), toDisplayString($options.columnProp('header')), 17))
       : createCommentVNode("", true),
     ($options.columnProp('sortable'))
-      ? (openBlock(), createElementBlock("span", _hoisted_3$1, [
+      ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 3 }, $options.getColumnPTOptions('sort'))), [
           (openBlock(), createBlock(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))
       : createCommentVNode("", true),
     ($options.isMultiSorted())
-      ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString($options.getMultiSortMetaIndex() + 1), 1))
+      ? (openBlock(), createElementBlock("span", mergeProps({
+          key: 4,
+          class: "p-sortable-column-badge"
+        }, $options.getColumnPTOptions('sortBadge')), toDisplayString($options.getMultiSortMetaIndex() + 1), 17))
       : createCommentVNode("", true)
-  ], 46, _hoisted_1$3))
+  ], 16, _hoisted_1$2))
 }
 
 script$3.render = render$3;
 
 var script$2 = {
     name: 'BodyCell',
+    extends: BaseComponent,
     emits: ['node-toggle', 'checkbox-toggle'],
     props: {
         node: {
@@ -407,6 +433,32 @@ var script$2 = {
         columnProp(prop) {
             return 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');
@@ -485,26 +537,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 = resolveDirective("ripple");
 
-  return (openBlock(), createElementBlock("td", {
-    style: normalizeStyle($options.containerStyle),
-    class: normalizeClass($options.containerClass),
+  return (openBlock(), createElementBlock("td", mergeProps({
+    style: $options.containerStyle,
+    class: $options.containerClass,
     role: "cell"
-  }, [
+  }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('bodyCell') }), [
     ($options.columnProp('expander'))
-      ? withDirectives((openBlock(), createElementBlock("button", {
+      ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
           key: 0,
           type: "button",
           class: "p-treetable-toggler p-link",
           onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
-          style: normalizeStyle($options.togglerStyle),
+          style: $options.togglerStyle,
           tabindex: "-1"
-        }, [
+        }, $options.getColumnPTOptions('rowToggler')), [
           ($props.templates['togglericon'])
             ? (openBlock(), createBlock(resolveDynamicComponent($props.templates['togglericon']), {
                 key: 0,
@@ -513,36 +562,36 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                 class: "p-tree-toggler-icon"
               }, null, 8, ["node", "expanded"]))
             : ($props.expanded)
-              ? (openBlock(), createBlock(resolveDynamicComponent($props.node.expandedIcon ? 'span' : 'ChevronDownIcon'), {
+              ? (openBlock(), createBlock(resolveDynamicComponent($props.node.expandedIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
                   key: 1,
                   class: "p-tree-toggler-icon"
-                }))
-              : (openBlock(), createBlock(resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), {
+                }, $options.getColumnPTOptions('rowTogglerIcon')), null, 16))
+              : (openBlock(), createBlock(resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), mergeProps({
                   key: 2,
                   class: "p-tree-toggler-icon"
-                }))
-        ], 4)), [
+                }, $options.getColumnPTOptions('rowTogglerIcon')), null, 16))
+        ], 16)), [
           [_directive_ripple]
         ])
       : createCommentVNode("", true),
     ($options.checkboxSelectionMode && $options.columnProp('expander'))
-      ? (openBlock(), createElementBlock("div", {
+      ? (openBlock(), createElementBlock("div", mergeProps({
           key: 1,
-          class: 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)))
-        }, [
-          createElementVNode("div", _hoisted_1$2, [
-            createElementVNode("input", {
+        }, $options.getColumnPTOptions('checkboxWrapper')), [
+          createElementVNode("div", mergeProps({ class: "p-hidden-accessible" }, $options.getColumnPTOptions('hiddenInputWrapper')), [
+            createElementVNode("input", 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)
-          ]),
-          createElementVNode("div", {
+            }, $options.getColumnPTOptions('hiddenInput')), null, 16)
+          ], 16),
+          createElementVNode("div", mergeProps({
             ref: "checkboxEl",
-            class: normalizeClass($options.checkboxClass)
-          }, [
+            class: $options.checkboxClass
+          }, $options.getColumnCheckboxPTOptions('checkbox')), [
             ($props.templates['checkboxicon'])
               ? (openBlock(), createBlock(resolveDynamicComponent($props.templates['checkboxicon']), {
                   key: 0,
@@ -550,12 +599,12 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                   partialChecked: $props.partialChecked,
                   class: "p-checkbox-icon"
                 }, null, 8, ["checked", "partialChecked"]))
-              : (openBlock(), createBlock(resolveDynamicComponent($props.checked ? 'CheckIcon' : $props.partialChecked ? 'MinusIcon' : null), {
+              : (openBlock(), createBlock(resolveDynamicComponent($props.checked ? 'CheckIcon' : $props.partialChecked ? 'MinusIcon' : null), mergeProps({
                   key: 1,
                   class: "p-checkbox-icon"
-                }))
-          ], 2)
-        ], 2))
+                }, $options.getColumnCheckboxPTOptions('checkboxIcon')), null, 16))
+          ], 16)
+        ], 16))
       : createCommentVNode("", true),
     ($props.column.children && $props.column.children.body)
       ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.body), {
@@ -563,14 +612,15 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
           node: $props.node,
           column: $props.column
         }, null, 8, ["node", "column"]))
-      : (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString($options.resolveFieldData($props.node.data, $options.columnProp('field'))), 1))
-  ], 6))
+      : (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 3 }, $options.getColumnPTOptions('cellContent'))), toDisplayString($options.resolveFieldData($props.node.data, $options.columnProp('field'))), 17))
+  ], 16))
 }
 
 script$2.render = render$2;
 
 var script$1 = {
     name: 'TreeTableRow',
+    extends: BaseComponent,
     emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange'],
     props: {
         node: {
@@ -931,10 +981,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TreeTableRow = resolveComponent("TreeTableRow", true);
 
   return (openBlock(), createElementBlock(Fragment, null, [
-    createElementVNode("tr", {
+    createElementVNode("tr", mergeProps({
       ref: "node",
-      class: normalizeClass($options.containerClass),
-      style: normalizeStyle($props.node.style),
+      class: $options.containerClass,
+      style: $props.node.style,
       tabindex: $props.tabindex,
       role: "row",
       "aria-expanded": $options.expanded,
@@ -946,7 +996,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')), [
       (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
         return (openBlock(), createElementBlock(Fragment, {
           key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -965,12 +1015,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"]))
             : createCommentVNode("", true)
         ], 64))
       }), 128))
-    ], 46, _hoisted_1$1),
+    ], 16, _hoisted_1$1),
     ($options.expanded && $props.node.children && $props.node.children.length)
       ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList($props.node.children, (childNode) => {
           return (openBlock(), createBlock(_component_TreeTableRow, {
@@ -988,8 +1039,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))
       : createCommentVNode("", true)
   ], 64))
@@ -999,6 +1051,7 @@ script$1.render = render$1;
 
 var script = {
     name: 'TreeTable',
+    extends: BaseComponent,
     emits: [
         'node-expand',
         'node-collapse',
@@ -1854,45 +1907,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 = resolveComponent("TTPaginator");
@@ -1900,27 +1915,33 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TTRow = resolveComponent("TTRow");
   const _component_TTFooterCell = resolveComponent("TTFooterCell");
 
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass($options.containerClass),
+  return (openBlock(), createElementBlock("div", mergeProps({
+    class: $options.containerClass,
     "data-scrollselectors": ".p-treetable-scrollable-body",
     role: "table"
-  }, [
+  }, _ctx.ptm('root')), [
     ($props.loading)
-      ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          createElementVNode("div", _hoisted_2, [
+      ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 0,
+          class: "p-treetable-loading"
+        }, _ctx.ptm('loadingWrapper')), [
+          createElementVNode("div", mergeProps({ class: "p-treetable-loading-overlay p-component-overlay" }, _ctx.ptm('loadingOverlay')), [
             renderSlot(_ctx.$slots, "loadingicon", {}, () => [
-              (openBlock(), createBlock(resolveDynamicComponent($props.loadingIcon ? 'span' : 'SpinnerIcon'), {
+              (openBlock(), createBlock(resolveDynamicComponent($props.loadingIcon ? 'span' : 'SpinnerIcon'), mergeProps({
                 spin: "",
-                class: 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))
       : createCommentVNode("", true),
     (_ctx.$slots.header)
-      ? (openBlock(), createElementBlock("div", _hoisted_3, [
+      ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 1,
+          class: "p-treetable-header"
+        }, _ctx.ptm('header')), [
           renderSlot(_ctx.$slots, "header")
-        ]))
+        ], 16))
       : createCommentVNode("", true),
     ($options.paginatorTop)
       ? (openBlock(), createBlock(_component_TTPaginator, {
@@ -1934,7 +1955,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')
         }, createSlots({ _: 2 }, [
           (_ctx.$slots.paginatorstart)
             ? {
@@ -1990,18 +2012,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"]))
       : createCommentVNode("", true),
-    createElementVNode("div", {
+    createElementVNode("div", mergeProps({
       class: "p-treetable-wrapper",
-      style: normalizeStyle({ maxHeight: $props.scrollHeight })
-    }, [
+      style: { maxHeight: $props.scrollHeight }
+    }, _ctx.ptm('wrapper')), [
       createElementVNode("table", mergeProps({
         ref: "table",
         role: "table"
-      }, $props.tableProps), [
-        createElementVNode("thead", _hoisted_4, [
-          createElementVNode("tr", _hoisted_5, [
+      }, { ...$props.tableProps, ..._ctx.ptm('table') }), [
+        createElementVNode("thead", mergeProps({
+          class: "p-treetable-thead",
+          role: "rowgroup"
+        }, _ctx.ptm('thead')), [
+          createElementVNode("tr", mergeProps({ role: "row" }, _ctx.ptm('headerRow')), [
             (openBlock(true), createElementBlock(Fragment, null, renderList($options.columns, (col, i) => {
               return (openBlock(), createElementBlock(Fragment, {
                 key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -2016,38 +2041,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"]))
                   : createCommentVNode("", true)
               ], 64))
             }), 128))
-          ]),
+          ], 16),
           ($options.hasColumnFilter())
-            ? (openBlock(), createElementBlock("tr", _hoisted_6, [
+            ? (openBlock(), createElementBlock("tr", normalizeProps(mergeProps({ key: 0 }, _ctx.ptm('headerRow'))), [
                 (openBlock(true), createElementBlock(Fragment, null, renderList($options.columns, (col, i) => {
                   return (openBlock(), createElementBlock(Fragment, {
                     key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
                   }, [
                     (!$options.columnProp(col, 'hidden'))
-                      ? (openBlock(), createElementBlock("th", {
+                      ? (openBlock(), createElementBlock("th", mergeProps({
                           key: 0,
-                          class: normalizeClass($options.getFilterColumnHeaderClass(col)),
-                          style: 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)
                             ? (openBlock(), createBlock(resolveDynamicComponent(col.children.filter), {
                                 key: 0,
                                 column: col
                               }, null, 8, ["column"]))
                             : createCommentVNode("", true)
-                        ], 6))
+                        ], 16))
                       : createCommentVNode("", true)
                   ], 64))
                 }), 128))
-              ]))
+              ], 16))
             : createCommentVNode("", true)
-        ]),
-        createElementVNode("tbody", _hoisted_7, [
+        ], 16),
+        createElementVNode("tbody", mergeProps({
+          class: "p-treetable-tbody",
+          role: "rowgroup"
+        }, _ctx.ptm('tbody')), [
           (!$options.empty)
             ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList($options.dataToRender, (node, index) => {
                 return (openBlock(), createBlock(_component_TTRow, {
@@ -2065,20 +2094,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))
-            : (openBlock(), createElementBlock("tr", _hoisted_8, [
-                createElementVNode("td", {
+            : (openBlock(), createElementBlock("tr", mergeProps({
+                key: 1,
+                class: "p-treetable-emptymessage"
+              }, _ctx.ptm('emptyMessage')), [
+                createElementVNode("td", mergeProps({
                   colspan: $options.columns.length
-                }, [
+                }, _ctx.ptm('bodyCell')), [
                   renderSlot(_ctx.$slots, "empty")
-                ], 8, _hoisted_9)
-              ]))
-        ]),
+                ], 16, _hoisted_1)
+              ], 16))
+        ], 16),
         ($options.hasFooter)
-          ? (openBlock(), createElementBlock("tfoot", _hoisted_10, [
-              createElementVNode("tr", _hoisted_11, [
+          ? (openBlock(), createElementBlock("tfoot", mergeProps({
+              key: 0,
+              class: "p-treetable-tfoot",
+              role: "rowgroup"
+            }, _ctx.ptm('tfoot')), [
+              createElementVNode("tr", mergeProps({ role: "row" }, _ctx.ptm('footerRow')), [
                 (openBlock(true), createElementBlock(Fragment, null, renderList($options.columns, (col, i) => {
                   return (openBlock(), createElementBlock(Fragment, {
                     key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -2086,16 +2123,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     (!$options.columnProp(col, 'hidden'))
                       ? (openBlock(), createBlock(_component_TTFooterCell, {
                           key: 0,
-                          column: col
-                        }, null, 8, ["column"]))
+                          column: col,
+                          pt: _ctx.pt
+                        }, null, 8, ["column", "pt"]))
                       : createCommentVNode("", true)
                   ], 64))
                 }), 128))
-              ])
-            ]))
+              ], 16)
+            ], 16))
           : createCommentVNode("", true)
       ], 16)
-    ], 4),
+    ], 16),
     ($options.paginatorBottom)
       ? (openBlock(), createBlock(_component_TTPaginator, {
           key: 3,
@@ -2108,7 +2146,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
         }, createSlots({ _: 2 }, [
           (_ctx.$slots.paginatorstart)
             ? {
@@ -2164,15 +2203,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"]))
       : createCommentVNode("", true),
     (_ctx.$slots.footer)
-      ? (openBlock(), createElementBlock("div", _hoisted_12, [
+      ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 4,
+          class: "p-treetable-footer"
+        }, _ctx.ptm('footer')), [
           renderSlot(_ctx.$slots, "footer")
-        ]))
+        ], 16))
       : createCommentVNode("", true),
-    createElementVNode("div", _hoisted_13, null, 512)
-  ], 2))
+    createElementVNode("div", mergeProps({
+      ref: "resizeHelper",
+      class: "p-column-resizer-helper p-highlight",
+      style: {"display":"none"}
+    }, _ctx.ptm('resizeHelper')), null, 16)
+  ], 16))
 }
 
 function styleInject(css, ref) {