primevue 3.28.0 → 3.29.0

package/treeselect/treeselect.js

@@ -1,9 +1,10 @@
 this.primevue = this.primevue || {};
-this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal, Ripple, Tree, utils, vue) {
+this.primevue.treeselect = (function (BaseComponent, ChevronDownIcon, OverlayEventBus, Portal, Ripple, Tree, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
@@ -12,6 +13,7 @@ this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal,
 
     var script = {
         name: 'TreeSelect',
+        extends: BaseComponent__default["default"],
         emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur'],
         props: {
             modelValue: null,
@@ -453,26 +455,19 @@ this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal,
         }
     };
 
-    const _hoisted_1 = { class: "p-hidden-accessible" };
-    const _hoisted_2 = ["id", "disabled", "tabindex", "aria-labelledby", "aria-label", "aria-expanded", "aria-controls"];
-    const _hoisted_3 = { class: "p-treeselect-label-container" };
-    const _hoisted_4 = { class: "p-treeselect-token-label" };
-    const _hoisted_5 = ["aria-expanded"];
-    const _hoisted_6 = {
-      key: 0,
-      class: "p-treeselect-empty-message"
-    };
+    const _hoisted_1 = ["id", "disabled", "tabindex", "aria-labelledby", "aria-label", "aria-expanded", "aria-controls"];
+    const _hoisted_2 = ["aria-expanded"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_TSTree = vue.resolveComponent("TSTree");
       const _component_Portal = vue.resolveComponent("Portal");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         ref: "container",
-        class: vue.normalizeClass($options.containerClass),
+        class: $options.containerClass,
         onClick: _cache[7] || (_cache[7] = (...args) => ($options.onClick && $options.onClick(...args)))
-      }, [
-        vue.createElementVNode("div", _hoisted_1, [
+      }, _ctx.ptm('root')), [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenInputWrapper')), [
           vue.createElementVNode("input", vue.mergeProps({
             ref: "focusInput",
             id: $props.inputId,
@@ -491,12 +486,10 @@ this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal,
             onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
             onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
             onKeydown: _cache[2] || (_cache[2] = $event => ($options.onKeyDown($event)))
-          }, $props.inputProps), null, 16, _hoisted_2)
-        ]),
-        vue.createElementVNode("div", _hoisted_3, [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass($options.labelClass)
-          }, [
+          }, { ...$props.inputProps, ..._ctx.ptm('hiddenInput') }), null, 16, _hoisted_1)
+        ], 16),
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-treeselect-label-container" }, _ctx.ptm('labelContainer')), [
+          vue.createElementVNode("div", vue.mergeProps({ class: $options.labelClass }, _ctx.ptm('label')), [
             vue.renderSlot(_ctx.$slots, "value", {
               value: $options.selectedNodes,
               placeholder: $props.placeholder
@@ -508,12 +501,12 @@ this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal,
                 : ($props.display === 'chip')
                   ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.selectedNodes, (node) => {
-                        return (vue.openBlock(), vue.createElementBlock("div", {
+                        return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                           key: node.key,
                           class: "p-treeselect-token"
-                        }, [
-                          vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(node.label), 1)
-                        ]))
+                        }, _ctx.ptm('token')), [
+                          vue.createElementVNode("span", vue.mergeProps({ class: "p-treeselect-token-label" }, _ctx.ptm('tokenLabel')), vue.toDisplayString(node.label), 17)
+                        ], 16))
                       }), 128)),
                       ($options.emptyValue)
                         ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
@@ -523,18 +516,18 @@ this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal,
                     ], 64))
                   : vue.createCommentVNode("", true)
             ])
-          ], 2)
-        ]),
-        vue.createElementVNode("div", {
+          ], 16)
+        ], 16),
+        vue.createElementVNode("div", vue.mergeProps({
           class: "p-treeselect-trigger",
           role: "button",
           "aria-haspopup": "tree",
           "aria-expanded": $data.overlayVisible
-        }, [
+        }, _ctx.ptm('trigger')), [
           vue.renderSlot(_ctx.$slots, "triggericon", {}, () => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent('ChevronDownIcon'), { class: "p-treeselect-trigger-icon" }))
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent('ChevronDownIcon'), vue.mergeProps({ class: "p-treeselect-trigger-icon" }, _ctx.ptm('triggerIcon')), null, 16))
           ])
