primereact 9.5.0 → 9.6.1

package/treetable/treetable.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks, paginator, ripple, overlayservice, chevrondown, chevronright, check, minus, inputtext, tooltip, sortalt, sortamountdown, sortamountupalt, spinner, arrowdown, arrowup) {
+this.primereact.treetable = (function (exports, React, PrimeReact, componentbase, utils, hooks, arrowdown, arrowup, spinner, paginator, ripple, overlayservice, chevrondown, chevronright, check, minus, inputtext, tooltip, sortalt, sortamountdown, sortamountupalt) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -152,7 +152,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$4(arr, i) || _nonIterableRest();
   }
 
-  var ColumnBase = {
+  var ColumnBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Column',
       align: null,
@@ -242,9 +242,9 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     getCOtherProps: function getCOtherProps(column) {
       return utils.ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps);
     }
-  };
+  });
 
-  var TreeTableBase = {
+  var TreeTableBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'TreeTable',
       alwaysShowPaginator: true,
@@ -285,6 +285,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
       onFilter: null,
       onPage: null,
       onRowClick: null,
+      onRowMouseEnter: null,
+      onRowMouseLeave: null,
       onSelect: null,
       onSelectionChange: null,
       onSort: null,
@@ -327,14 +329,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
       totalRecords: null,
       value: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, TreeTableBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, TreeTableBase.defaultProps);
     }
-  };
+  });
 
   var TreeTableBodyCell = function TreeTableBodyCell(props) {
     var _React$useState = React__namespace.useState(false),
@@ -346,6 +342,22 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     var selfClick = React__namespace.useRef(false);
     var overlayEventListener = React__namespace.useRef(null);
     var tabIndexTimeout = React__namespace.useRef(null);
+    var getColumnProp = function getColumnProp(name) {
+      return ColumnBase.getCProp(props.column, name);
+    };
+    var getColumnProps = function getColumnProps(column) {
+      return ColumnBase.getCProps(column);
+    };
+    var getColumnPTOptions = function getColumnPTOptions(key) {
+      var cProps = getColumnProps(props.column);
+      return props.ptCallbacks.ptmo(getColumnProp('pt'), key, {
+        props: cProps,
+        parent: props.metaData,
+        state: {
+          editing: editingState
+        }
+      });
+    };
     var _useEventListener = hooks.useEventListener({
         type: 'click',
         listener: function listener(e) {
@@ -358,7 +370,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
       _useEventListener2 = _slicedToArray(_useEventListener, 2),
       bindDocumentClickListener = _useEventListener2[0],
       unbindDocumentClickListener = _useEventListener2[1];
-    var onClick = function onClick() {
+    var _onClick = function onClick() {
       if (props.editor && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.selected)) {
         selfClick.current = true;
         setEditingState(true);
@@ -371,7 +383,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         overlayservice.OverlayService.on('overlay-click', overlayEventListener.current);
       }
     };
-    var onKeyDown = function onKeyDown(event) {
+    var _onKeyDown = function onKeyDown(event) {
       if (event.which === 13 || event.which === 9) {
         switchCellToViewMode(event);
       }
@@ -389,7 +401,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
       }, 1);
     };
     var onEditorFocus = function onEditorFocus(event) {
-      onClick();
+      _onClick();
     };
     var switchCellToViewMode = function switchCellToViewMode(event) {
       if (props.cellEditValidator) {
@@ -456,23 +468,30 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         props: props
       });else content = utils.ObjectUtils.resolveFieldData(props.node.data, props.field);
     }
-
-    /* eslint-disable */
-    var editorKeyHelper = props.editor && /*#__PURE__*/React__namespace.createElement("a", {
+    var editorKeyHelperProps = utils.mergeProps({
       tabIndex: 0,
       ref: keyHelperRef,
-      className: "p-cell-editor-key-helper p-hidden-accessible",
-      onFocus: onEditorFocus
-    }, /*#__PURE__*/React__namespace.createElement("span", null));
+      className: 'p-cell-editor-key-helper p-hidden-accessible',
+      onFocus: function onFocus(e) {
+        return onEditorFocus();
+      }
+    }, getColumnPTOptions('editorKeyHelperLabel'));
+    var editorKeyHelperLabelProps = utils.mergeProps(getColumnPTOptions('editorKeyHelper'));
+    /* eslint-disable */
+    var editorKeyHelper = props.editor && /*#__PURE__*/React__namespace.createElement("a", editorKeyHelperProps, /*#__PURE__*/React__namespace.createElement("span", editorKeyHelperLabelProps));
     /* eslint-enable */
-
-    return /*#__PURE__*/React__namespace.createElement("td", {
+    var bodyCellProps = utils.mergeProps({
       ref: elementRef,
       className: className,
       style: style,
-      onClick: onClick,
-      onKeyDown: onKeyDown
-    }, props.children, editorKeyHelper, content);
+      onClick: function onClick(e) {
+        return _onClick();
+      },
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
+      }
+    }, getColumnPTOptions('bodyCell'), getColumnPTOptions('root'));
+    return /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, props.children, editorKeyHelper, content);
   };
   TreeTableBodyCell.displayName = 'TreeTableBodyCell';
 
@@ -487,6 +506,25 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     var checkboxBoxRef = React__namespace.useRef(null);
     var nodeTouched = React__namespace.useRef(false);
     var expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false;
+    var getColumnProps = function getColumnProps(column) {
+      return ColumnBase.getCProps(column);
+    };
+    var getColumnPTOptions = function getColumnPTOptions(column, key) {
+      return props.ptCallbacks.ptmo(ColumnBase.getCProp(column, 'pt'), key, {
+        props: getColumnProps(column),
+        parent: props.metaData
+      });
+    };
+    var getColumnCheckboxPTOptions = function getColumnCheckboxPTOptions(column, key) {
+      return props.ptCallbacks.ptmo(ColumnBase.getCProp(column, 'pt'), key, {
+        props: getColumnProps(column),
+        parent: props.metaData,
+        context: {
+          checked: isChecked(),
+          partialChecked: isPartialChecked()
+        }
+      });
+    };
     var getColumnProp = function getColumnProp(column, name) {
       return ColumnBase.getCProp(column, name);
     };