-        ], 8, _hoisted_5),
+        ], 16, _hoisted_2),
         vue.createVNode(_component_Portal, { appendTo: $props.appendTo }, {
           default: vue.withCtx(() => [
             vue.createVNode(vue.Transition, {
@@ -551,15 +544,15 @@ this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal,
                       onClick: _cache[5] || (_cache[5] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
                       class: $options.panelStyleClass,
                       onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onOverlayKeydown && $options.onOverlayKeydown(...args)))
-                    }, $props.panelProps), [
+                    }, { ...$props.panelProps, ..._ctx.ptm('panel') }), [
                       vue.renderSlot(_ctx.$slots, "header", {
                         value: $props.modelValue,
                         options: $props.options
                       }),
-                      vue.createElementVNode("div", {
+                      vue.createElementVNode("div", vue.mergeProps({
                         class: "p-treeselect-items-wrapper",
-                        style: vue.normalizeStyle({ 'max-height': $props.scrollHeight })
-                      }, [
+                        style: { 'max-height': $props.scrollHeight }
+                      }, _ctx.ptm('wrapper')), [
                         vue.createVNode(_component_TSTree, {
                           ref: "tree",
                           id: $options.listId,
@@ -574,7 +567,8 @@ this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal,
                           onNodeCollapse: _cache[4] || (_cache[4] = $event => (_ctx.$emit('node-collapse', $event))),
                           onNodeSelect: $options.onNodeSelect,
                           onNodeUnselect: $options.onNodeUnselect,
-                          level: 0
+                          level: 0,
+                          pt: _ctx.ptm('tree')
                         }, vue.createSlots({ _: 2 }, [
                           (_ctx.$slots.itemtogglericon)
                             ? {
@@ -602,15 +596,18 @@ this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal,
                                 key: "1"
                               }
                             : undefined
-                        ]), 1032, ["id", "value", "selectionMode", "onUpdate:selectionKeys", "selectionKeys", "expandedKeys", "onUpdate:expandedKeys", "metaKeySelection", "onNodeSelect", "onNodeUnselect"]),
+                        ]), 1032, ["id", "value", "selectionMode", "onUpdate:selectionKeys", "selectionKeys", "expandedKeys", "onUpdate:expandedKeys", "metaKeySelection", "onNodeSelect", "onNodeUnselect", "pt"]),
                         ($options.emptyOptions)
-                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+                          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                              key: 0,
+                              class: "p-treeselect-empty-message"
+                            }, _ctx.ptm('emptyMessage')), [
                               vue.renderSlot(_ctx.$slots, "empty", {}, () => [
                                 vue.createTextVNode(vue.toDisplayString($options.emptyMessageText), 1)
                               ])
-                            ]))
+                            ], 16))
                           : vue.createCommentVNode("", true)
-                      ], 4),
+                      ], 16),
                       vue.renderSlot(_ctx.$slots, "footer", {
                         value: $props.modelValue,
                         options: $props.options
@@ -623,7 +620,7 @@ this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal,
           ]),
           _: 3
         }, 8, ["appendTo"])
-      ], 2))
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -660,4 +657,4 @@ this.primevue.treeselect = (function (ChevronDownIcon, OverlayEventBus, Portal,
 
     return script;
 
-})(primevue.icons.chevrondown, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.tree, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.icons.chevrondown, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.tree, primevue.utils, Vue);