@@ -530,15 +568,33 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         }
       }
     };
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event) {
       if (props.onRowClick) {
         props.onRowClick(event, props.node);
       }
       nodeTouched.current = false;
     };
-    var onTouchEnd = function onTouchEnd() {
+    var _onTouchEnd = function onTouchEnd() {
       nodeTouched.current = true;
     };
+    var _onMouseEnter = function onMouseEnter(event) {
+      if (props.onRowMouseEnter) {
+        props.onRowMouseEnter({
+          originalEvent: event,
+          node: props.node,
+          index: props.rowIndex
+        });
+      }
+    };
+    var _onMouseLeave = function onMouseLeave(event) {
+      if (props.onRowMouseLeave) {
+        props.onRowMouseLeave({
+          originalEvent: event,
+          node: props.node,
+          index: props.rowIndex
+        });
+      }
+    };
     var onCheckboxChange = function onCheckboxChange(event) {
       var checked = isChecked();
       var selectionKeys = props.selectionKeys ? _objectSpread$2({}, props.selectionKeys) : {};
@@ -655,7 +711,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         });
       }
     };
-    var onKeyDown = function onKeyDown(event) {
+    var _onKeyDown = function onKeyDown(event) {
       if (event.target === elementRef.current) {
         var rowElement = event.currentTarget;
         switch (event.which) {
@@ -695,7 +751,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
 
           //enter
           case 13:
-            onClick(event);
+            _onClick(event);
             event.preventDefault();
             break;
         }
@@ -710,30 +766,46 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     var isPartialChecked = function isPartialChecked() {
       return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false;
     };
-    var createToggler = function createToggler() {
+    var createToggler = function createToggler(column) {
       var label = expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel');
-      var iconProps = {
+      var rowTogglerIconProps = utils.mergeProps({
         className: 'p-treetable-toggler-icon',
         'aria-hidden': true
-      };
-      var icon = expanded ? /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, iconProps) : /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, iconProps);
-      var togglerIcon = utils.IconUtils.getJSXIcon(props.togglerIcon || icon, _objectSpread$2({}, iconProps), {
+      }, getColumnPTOptions(column, 'rowTogglerIcon'));
+      var icon = expanded ? /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, rowTogglerIconProps) : /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, rowTogglerIconProps);
+      var togglerIcon = utils.IconUtils.getJSXIcon(props.togglerIcon || icon, _objectSpread$2({}, rowTogglerIconProps), {
         props: props
       });
       var style = {
         marginLeft: props.level * 16 + 'px',
         visibility: props.node.leaf === false || props.node.children && props.node.children.length ? 'visible' : 'hidden'
       };
-      return /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
-        className: "p-treetable-toggler p-link p-unselectable-text",
-        onClick: onTogglerClick,
+      var rowTogglerProps = utils.mergeProps({
+        type: 'button',
+        className: 'p-treetable-toggler p-link p-unselectable-text',
+        onClick: function onClick(e) {
+          return onTogglerClick(e);
+        },
         tabIndex: -1,
         style: style,
-        "aria-label": label
-      }, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        'aria-label': label
+      }, getColumnPTOptions(column, 'rowToggler'));
+      var content = /*#__PURE__*/React__namespace.createElement("button", rowTogglerProps, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      if (props.togglerTemplate) {
+        var defaultContentOptions = {
+          onClick: onTogglerClick,
+          containerClassName: 'p-treetable-toggler p-link',
+          iconClassName: 'p-treetable-toggler-icon',
+          element: content,
+          props: props,
+          expanded: expanded,
+          buttonStyle: style
+        };
+        content = utils.ObjectUtils.getJSXElement(props.togglerTemplate, props.node, defaultContentOptions);
+      }
+      return content;
     };
-    var createCheckbox = function createCheckbox() {
+    var createCheckbox = function createCheckbox(column) {
       if (props.selectionMode === 'checkbox' && props.node.selectable !== false) {
         var checked = isChecked();
         var partialChecked = isPartialChecked();
@@ -742,11 +814,10 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
           'p-indeterminate': partialChecked
         });
         var iconClassName = 'p-checkbox-icon p-c';
-        var icon = checked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
+        var checboxIconProps = utils.mergeProps({
           className: iconClassName
-        }) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, {
-          className: iconClassName
-        }) : null;
+        }, getColumnCheckboxPTOptions(column, 'checkboxIcon'));
+        var icon = checked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, checboxIconProps) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, checboxIconProps) : null;
         var checkIcon = utils.IconUtils.getJSXIcon(icon, {
           className: iconClassName
         }, {
@@ -754,22 +825,32 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
           checked: checked,
           partialChecked: partialChecked
         });
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-checkbox p-treetable-checkbox p-component",
+        var hiddenInputProps = utils.mergeProps({
+          type: 'checkbox',
+          onFocus: function onFocus(e) {
+            return onCheckboxFocus();
+          },
+          onBlur: function onBlur(e) {
+            return onCheckboxBlur();
+          }
+        }, getColumnCheckboxPTOptions(column, 'hiddenInput'));
+        var checkboxWrapperProps = utils.mergeProps({
+          className: 'p-checkbox p-treetable-checkbox p-component',
           ref: checkboxRef,
-          onClick: onCheckboxChange,
-          role: "checkbox",
-          "aria-checked": checked
-        }, /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-hidden-accessible"
-        }, /*#__PURE__*/React__namespace.createElement("input", {
-          type: "checkbox",
-          onFocus: onCheckboxFocus,
-          onBlur: onCheckboxBlur
-        })), /*#__PURE__*/React__namespace.createElement("div", {
+          onClick: function onClick(e) {
+            return onCheckboxChange(e);
+          },
+          role: 'checkbox',
+          'aria-checked': checked
+        }, getColumnCheckboxPTOptions(column, 'checkboxWrapper'));
+        var hiddenInputWrapperProps = utils.mergeProps({
+          className: 'p-hidden-accessible'
+        }, getColumnCheckboxPTOptions(column, 'hiddenInputWrapper'));
+        var checkboxProps = utils.mergeProps({
           className: _className,
           ref: checkboxBoxRef
-        }, checkIcon));
+        }, getColumnCheckboxPTOptions(column, 'checkbox'));
+        return /*#__PURE__*/React__namespace.createElement("div", checkboxWrapperProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", hiddenInputProps)), /*#__PURE__*/React__namespace.createElement("div", checkboxProps, checkIcon));
       } else {
         return null;
       }
@@ -777,8 +858,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     var createCell = function createCell(column, index) {
       var toggler, checkbox;
       if (getColumnProp(column, 'expander')) {
-        toggler = createToggler();
-        checkbox = createCheckbox();
+        toggler = createToggler(column);
+        checkbox = createCheckbox(column);
       }
       return /*#__PURE__*/React__namespace.createElement(TreeTableBodyCell, _extends({
         key: "".concat(getColumnProp(column, 'columnKey') || getColumnProp(column, 'field'), "_").concat(index)
@@ -787,7 +868,9 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         selectOnEdit: props.selectOnEdit,
         selected: isSelected(),
         node: props.node,
-        rowIndex: props.rowIndex
+        rowIndex: props.rowIndex,
+        ptCallbacks: props.ptCallbacks,
+        metaData: props.metaData
       }), toggler, checkbox);
     };
     var createChildren = function createChildren() {
@@ -803,6 +886,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
             expandedKeys: props.expandedKeys,
             selectOnEdit: props.selectOnEdit,
             onToggle: props.onToggle,
+            togglerTemplate: props.togglerTemplate,
             onExpand: props.onExpand,
             onCollapse: props.onCollapse,
             selectionMode: props.selectionMode,
@@ -810,6 +894,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
             onSelectionChange: props.onSelectionChange,
             metaKeySelection: props.metaKeySelection,
             onRowClick: props.onRowClick,
+            onRowMouseEnter: props.onRowMouseEnter,
+            onRowMouseLeave: props.onRowMouseLeave,
             onSelect: props.onSelect,
             onUnselect: props.onUnselect,
             propagateSelectionUp: props.propagateSelectionUp,
@@ -818,7 +904,9 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
             rowClassName: props.rowClassName,
             contextMenuSelectionKey: props.contextMenuSelectionKey,
             onContextMenuSelectionChange: props.onContextMenuSelectionChange,
-            onContextMenu: props.onContextMenu
+            onContextMenu: props.onContextMenu,
+            ptCallbacks: props.ptCallbacks,
+            metaData: props.metaData
           });
         });
       } else {
@@ -829,23 +917,39 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     var children = createChildren();
     var className = {
       'p-highlight': isSelected(),
-      'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key
+      'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key,
+      'p-row-odd': props.rowIndex % 2 !== 0
     };
     if (props.rowClassName) {
       var rowClassName = props.rowClassName(props.node);
       className = _objectSpread$2(_objectSpread$2({}, className), rowClassName);
     }
     className = utils.classNames(className, props.node.className);
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("tr", {
+    var rowProps = utils.mergeProps({
       ref: elementRef,
       tabIndex: 0,
       className: className,
       style: props.node.style,
-      onClick: onClick,
-      onTouchEnd: onTouchEnd,
-      onContextMenu: onRightClick,
-      onKeyDown: onKeyDown
-    }, cells), children);
+      onClick: function onClick(e) {
+        return _onClick(e);
+      },
+      onTouchEnd: function onTouchEnd(e) {
+        return _onTouchEnd();
+      },
+      onContextMenu: function onContextMenu(e) {
+        return onRightClick(e);
+      },
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
+      },
+      onMouseEnter: function onMouseEnter(e) {
+        return _onMouseEnter(e);
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        return _onMouseLeave(e);
+      }
+    }, props.ptCallbacks.ptm('row'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("tr", rowProps, cells), children);
   });
   TreeTableRow.displayName = 'TreeTableRow';
 
@@ -1009,6 +1113,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         columns: props.columns,
         expandedKeys: props.expandedKeys,
         onToggle: props.onToggle,
+        togglerTemplate: props.togglerTemplate,
         onExpand: props.onExpand,
         onCollapse: props.onCollapse,
         selectionMode: props.selectionMode,
@@ -1016,6 +1121,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         onSelectionChange: props.onSelectionChange,
         metaKeySelection: props.metaKeySelection,
         onRowClick: onRowClick,
+        onRowMouseEnter: props.onRowMouseEnter,
+        onRowMouseLeave: props.onRowMouseLeave,
         onSelect: props.onSelect,
         onUnselect: props.onUnselect,
         propagateSelectionUp: props.propagateSelectionUp,
@@ -1023,7 +1130,9 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         rowClassName: props.rowClassName,
         contextMenuSelectionKey: props.contextMenuSelectionKey,
         onContextMenuSelectionChange: props.onContextMenuSelectionChange,
-        onContextMenu: props.onContextMenu
+        onContextMenu: props.onContextMenu,
+        ptCallbacks: props.ptCallbacks,
+        metaData: props.metaData
       });
     };
     var createRows = function createRows() {
@@ -1047,20 +1156,24 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
       } else {
         var colSpan = props.columns ? props.columns.length : null;
         var _content = props.emptyMessage || PrimeReact.localeOption('emptyMessage');
-        return /*#__PURE__*/React__namespace.createElement("tr", null, /*#__PURE__*/React__namespace.createElement("td", {
-          className: "p-treetable-emptymessage",
+        var emptyMessageProps = utils.mergeProps({
+          className: 'p-treetable-emptymessage'
+        }, props.ptCallbacks.ptm('emptyMessage'));
+        var bodyCellProps = utils.mergeProps({
           colSpan: colSpan
-        }, _content));
+        }, props.ptCallbacks.ptm('bodyCell'));
+        return /*#__PURE__*/React__namespace.createElement("tr", emptyMessageProps, /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, _content));
       }
     };
     var content = props.value && props.value.length ? createRows() : createEmptyMessage();
-    return /*#__PURE__*/React__namespace.createElement("tbody", {
-      className: "p-treetable-tbody"
-    }, content);
+    var tbodyProps = utils.mergeProps({
+      className: 'p-treetable-tbody'
+    }, props.ptCallbacks.ptm('tbody'));
+    return /*#__PURE__*/React__namespace.createElement("tbody", tbodyProps, content);
   });
   TreeTableBody.displayName = 'TreeTableBody';
 