package/treeselect/treeselect.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.treeselect=function(e,t,l,i,n,s,o){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),d=r(t),c=r(l),p=r(i),h={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},selectionMode:{type:String,default:"single"},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},panelClass:{type:[String,Object],default:null},panelProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,selfClick:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(s.ZIndexUtils.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(e){this.disabled||this.overlay&&this.overlay.contains(e.target)||s.DomHandler.hasClass(e.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"Space":case"Enter":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e)}},onArrowDownKey(e){this.overlayVisible||(this.show(),this.$nextTick((()=>{const e=[...s.DomHandler.find(this.$refs.tree.$el,".p-treenode")].find((e=>"0"===e.getAttribute("tabindex")));s.DomHandler.focus(e)})),e.preventDefault())},onEnterKey(e){this.overlayVisible?this.hide():this.onArrowDownKey(e),e.preventDefault()},onEscapeKey(e){this.overlayVisible&&(this.hide(),e.preventDefault())},onOverlayEnter(e){s.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(e){s.ZIndexUtils.clear(e)},alignOverlay(){"self"===this.appendTo?s.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=s.DomHandler.getOuterWidth(this.$el)+"px",s.DomHandler.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&!this.selfClick&&this.isOutsideClicked(e)&&this.hide(),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new s.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!s.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){d.default.emit("overlay-click",{originalEvent:e,target:this.$el}),this.selfClick=!0},onOverlayKeydown(e){"Escape"===e.code&&this.hide()},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let e=s.DomHandler.findSingle(this.overlay,"li.p-highlight");e&&e.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>s.UniqueComponentId()+"_list"},components:{TSTree:r(n).default,Portal:c.default,ChevronDownIcon:a.default},directives:{ripple:p.default}};const u={class:"p-hidden-accessible"},y=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],m={class:"p-treeselect-label-container"},f={class:"p-treeselect-token-label"},v=["aria-expanded"],b={key:0,class:"p-treeselect-empty-message"};return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n}\n.p-treeselect-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: flex;\n}\n"),h.render=function(e,t,l,i,n,s){const r=o.resolveComponent("TSTree"),a=o.resolveComponent("Portal");return o.openBlock(),o.createElementBlock("div",{ref:"container",class:o.normalizeClass(s.containerClass),onClick:t[7]||(t[7]=(...e)=>s.onClick&&s.onClick(...e))},[o.createElementVNode("div",u,[o.createElementVNode("input",o.mergeProps({ref:"focusInput",id:l.inputId,type:"text",role:"combobox",class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":n.overlayVisible,"aria-controls":s.listId,onFocus:t[0]||(t[0]=e=>s.onFocus(e)),onBlur:t[1]||(t[1]=e=>s.onBlur(e)),onKeydown:t[2]||(t[2]=e=>s.onKeyDown(e))},l.inputProps),null,16,y)]),o.createElementVNode("div",m,[o.createElementVNode("div",{class:o.normalizeClass(s.labelClass)},[o.renderSlot(e.$slots,"value",{value:s.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[o.createTextVNode(o.toDisplayString(s.label||"empty"),1)],64)):"chip"===l.display?(o.openBlock(),o.createElementBlock(o.Fragment,{key:1},[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(s.selectedNodes,(e=>(o.openBlock(),o.createElementBlock("div",{key:e.key,class:"p-treeselect-token"},[o.createElementVNode("span",f,o.toDisplayString(e.label),1)])))),128)),s.emptyValue?(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[o.createTextVNode(o.toDisplayString(l.placeholder||"empty"),1)],64)):o.createCommentVNode("",!0)],64)):o.createCommentVNode("",!0)]))],2)]),o.createElementVNode("div",{class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":n.overlayVisible},[o.renderSlot(e.$slots,"triggericon",{},(()=>[(o.openBlock(),o.createBlock(o.resolveDynamicComponent("ChevronDownIcon"),{class:"p-treeselect-trigger-icon"}))]))],8,v),o.createVNode(a,{appendTo:l.appendTo},{default:o.withCtx((()=>[o.createVNode(o.Transition,{name:"p-connected-overlay",onEnter:s.onOverlayEnter,onLeave:s.onOverlayLeave,onAfterLeave:s.onOverlayAfterLeave},{default:o.withCtx((()=>[n.overlayVisible?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,ref:s.overlayRef,onClick:t[5]||(t[5]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e)),class:s.panelStyleClass,onKeydown:t[6]||(t[6]=(...e)=>s.onOverlayKeydown&&s.onOverlayKeydown(...e))},l.panelProps),[o.renderSlot(e.$slots,"header",{value:l.modelValue,options:l.options}),o.createElementVNode("div",{class:"p-treeselect-items-wrapper",style:o.normalizeStyle({"max-height":l.scrollHeight})},[o.createVNode(r,{ref:"tree",id:s.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":s.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:n.expandedKeys,"onUpdate:expandedKeys":s.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:s.onNodeSelect,onNodeUnselect:s.onNodeUnselect,level:0},o.createSlots({_:2},[e.$slots.itemtogglericon?{name:"togglericon",fn:o.withCtx((t=>[o.renderSlot(e.$slots,"itemtogglericon",{node:t.node,expanded:t.expanded,class:o.normalizeClass(t.class)})])),key:"0"}:void 0,e.$slots.itemcheckboxicon?{name:"checkboxicon",fn:o.withCtx((t=>[o.renderSlot(e.$slots,"itemcheckboxicon",{checked:t.checked,partialChecked:t.partialChecked,class:o.normalizeClass(t.class)})])),key:"1"}:void 0]),1032,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),s.emptyOptions?(o.openBlock(),o.createElementBlock("div",b,[o.renderSlot(e.$slots,"empty",{},(()=>[o.createTextVNode(o.toDisplayString(s.emptyMessageText),1)]))])):o.createCommentVNode("",!0)],4),o.renderSlot(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):o.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],2)},h}(primevue.icons.chevrondown,primevue.overlayeventbus,primevue.portal,primevue.ripple,primevue.tree,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.treeselect=function(e,t,l,i,n,s,o,r){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=a(e),c=a(t),p=a(l),h=a(i),u=a(n),m=a(s),y={name:"TreeSelect",extends:d.default,emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},selectionMode:{type:String,default:"single"},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},panelClass:{type:[String,Object],default:null},panelProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,selfClick:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(o.ZIndexUtils.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(e){this.disabled||this.overlay&&this.overlay.contains(e.target)||o.DomHandler.hasClass(e.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"Space":case"Enter":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e)}},onArrowDownKey(e){this.overlayVisible||(this.show(),this.$nextTick((()=>{const e=[...o.DomHandler.find(this.$refs.tree.$el,".p-treenode")].find((e=>"0"===e.getAttribute("tabindex")));o.DomHandler.focus(e)})),e.preventDefault())},onEnterKey(e){this.overlayVisible?this.hide():this.onArrowDownKey(e),e.preventDefault()},onEscapeKey(e){this.overlayVisible&&(this.hide(),e.preventDefault())},onOverlayEnter(e){o.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(e){o.ZIndexUtils.clear(e)},alignOverlay(){"self"===this.appendTo?o.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=o.DomHandler.getOuterWidth(this.$el)+"px",o.DomHandler.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&!this.selfClick&&this.isOutsideClicked(e)&&this.hide(),this.selfClick=!1},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new o.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!o.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){p.default.emit("overlay-click",{originalEvent:e,target:this.$el}),this.selfClick=!0},onOverlayKeydown(e){"Escape"===e.code&&this.hide()},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let e=o.DomHandler.findSingle(this.overlay,"li.p-highlight");e&&e.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>o.UniqueComponentId()+"_list"},components:{TSTree:m.default,Portal:h.default,ChevronDownIcon:c.default},directives:{ripple:u.default}};const f=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],v=["aria-expanded"];return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n}\n.p-treeselect-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: flex;\n}\n"),y.render=function(e,t,l,i,n,s){const o=r.resolveComponent("TSTree"),a=r.resolveComponent("Portal");return r.openBlock(),r.createElementBlock("div",r.mergeProps({ref:"container",class:s.containerClass,onClick:t[7]||(t[7]=(...e)=>s.onClick&&s.onClick(...e))},e.ptm("root")),[r.createElementVNode("div",r.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper")),[r.createElementVNode("input",r.mergeProps({ref:"focusInput",id:l.inputId,type:"text",role:"combobox",class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":n.overlayVisible,"aria-controls":s.listId,onFocus:t[0]||(t[0]=e=>s.onFocus(e)),onBlur:t[1]||(t[1]=e=>s.onBlur(e)),onKeydown:t[2]||(t[2]=e=>s.onKeyDown(e))},{...l.inputProps,...e.ptm("hiddenInput")}),null,16,f)],16),r.createElementVNode("div",r.mergeProps({class:"p-treeselect-label-container"},e.ptm("labelContainer")),[r.createElementVNode("div",r.mergeProps({class:s.labelClass},e.ptm("label")),[r.renderSlot(e.$slots,"value",{value:s.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(r.openBlock(),r.createElementBlock(r.Fragment,{key:0},[r.createTextVNode(r.toDisplayString(s.label||"empty"),1)],64)):"chip"===l.display?(r.openBlock(),r.createElementBlock(r.Fragment,{key:1},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(s.selectedNodes,(t=>(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:t.key,class:"p-treeselect-token"},e.ptm("token")),[r.createElementVNode("span",r.mergeProps({class:"p-treeselect-token-label"},e.ptm("tokenLabel")),r.toDisplayString(t.label),17)],16)))),128)),s.emptyValue?(r.openBlock(),r.createElementBlock(r.Fragment,{key:0},[r.createTextVNode(r.toDisplayString(l.placeholder||"empty"),1)],64)):r.createCommentVNode("",!0)],64)):r.createCommentVNode("",!0)]))],16)],16),r.createElementVNode("div",r.mergeProps({class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":n.overlayVisible},e.ptm("trigger")),[r.renderSlot(e.$slots,"triggericon",{},(()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent("ChevronDownIcon"),r.mergeProps({class:"p-treeselect-trigger-icon"},e.ptm("triggerIcon")),null,16))]))],16,v),r.createVNode(a,{appendTo:l.appendTo},{default:r.withCtx((()=>[r.createVNode(r.Transition,{name:"p-connected-overlay",onEnter:s.onOverlayEnter,onLeave:s.onOverlayLeave,onAfterLeave:s.onOverlayAfterLeave},{default:r.withCtx((()=>[n.overlayVisible?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,ref:s.overlayRef,onClick:t[5]||(t[5]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e)),class:s.panelStyleClass,onKeydown:t[6]||(t[6]=(...e)=>s.onOverlayKeydown&&s.onOverlayKeydown(...e))},{...l.panelProps,...e.ptm("panel")}),[r.renderSlot(e.$slots,"header",{value:l.modelValue,options:l.options}),r.createElementVNode("div",r.mergeProps({class:"p-treeselect-items-wrapper",style:{"max-height":l.scrollHeight}},e.ptm("wrapper")),[r.createVNode(o,{ref:"tree",id:s.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":s.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:n.expandedKeys,"onUpdate:expandedKeys":s.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:s.onNodeSelect,onNodeUnselect:s.onNodeUnselect,level:0,pt:e.ptm("tree")},r.createSlots({_:2},[e.$slots.itemtogglericon?{name:"togglericon",fn:r.withCtx((t=>[r.renderSlot(e.$slots,"itemtogglericon",{node:t.node,expanded:t.expanded,class:r.normalizeClass(t.class)})])),key:"0"}:void 0,e.$slots.itemcheckboxicon?{name:"checkboxicon",fn:r.withCtx((t=>[r.renderSlot(e.$slots,"itemcheckboxicon",{checked:t.checked,partialChecked:t.partialChecked,class:r.normalizeClass(t.class)})])),key:"1"}:void 0]),1032,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect","pt"]),s.emptyOptions?(r.openBlock(),r.createElementBlock("div",r.mergeProps({key:0,class:"p-treeselect-empty-message"},e.ptm("emptyMessage")),[r.renderSlot(e.$slots,"empty",{},(()=>[r.createTextVNode(r.toDisplayString(s.emptyMessageText),1)]))],16)):r.createCommentVNode("",!0)],16),r.renderSlot(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):r.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],16)},y}(primevue.basecomponent,primevue.icons.chevrondown,primevue.overlayeventbus,primevue.portal,primevue.ripple,primevue.tree,primevue.utils,Vue);

package/treetable/BodyCell.vue

@@ -1,27 +1,28 @@
 <template>
-    <td :style="containerStyle" :class="containerClass" role="cell">
-        <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
+    <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
+        <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPTOptions('rowToggler')">
             <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
-            <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" />
-            <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" />
+            <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" v-bind="getColumnPTOptions('rowTogglerIcon')" />
+            <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" v-bind="getColumnPTOptions('rowTogglerIcon')" />
         </button>
-        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox">
-            <div class="p-hidden-accessible">
-                <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" />
+        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox" v-bind="getColumnPTOptions('checkboxWrapper')">
+            <div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenInputWrapper')">
+                <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPTOptions('hiddenInput')" />
             </div>
-            <div ref="checkboxEl" :class="checkboxClass">
+            <div ref="checkboxEl" :class="checkboxClass" v-bind="getColumnCheckboxPTOptions('checkbox')">
                 <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
-                <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" />
+                <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" v-bind="getColumnCheckboxPTOptions('checkboxIcon')" />
             </div>
         </div>
         <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
         <template v-else>
-            <span>{{ resolveFieldData(node.data, columnProp('field')) }}</span>
+            <span v-bind="getColumnPTOptions('cellContent')">{{ resolveFieldData(node.data, columnProp('field')) }}</span>
         </template>
     </td>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
@@ -31,6 +32,7 @@ import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'BodyCell',
+    extends: BaseComponent,
     emits: ['node-toggle', 'checkbox-toggle'],
     props: {
         node: {
@@ -97,6 +99,32 @@ export default {
         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');

package/treetable/FooterCell.vue

@@ -1,15 +1,17 @@
 <template>
-    <td :style="containerStyle" :class="containerClass">
+    <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('footerCell') }">
         <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
         {{ columnProp('footer') }}
     </td>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'FooterCell',
+    extends: BaseComponent,
     props: {
         column: {
             type: Object,
@@ -35,6 +37,18 @@ export default {
         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');

package/treetable/HeaderCell.vue

@@ -1,16 +1,26 @@
 <template>
-    <th :style="[containerStyle]" :class="containerClass" @click="onClick" @keydown="onKeyDown" :tabindex="columnProp('sortable') ? '0' : null" :aria-sort="ariaSort" role="columnheader">
-        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
+    <th
+        :style="[containerStyle]"
+        :class="containerClass"
+        @click="onClick"
+        @keydown="onKeyDown"
+        :tabindex="columnProp('sortable') ? '0' : null"
+        :aria-sort="ariaSort"
+        role="columnheader"
+        v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
+    >
+        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
         <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
-        <span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
-        <span v-if="columnProp('sortable')">
+        <span v-if="columnProp('header')" class="p-column-title" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
+        <span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
             <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
         </span>
-        <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span>
+        <span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="getColumnPTOptions('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
     </th>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import SortAltIcon from 'primevue/icons/sortalt';
 import SortAmountDownIcon from 'primevue/icons/sortamountdown';
 import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
@@ -18,6 +28,7 @@ import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'HeaderCell',
+    extends: BaseComponent,
     emits: ['column-click', 'column-resizestart'],
     props: {
         column: {
@@ -64,6 +75,18 @@ export default {
         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');

package/treetable/TreeTable.d.ts

@@ -8,9 +8,20 @@
  *
  */
 import { VNode } from 'vue';
+import { PaginatorPassThroughOptionType } from '../paginator';
 import { TreeNode } from '../tree';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TreeTablePassThroughOptionType = TreeTablePassThroughAttributes | ((options: TreeTablePassThroughMethodOptions) => TreeTablePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TreeTablePassThroughMethodOptions {
+    props: TreeTableProps;
+    state: TreeTableState;
+}
+
 /**
  * Custom treetable filter metadata.
  */
@@ -153,6 +164,152 @@ export interface TreeTableSelectionKeys {
     [key: string]: any;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TreeTableProps.pt}
+ */
+export interface TreeTablePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading wrapper's DOM element.
+     */
+    loadingWrapper?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading overlay's DOM element.
+     */
+    loadingOverlay?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Paginator component.
+     * @see {@link PaginatorPassThroughOptionType}
+     */
+    paginator?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table's DOM element.
+     */
+    table?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thead's DOM element.
+     */
+    thead?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header row's DOM element.
+     */
+    headerRow?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header cell's DOM element.
+     */
+    headerCell?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the tbody's DOM element.
+     */
+    tbody?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the body cell's DOM element.
+     */
+    bodyCell?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the tfoot's DOM element.
+     */
+    tfoot?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer row's DOM element.
+     */
+    footerRow?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the resize helper's DOM element.
+     */
+    resizeHelper?: TreeTablePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TreeTablePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in TreeTable component.
+ */
+export interface TreeTableState {
+    /**
+     * Current index of first record as a number.
+     */
+    d_first: number;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    d_rows: number;
+    /**
+     * Current sort field.
+     */
+    d_sortField: string | ((item: any) => string) | undefined;
+    /**
+     * Current order to sort the data by default.
+     */
+    d_sortOrder: number;
+    /**
+     * Current sortmeta objects to sort the data.
+     */
+    d_multiSortMeta: TreeTableSortMeta[];
+    /**
+     * Current group sortmeta objects to sort the data.
+     */
+    d_groupRowsSortMeta: TreeTableSortMeta;
+    /**
+     * Current keys of selected rows.
+     */
+    d_selectionKeys: any[];
+    /**
+     * Current keys of rows in expanded state.
+     */
+    d_expandedRowKeys: any[];
+    /**
+     * Current order of the columns.
+     */
+    d_columnOrder: string[];
+    /**
+     * Current keys of editing rows.
+     */
+    d_editingRowKeys: any;
+    /**
+     * Current editing meta data.
+     */
+    d_editingMeta: object;
+    /**
+     * Current filters object.
+     */
+    d_filters: TreeTableFilterMeta;
+    /**
+     * Current editing as a boolean.
+     * @defaultValue false
+     */
+    d_editing: boolean;
+}
+
 /**
  * Defines valid properties in TreeTable component.
  */
@@ -356,6 +513,11 @@ export interface TreeTableProps {
      * Props to pass to the table element.
      */
     tableProps?: any | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TreeTablePassThroughOptions}
+     */
+    pt?: TreeTablePassThroughOptions;
 }
 
 /**