-  var ColumnGroupBase = {
+  var ColumnGroupBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'ColumnGroup',
       children: undefined
@@ -1071,45 +1184,50 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     getCProps: function getCProps(group) {
       return utils.ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps);
     }
-  };
+  });
 
-  var RowBase = {
+  var RowBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Row',
       style: null,
       className: null,
       children: undefined
     },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, RowBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, RowBase.defaultProps);
-    },
     getCProp: function getCProp(row, name) {
       return utils.ObjectUtils.getComponentProp(row, name, RowBase.defaultProps);
     }
-  };
+  });
 
   var TreeTableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
     var getColumnProp = function getColumnProp(column, name) {
       return ColumnBase.getCProp(column, name);
     };
+    var getColumnProps = function getColumnProps(column) {
+      return props.ptCallbacks.ptmo(ColumnBase.getCProps(column));
+    };
+    var getColumnPTOptions = function getColumnPTOptions(column, key) {
+      return props.ptCallbacks.ptmo(getColumnProp(column, 'pt'), key, {
+        props: getColumnProps(column),
+        parent: props.metaData
+      });
+    };
     var createFooterCell = function createFooterCell(column, index) {
-      return /*#__PURE__*/React__namespace.createElement("td", {
+      var footerCellProps = utils.mergeProps({
         key: column.field || index,
         className: getColumnProp(column, 'footerClassName') || getColumnProp(column, 'className'),
         style: getColumnProp(column, 'footerStyle') || getColumnProp(column, 'style'),
         rowSpan: getColumnProp(column, 'rowSpan'),
         colSpan: getColumnProp(column, 'colSpan')
-      }, getColumnProp(column, 'footer'));
+      }, getColumnPTOptions(column, 'footerCell'));
+      return /*#__PURE__*/React__namespace.createElement("td", footerCellProps, getColumnProp(column, 'footer'));
     };
     var createFooterRow = function createFooterRow(row, index) {
       var rowColumns = React__namespace.Children.toArray(RowBase.getCProp(row, 'children'));
       var rowFooterCells = rowColumns.map(createFooterCell);
-      return /*#__PURE__*/React__namespace.createElement("tr", {
+      var footerRowProps = utils.mergeProps(props.ptCallbacks.ptm('footerRow'));
+      return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, footerRowProps, {
         key: index
-      }, rowFooterCells);
+      }), rowFooterCells);
     };
     var createColumnGroup = function createColumnGroup() {
       var rows = React__namespace.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
@@ -1118,7 +1236,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     var createColumns = function createColumns(columns) {
       if (columns) {
         var headerCells = columns.map(createFooterCell);
-        return /*#__PURE__*/React__namespace.createElement("tr", null, headerCells);
+        var footerRowProps = utils.mergeProps(props.ptCallbacks.ptm('footerRow'));
+        return /*#__PURE__*/React__namespace.createElement("tr", footerRowProps, headerCells);
       } else {
         return null;
       }
@@ -1137,9 +1256,10 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
     if (hasFooter()) {
-      return /*#__PURE__*/React__namespace.createElement("tfoot", {
-        className: "p-treetable-tfoot"
-      }, content);
+      var tfootProps = utils.mergeProps({
+        className: 'p-treetable-tfoot'
+      }, props.ptCallbacks.ptm('tfoot'));
+      return /*#__PURE__*/React__namespace.createElement("tfoot", tfootProps, content);
     } else {
       return null;
     }
@@ -1151,6 +1271,15 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
   function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
   var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     var filterTimeout = React__namespace.useRef(null);
+    var getColumnProps = function getColumnProps(column) {
+      return props.ptCallbacks.ptmo(ColumnBase.getCProps(column));
+    };
+    var getColumnPTOptions = function getColumnPTOptions(column, key) {
+      return props.ptCallbacks.ptmo(ColumnBase.getCProp(column, 'pt'), key, {
+        props: getColumnProps(column),
+        parent: props.metaData
+      });
+    };
     var onHeaderClick = function onHeaderClick(event, column) {
       if (getColumnProp(column, 'sortable')) {
         var targetNode = event.target;
@@ -1275,13 +1404,10 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     var createSortIcon = function createSortIcon(column, sorted, sortOrder) {
       if (getColumnProp(column, 'sortable')) {
         var iconClassName = 'p-sortable-column-icon';
-        var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React__namespace.createElement(sortamountdown.SortAmountDownIcon, {
-          className: iconClassName
-        }) : /*#__PURE__*/React__namespace.createElement(sortamountupalt.SortAmountUpAltIcon, {
+        var sortIconProps = utils.mergeProps({
           className: iconClassName
-        }) : /*#__PURE__*/React__namespace.createElement(sortalt.SortAltIcon, {
-          className: iconClassName
-        });
+        }, getColumnPTOptions(column, 'sortIcon'));
+        var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React__namespace.createElement(sortamountdown.SortAmountDownIcon, sortIconProps) : /*#__PURE__*/React__namespace.createElement(sortamountupalt.SortAmountUpAltIcon, sortIconProps) : /*#__PURE__*/React__namespace.createElement(sortalt.SortAltIcon, sortIconProps);
         var sortIcon = utils.IconUtils.getJSXIcon(props.sortIcon || icon, {
           className: iconClassName
         }, {
@@ -1296,21 +1422,23 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var createResizer = function createResizer(column) {
       if (props.resizableColumns) {
-        return /*#__PURE__*/React__namespace.createElement("span", {
-          className: "p-column-resizer p-clickable",
+        var columnResizerProps = utils.mergeProps({
+          className: 'p-column-resizer p-clickable',
           onMouseDown: function onMouseDown(e) {
             return onResizerMouseDown(e, column);
           }
-        });
+        }, getColumnPTOptions(column, 'columnResizer'));
+        return /*#__PURE__*/React__namespace.createElement("span", columnResizerProps);
       } else {
         return null;
       }
     };
-    var createSortBadge = function createSortBadge(sortMetaDataIndex) {
+    var createSortBadge = function createSortBadge(column, sortMetaDataIndex) {
       if (sortMetaDataIndex !== -1 && props.multiSortMeta && props.multiSortMeta.length > 1) {
-        return /*#__PURE__*/React__namespace.createElement("span", {
-          className: "p-sortable-column-badge"
-        }, sortMetaDataIndex + 1);
+        var sortBadgeProps = utils.mergeProps({
+          className: 'p-sortable-column-badge'
+        }, getColumnPTOptions(column, 'sortBadge'));
+        return /*#__PURE__*/React__namespace.createElement("span", sortBadgeProps, sortMetaDataIndex + 1);
       }
       return null;
     };
@@ -1318,9 +1446,10 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
       var title = utils.ObjectUtils.getJSXElement(getColumnProp(column, 'header'), {
         props: options
       });
-      return /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-column-title"
-      }, title);
+      var headerTitleProps = utils.mergeProps({
+        className: 'p-column-title'
+      }, getColumnPTOptions(column, 'headerTitle'));
+      return /*#__PURE__*/React__namespace.createElement("span", headerTitleProps, title);
     };
     var createHeaderCell = function createHeaderCell(column, options) {
       var filterElement;
@@ -1333,17 +1462,19 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
           defaultValue: props.filters && props.filters[getColumnProp(column, 'field')] ? props.filters[getColumnProp(column, 'field')].value : null,
           className: "p-column-filter",
           placeholder: getColumnProp(column, 'filterPlaceholder'),
-          maxLength: getColumnProp(column, 'filterMaxLength')
+          maxLength: getColumnProp(column, 'filterMaxLength'),
+          pt: getColumnPTOptions(column, 'filterInput')
         });
       }
       if (options.filterOnly) {
-        return /*#__PURE__*/React__namespace.createElement("th", {
+        var headerCellProps = utils.mergeProps({
           key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field') || options.index,
           className: utils.classNames('p-filter-column', getColumnProp(column, 'filterHeaderClassName')),
           style: getColumnProp(column, 'filterHeaderStyle') || getColumnProp(column, 'style'),
           rowSpan: getColumnProp(column, 'rowSpan'),
           colSpan: getColumnProp(column, 'colSpan')
-        }, filterElement);
+        }, getColumnPTOptions(column, 'headerCell'), getColumnPTOptions(column, 'root'));
+        return /*#__PURE__*/React__namespace.createElement("th", headerCellProps, filterElement);
       } else {
         var headerCellRef = /*#__PURE__*/React__namespace.createRef(null);
         var sortMetaDataIndex = getMultiSortMetaDataIndex(column);
@@ -1355,7 +1486,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         if (singleSorted) sortOrder = props.sortOrder;else if (multipleSorted) sortOrder = multiSortMetaData.order;
         var sortIconElement = createSortIcon(column, sorted, sortOrder);
         var ariaSortData = getAriaSort(column, sorted, sortOrder);
-        var sortBadge = createSortBadge(sortMetaDataIndex);
+        var sortBadge = createSortBadge(column, sortMetaDataIndex);
         var className = utils.classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), {
           'p-sortable-column': getColumnProp(column, 'sortable'),
           'p-highlight': sorted,
@@ -1365,9 +1496,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         var hasTooltip = utils.ObjectUtils.isNotEmpty(headerTooltip);
         var title = createTitle(column, options);
         var resizer = createResizer(column);
-        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
-          key: column.columnKey || column.field || options.index
-        }, /*#__PURE__*/React__namespace.createElement("th", {
+        var _headerCellProps = utils.mergeProps({
           ref: headerCellRef,
           className: className,
           style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
@@ -1383,7 +1512,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
           },
           rowSpan: getColumnProp(column, 'rowSpan'),
           colSpan: getColumnProp(column, 'colSpan'),
-          "aria-sort": ariaSortData,
+          'aria-sort': ariaSortData,
           onDragStart: function onDragStart(e) {
             return _onDragStart(e, column);
           },
@@ -1396,7 +1525,10 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
           onDrop: function onDrop(e) {
             return _onDrop(e, column);
           }
-        }, resizer, title, sortIconElement, sortBadge, filterElement), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+        }, getColumnPTOptions(column, 'headerCell'), getColumnPTOptions(column, 'root'));
+        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
+          key: column.columnKey || column.field || options.index
+        }, /*#__PURE__*/React__namespace.createElement("th", _headerCellProps, resizer, title, sortIconElement, sortBadge, filterElement), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
           target: headerCellRef,
           content: headerTooltip
         }, getColumnProp(column, 'headerTooltipOptions'))));
@@ -1411,9 +1543,10 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
           renderFilter: true
         });
       });
-      return /*#__PURE__*/React__namespace.createElement("tr", {
+      var headerRowProps = utils.mergeProps(props.ptCallbacks.ptm('headerRow'));
+      return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, headerRowProps, {
         key: index
-      }, rowHeaderCells);
+      }), rowHeaderCells);
     };
     var createColumnGroup = function createColumnGroup() {
       var rows = React__namespace.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
@@ -1421,14 +1554,15 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var createColumns = function createColumns(columns) {
       if (columns) {
+        var headerRowProps = utils.mergeProps(props.ptCallbacks.ptm('headerRow'));
         if (hasColumnFilter(columns)) {
-          return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("tr", null, columns.map(function (col, i) {
+          return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, columns.map(function (col, i) {
             return createHeaderCell(col, {
               index: i,
               filterOnly: false,
               renderFilter: false
             });
-          })), /*#__PURE__*/React__namespace.createElement("tr", null, columns.map(function (col, i) {
+          })), /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, columns.map(function (col, i) {
             return createHeaderCell(col, {
               index: i,
               filterOnly: true,
@@ -1436,7 +1570,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
             });
           })));
         } else {
-          return /*#__PURE__*/React__namespace.createElement("tr", null, columns.map(function (col, i) {
+          return /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, columns.map(function (col, i) {
             return createHeaderCell(col, {
               index: i,
               filterOnly: false,
@@ -1449,9 +1583,10 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
       }
     };
     var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
-    return /*#__PURE__*/React__namespace.createElement("thead", {
-      className: "p-treetable-thead"
-    }, content);
+    var theadProps = utils.mergeProps({
+      className: 'p-treetable-thead'
+    }, props.ptCallbacks.ptm('thead'));
+    return /*#__PURE__*/React__namespace.createElement("thead", theadProps, content);
   });
   TreeTableHeader.displayName = 'TreeTableHeader';
 
@@ -1530,9 +1665,10 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
             key: col.field + '_' + i
           });
         });
-        return /*#__PURE__*/React__namespace.createElement("colgroup", {
-          className: "p-treetable-scrollable-colgroup"
-        }, cols);
+        var scrollableColgroupProps = utils.mergeProps({
+          className: 'p-treetable-scrollable-colgroup'
+        }, props.ptCallbacks.ptm('scrollableColgroup'));
+        return /*#__PURE__*/React__namespace.createElement("colgroup", scrollableColgroupProps, cols);
       } else {
         return null;
       }
@@ -1547,42 +1683,55 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     var scrollableBodyStyle = !props.frozen && props.scrollHeight ? {
       overflowY: 'scroll'
     } : null;
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    var scrollableProps = utils.mergeProps({
       className: className,
       style: {
         width: width,
         left: left
       },
       ref: elementRef
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-treetable-scrollable-header",
+    }, props.ptCallbacks.ptm('scrollable'));
+    var scrollableHeaderProps = utils.mergeProps({
+      className: 'p-treetable-scrollable-header',
       ref: scrollHeaderRef,
-      onScroll: onHeaderScroll
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-treetable-scrollable-header-box",
+      onScroll: function onScroll(e) {
+        return onHeaderScroll();
+      }
+    }, props.ptCallbacks.ptm('scrollableHeader'));
+    var scrollableHeaderBoxProps = utils.mergeProps({
+      className: 'p-treetable-scrollable-header-box',
       ref: scrollHeaderBoxRef
-    }, /*#__PURE__*/React__namespace.createElement("table", {
-      className: "p-treetable-scrollable-header-table"
-    }, colGroup, props.header))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-treetable-scrollable-body",
+    }, props.ptCallbacks.ptm('scrollableHeaderBox'));
+    var scrollableHeaderTableProps = utils.mergeProps({
+      className: 'p-treetable-scrollable-header-table'
+    }, props.ptCallbacks.ptm('scrollableHeaderTable'));
+    var scrollableBodyProps = utils.mergeProps({
+      className: 'p-treetable-scrollable-body',
       ref: scrollBodyRef,
       style: scrollableBodyStyle,
-      onScroll: onBodyScroll
-    }, /*#__PURE__*/React__namespace.createElement("table", {
+      onScroll: function onScroll(e) {
+        return onBodyScroll();
+      }
+    }, props.ptCallbacks.ptm('scrollableBody'));
+    var scrollableBodyTableProps = utils.mergeProps({
       ref: scrollTableRef,
       style: {
         top: '0'
       },
-      className: "p-treetable-scrollable-body-table"
-    }, colGroup, props.body)), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-treetable-scrollable-footer",
+      className: 'p-treetable-scrollable-body-table'
+    }, props.ptCallbacks.ptm('scrollableBodyTable'));
+    var scrollableFooterProps = utils.mergeProps({
+      className: 'p-treetable-scrollable-footer',
       ref: scrollFooterRef
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-treetable-scrollable-footer-box",
+    }, props.ptCallbacks.ptm('scrollableFooter'));
+    var scrollableFooterBoxProps = utils.mergeProps({
+      className: 'p-treetable-scrollable-footer-box',
       ref: scrollFooterBoxRef
-    }, /*#__PURE__*/React__namespace.createElement("table", {
-      className: "p-treetable-scrollable-footer-table"
-    }, colGroup, props.footer))));
+    }, props.ptCallbacks.ptm('scrollableFooterBox'));
+    var scrollableFooterTableProps = utils.mergeProps({
+      className: 'p-treetable-scrollable-footer-table'
+    }, props.ptCallbacks.ptm('scrollableFooterTable'));
+    return /*#__PURE__*/React__namespace.createElement("div", scrollableProps, /*#__PURE__*/React__namespace.createElement("div", scrollableHeaderProps, /*#__PURE__*/React__namespace.createElement("div", scrollableHeaderBoxProps, /*#__PURE__*/React__namespace.createElement("table", scrollableHeaderTableProps, colGroup, props.header))), /*#__PURE__*/React__namespace.createElement("div", scrollableBodyProps, /*#__PURE__*/React__namespace.createElement("table", scrollableBodyTableProps, colGroup, props.body)), /*#__PURE__*/React__namespace.createElement("div", scrollableFooterProps, /*#__PURE__*/React__namespace.createElement("div", scrollableFooterBoxProps, /*#__PURE__*/React__namespace.createElement("table", scrollableFooterTableProps, colGroup, props.footer))));
   });
   TreeTableScrollableView.displayName = 'TreeTableScrollableView';
 
@@ -1592,7 +1741,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = TreeTableBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var props = TreeTableBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(props.expandedKeys),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       expandedKeysState = _React$useState2[0],
@@ -1625,6 +1775,20 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
       _React$useState16 = _slicedToArray(_React$useState15, 2),
       columnOrderState = _React$useState16[0],
       setColumnOrderState = _React$useState16[1];
+    var metaData = {
+      props: props,
+      state: {
+        expandedKeys: expandedKeysState,
+        first: firstState,
+        rows: rowsState,
+        sortField: sortFieldState,
+        sortOrder: sortOrderState,
+        multiSortMeta: multiSortMetaState,
+        filters: filtersState,
+        columnOrder: columnOrderState
+      }
+    };
+    var ptCallbacks = TreeTableBase.setMetaData(metaData);
     var elementRef = React__namespace.useRef(null);
     var tableRef = React__namespace.useRef(null);
     var resizerHelperRef = React__namespace.useRef(null);
@@ -1804,13 +1968,13 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
       var value2 = utils.ObjectUtils.resolveFieldData(node2.data, multiSortMeta[index].field);
 
       // check if they are equal handling dates and locales
-      if (utils.ObjectUtils.compare(value1, value2, PrimeReact__default["default"].locale) === 0) {
+      if (utils.ObjectUtils.compare(value1, value2, context && context.locale || PrimeReact__default["default"].locale) === 0) {
         return multiSortMeta.length - 1 > index ? multisortField(node1, node2, multiSortMeta, index + 1) : 0;
       }
       return compareValuesOnSort(value1, value2, multiSortMeta[index].order);
     };
     var compareValuesOnSort = function compareValuesOnSort(value1, value2, order) {
-      return utils.ObjectUtils.sort(value1, value2, order, PrimeReact__default["default"].locale, PrimeReact__default["default"].nullSortOrder);
+      return utils.ObjectUtils.sort(value1, value2, order, context && context.locale || PrimeReact__default["default"].locale, context && context.nullSortOrder || PrimeReact__default["default"].nullSortOrder);
     };
     var filter = function filter(value, field, mode) {
       onFilter({
@@ -2369,13 +2533,17 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         onDrop: onColumnDrop,
         onFilter: onFilter,
         filters: filters,
-        filterDelay: props.filterDelay
+        filterDelay: props.filterDelay,
+        ptCallbacks: ptCallbacks,
+        metaData: metaData
       });
     };
     var createTableFooter = function createTableFooter(columns, columnGroup) {
       return /*#__PURE__*/React__namespace.createElement(TreeTableFooter, {
         columns: columns,
-        columnGroup: columnGroup
+        columnGroup: columnGroup,
+        ptCallbacks: ptCallbacks,
+        metaData: metaData
       });
     };
     var createTableBody = function createTableBody(value, columns) {
@@ -2386,6 +2554,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         expandedKeys: getExpandedKeys(),
         selectOnEdit: props.selectOnEdit,
         onToggle: onToggle,
+        togglerTemplate: props.togglerTemplate,
         onExpand: props.onExpand,
         onCollapse: props.onCollapse,
         paginator: props.paginator,
@@ -2396,6 +2565,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         onSelectionChange: props.onSelectionChange,
         metaKeySelection: props.metaKeySelection,
         onRowClick: props.onRowClick,
+        onRowMouseEnter: props.onRowMouseEnter,
+        onRowMouseLeave: props.onRowMouseLeave,
         onSelect: props.onSelect,
         onUnselect: props.onUnselect,
         propagateSelectionUp: props.propagateSelectionUp,
@@ -2406,7 +2577,9 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         loading: props.loading,
         contextMenuSelectionKey: props.contextMenuSelectionKey,
         onContextMenuSelectionChange: props.onContextMenuSelectionChange,
-        onContextMenu: props.onContextMenu
+        onContextMenu: props.onContextMenu,
+        ptCallbacks: ptCallbacks,
+        metaData: metaData
       });
     };
     var createPaginator = function createPaginator(position, totalRecords) {
@@ -2424,7 +2597,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         leftContent: props.paginatorLeft,
         rightContent: props.paginatorRight,
         alwaysShow: props.alwaysShowPaginator,
-        dropdownAppendTo: props.paginatorDropdownAppendTo
+        dropdownAppendTo: props.paginatorDropdownAppendTo,
+        pt: ptCallbacks.ptm('paginator')
       });
     };
     var createScrollableView = function createScrollableView(value, columns, frozen, headerColumnGroup, footerColumnGroup) {
@@ -2438,7 +2612,9 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         footer: footer,
         scrollHeight: props.scrollHeight,
         frozen: frozen,
-        frozenWidth: props.frozenWidth
+        frozenWidth: props.frozenWidth,
+        ptCallbacks: ptCallbacks,
+        metaData: metaData
       });
     };
     var createScrollableTable = function createScrollableTable(value) {
@@ -2450,9 +2626,10 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         frozenView = createScrollableView(value, frozenColumns, true, props.frozenHeaderColumnGroup, props.frozenFooterColumnGroup);
       }
       scrollableView = createScrollableView(value, scrollableColumns, false, props.headerColumnGroup, props.footerColumnGroup);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-treetable-wrapper p-treetable-scrollable-wrapper"
-      }, frozenView, scrollableView);
+      var scrollableWrapper = utils.mergeProps({
+        className: 'p-treetable-wrapper p-treetable-scrollable-wrapper'
+      }, ptCallbacks.ptm('scrollableWrapper'));
+      return /*#__PURE__*/React__namespace.createElement("div", scrollableWrapper, frozenView, scrollableView);
     };
     var createRegularTable = function createRegularTable(value) {
       var columns = getColumns();
@@ -2464,13 +2641,15 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
         'p-treetable-resizable-table': props.resizableColumns,
         'p-treetable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
       }, props.tableClassName);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-treetable-wrapper"
-      }, /*#__PURE__*/React__namespace.createElement("table", {
+      var wrapperProps = utils.mergeProps({
+        className: 'p-treetable-wrapper'
+      }, ptCallbacks.ptm('wrapper'));
+      var tableProps = utils.mergeProps({
         ref: tableRef,
         style: props.tableStyle,
         className: tableClassName
-      }, header, footer, body));
+      }, ptCallbacks.ptm('table'));
+      return /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("table", tableProps, header, footer, body));
     };
     var createTable = function createTable(value) {
       return props.scrollable ? createScrollableTable(value) : createRegularTable(value);
@@ -2478,25 +2657,26 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     var createLoader = function createLoader() {
       if (props.loading) {
         var iconClassName = 'p-treetable-loading-icon';
-        var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, {
-          className: iconClassName,
-          spin: true
-        });
-        var loadingIcon = utils.IconUtils.getJSXIcon(icon, {
+        var loadingIconProps = utils.mergeProps({
           className: iconClassName
-        }, {
+        }, ptCallbacks.ptm('loadingIcon'));
+        var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
+          spin: true
+        }));
+        var loadingIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
           props: props
         });
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-treetable-loading"
-        }, /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-treetable-loading-overlay p-component-overlay"
-        }, loadingIcon));
+        var loadingWrapperProps = utils.mergeProps({
+          className: 'p-treetable-loading'
+        }, ptCallbacks.ptm('loadingWrapper'));
+        var loadingOverlayProps = utils.mergeProps({
+          className: 'p-treetable-loading-overlay p-component-overlay'
+        }, ptCallbacks.ptm('loadingOverlay'));
+        return /*#__PURE__*/React__namespace.createElement("div", loadingWrapperProps, /*#__PURE__*/React__namespace.createElement("div", loadingOverlayProps, loadingIcon));
       }
       return null;
     };
     var data = processData();
-    var otherProps = utils.ObjectUtils.findDiffKeys(props, TreeTable.defaultProps);
     var className = utils.classNames('p-treetable p-component', {
       'p-treetable-hoverable-rows': props.rowHover,
       'p-treetable-selectable': isRowSelectionMode(),
@@ -2507,31 +2687,35 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
     }, props.className);
     var table = createTable(data);
     var totalRecords = getTotalRecords(data);
-    var headerFacet = props.header && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-treetable-header"
-    }, props.header);
-    var footerFacet = props.footer && /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-treetable-footer"
-    }, props.footer);
-    var paginatorTop = props.paginator && props.paginatorPosition !== 'bottom' && createPaginator('top', totalRecords);
-    var paginatorBottom = props.paginator && props.paginatorPosition !== 'top' && createPaginator('bottom', totalRecords);
-    var loader = createLoader();
-    var resizeHelper = props.resizableColumns && /*#__PURE__*/React__namespace.createElement("div", {
+    var headerProps = utils.mergeProps({
+      className: 'p-treetable-header'
+    }, ptCallbacks.ptm('header'));
+    var footerProps = utils.mergeProps({
+      className: 'p-treetable-footer'
+    }, ptCallbacks.ptm('footer'));
+    var resizeHelperProps = utils.mergeProps({
       ref: resizerHelperRef,
-      className: "p-column-resizer-helper",
+      className: 'p-column-resizer-helper',
       style: {
         display: 'none'
       }
-    });
+    }, ptCallbacks.ptm('resizeHelper'));
+    var headerFacet = props.header && /*#__PURE__*/React__namespace.createElement("div", headerProps, props.header);
+    var footerFacet = props.footer && /*#__PURE__*/React__namespace.createElement("div", footerProps, props.footer);
+    var paginatorTop = props.paginator && props.paginatorPosition !== 'bottom' && createPaginator('top', totalRecords);
+    var paginatorBottom = props.paginator && props.paginatorPosition !== 'top' && createPaginator('bottom', totalRecords);
+    var loader = createLoader();
+    var resizeHelper = props.resizableColumns && /*#__PURE__*/React__namespace.createElement("div", resizeHelperProps);
     var style = {
       position: 'absolute',
       display: 'none'
     };
-    var reorderIndicatorUpProps = {
+    var reorderIndicatorUpProps = utils.mergeProps({
       className: 'p-datatable-reorder-indicator-up',
       style: _objectSpread({}, style)
-    };
-    var reorderIndicatorUpIcon = props.reorderableColumns && utils.IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React__namespace.createElement(arrowdown.ArrowDownIcon, null), undefined, {
+    }, ptCallbacks.ptm('reorderIndicatorUp'));
+    var reorderIndicatorUpIconProps = utils.mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon'));
+    var reorderIndicatorUpIcon = props.reorderableColumns && utils.IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React__namespace.createElement(arrowdown.ArrowDownIcon, reorderIndicatorUpIconProps), _objectSpread({}, reorderIndicatorUpIconProps), {
       props: props
     });
     var reorderIndicatorUp = props.reorderableColumns && /*#__PURE__*/React__namespace.createElement("span", _extends({
@@ -2541,19 +2725,21 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
       className: 'p-datatable-reorder-indicator-down',
       style: _objectSpread({}, style)
     };
-    var reorderIndicatorDownIcon = utils.IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React__namespace.createElement(arrowup.ArrowUpIcon, null), undefined, {
+    var reorderIndicatorDownIconProps = utils.mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
+    var reorderIndicatorDownIcon = utils.IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React__namespace.createElement(arrowup.ArrowUpIcon, reorderIndicatorDownIconProps), _objectSpread({}, reorderIndicatorDownIconProps), {
       props: props
     });
     var reorderIndicatorDown = props.reorderableColumns && /*#__PURE__*/React__namespace.createElement("span", _extends({
       ref: reorderIndicatorDownRef
     }, reorderIndicatorDownProps), reorderIndicatorDownIcon);
-    return /*#__PURE__*/React__namespace.createElement("div", _extends({
+    var rootProps = utils.mergeProps({
       ref: elementRef,
       id: props.id,
       className: className,
       style: props.style,
-      "data-scrollselectors": ".p-treetable-wrapper"
-    }, otherProps), loader, headerFacet, paginatorTop, table, paginatorBottom, footerFacet, resizeHelper, reorderIndicatorUp, reorderIndicatorDown);
+      'data-scrollselectors': '.p-treetable-wrapper'
+    }, utils.ObjectUtils.findDiffKeys(props, TreeTable.defaultProps), ptCallbacks.ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement("div", rootProps, loader, headerFacet, paginatorTop, table, paginatorBottom, footerFacet, resizeHelper, reorderIndicatorUp, reorderIndicatorDown);
   });
   TreeTable.displayName = 'TreeTable';
 
@@ -2563,4 +2749,4 @@ this.primereact.treetable = (function (exports, React, PrimeReact, utils, hooks,
 
   return exports;
 
-})({}, React, primereact.api, primereact.utils, primereact.hooks, primereact.paginator, primereact.ripple, primereact.overlayservice, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.check, primereact.icons.minus, primereact.inputtext, primereact.tooltip, primereact.icons.sortalt, primereact.icons.sortamountdown, primereact.icons.sortamountupalt, primereact.icons.spinner, primereact.icons.arrowdown, primereact.icons.arrowup);
+})({}, React, primereact.api, primereact.componentbase, primereact.utils, primereact.hooks, primereact.icons.arrowdown, primereact.icons.arrowup, primereact.icons.spinner, primereact.paginator, primereact.ripple, primereact.overlayservice, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.check, primereact.icons.minus, primereact.inputtext, primereact.tooltip, primereact.icons.sortalt, primereact.icons.sortamountdown, primereact.icons.sortamountupalt);