primereact 9.5.0 → 9.6.1

package/treetable/treetable.esm.js

@@ -1,7 +1,11 @@
 import * as React from 'react';
-import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, FilterService } from 'primereact/api';
-import { ObjectUtils, DomHandler, classNames, IconUtils } from 'primereact/utils';
+import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, PrimeReactContext, FilterService } from 'primereact/api';
+import { ComponentBase } from 'primereact/componentbase';
+import { ObjectUtils, DomHandler, classNames, mergeProps, IconUtils } from 'primereact/utils';
 import { useEventListener, useUnmountEffect, useMountEffect } from 'primereact/hooks';
+import { ArrowDownIcon } from 'primereact/icons/arrowdown';
+import { ArrowUpIcon } from 'primereact/icons/arrowup';
+import { SpinnerIcon } from 'primereact/icons/spinner';
 import { Paginator } from 'primereact/paginator';
 import { Ripple } from 'primereact/ripple';
 import { OverlayService } from 'primereact/overlayservice';
@@ -14,9 +18,6 @@ import { Tooltip } from 'primereact/tooltip';
 import { SortAltIcon } from 'primereact/icons/sortalt';
 import { SortAmountDownIcon } from 'primereact/icons/sortamountdown';
 import { SortAmountUpAltIcon } from 'primereact/icons/sortamountupalt';
-import { SpinnerIcon } from 'primereact/icons/spinner';
-import { ArrowDownIcon } from 'primereact/icons/arrowdown';
-import { ArrowUpIcon } from 'primereact/icons/arrowup';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -145,7 +146,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$4(arr, i) || _nonIterableRest();
 }
 
-var ColumnBase = {
+var ColumnBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Column',
     align: null,
@@ -235,9 +236,9 @@ var ColumnBase = {
   getCOtherProps: function getCOtherProps(column) {
     return ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps);
   }
-};
+});
 
-var TreeTableBase = {
+var TreeTableBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'TreeTable',
     alwaysShowPaginator: true,
@@ -278,6 +279,8 @@ var TreeTableBase = {
     onFilter: null,
     onPage: null,
     onRowClick: null,
+    onRowMouseEnter: null,
+    onRowMouseLeave: null,
     onSelect: null,
     onSelectionChange: null,
     onSort: null,
@@ -320,14 +323,8 @@ var TreeTableBase = {
     totalRecords: null,
     value: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, TreeTableBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, TreeTableBase.defaultProps);
   }
-};
+});
 
 var TreeTableBodyCell = function TreeTableBodyCell(props) {
   var _React$useState = React.useState(false),
@@ -339,6 +336,22 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
   var selfClick = React.useRef(false);
   var overlayEventListener = React.useRef(null);
   var tabIndexTimeout = React.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 = useEventListener({
       type: 'click',
       listener: function listener(e) {
@@ -351,7 +364,7 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
     _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);
@@ -364,7 +377,7 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
       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);
     }
@@ -382,7 +395,7 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
     }, 1);
   };
   var onEditorFocus = function onEditorFocus(event) {
-    onClick();
+    _onClick();
   };
   var switchCellToViewMode = function switchCellToViewMode(event) {
     if (props.cellEditValidator) {
@@ -449,23 +462,30 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
       props: props
     });else content = ObjectUtils.resolveFieldData(props.node.data, props.field);
   }
-
-  /* eslint-disable */
-  var editorKeyHelper = props.editor && /*#__PURE__*/React.createElement("a", {
+  var editorKeyHelperProps = mergeProps({
     tabIndex: 0,
     ref: keyHelperRef,
-    className: "p-cell-editor-key-helper p-hidden-accessible",
-    onFocus: onEditorFocus
-  }, /*#__PURE__*/React.createElement("span", null));
+    className: 'p-cell-editor-key-helper p-hidden-accessible',
+    onFocus: function onFocus(e) {
+      return onEditorFocus();
+    }
+  }, getColumnPTOptions('editorKeyHelperLabel'));
+  var editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
+  /* eslint-disable */
+  var editorKeyHelper = props.editor && /*#__PURE__*/React.createElement("a", editorKeyHelperProps, /*#__PURE__*/React.createElement("span", editorKeyHelperLabelProps));
   /* eslint-enable */
-
-  return /*#__PURE__*/React.createElement("td", {
+  var bodyCellProps = 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.createElement("td", bodyCellProps, props.children, editorKeyHelper, content);
 };
 TreeTableBodyCell.displayName = 'TreeTableBodyCell';
 
@@ -480,6 +500,25 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
   var checkboxBoxRef = React.useRef(null);
   var nodeTouched = React.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);
   };
@@ -523,15 +562,33 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
       }
     }
   };
-  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) : {};
@@ -648,7 +705,7 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
       });
     }
   };
-  var onKeyDown = function onKeyDown(event) {
+  var _onKeyDown = function onKeyDown(event) {
     if (event.target === elementRef.current) {
       var rowElement = event.currentTarget;
       switch (event.which) {
@@ -688,7 +745,7 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
 
         //enter
         case 13:
-          onClick(event);
+          _onClick(event);
           event.preventDefault();
           break;
       }
@@ -703,30 +760,46 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
   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 ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
-    var iconProps = {
+    var rowTogglerIconProps = mergeProps({
       className: 'p-treetable-toggler-icon',
       'aria-hidden': true
-    };
-    var icon = expanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, iconProps) : /*#__PURE__*/React.createElement(ChevronRightIcon, iconProps);
-    var togglerIcon = IconUtils.getJSXIcon(props.togglerIcon || icon, _objectSpread$2({}, iconProps), {
+    }, getColumnPTOptions(column, 'rowTogglerIcon'));
+    var icon = expanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, rowTogglerIconProps) : /*#__PURE__*/React.createElement(ChevronRightIcon, rowTogglerIconProps);
+    var togglerIcon = 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.createElement("button", {
-      type: "button",
-      className: "p-treetable-toggler p-link p-unselectable-text",
-      onClick: onTogglerClick,
+    var rowTogglerProps = 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.createElement(Ripple, null));
+      'aria-label': label
+    }, getColumnPTOptions(column, 'rowToggler'));
+    var content = /*#__PURE__*/React.createElement("button", rowTogglerProps, togglerIcon, /*#__PURE__*/React.createElement(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 = 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();
@@ -735,11 +808,10 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
         'p-indeterminate': partialChecked
       });
       var iconClassName = 'p-checkbox-icon p-c';
-      var icon = checked ? props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, {
-        className: iconClassName
-      }) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React.createElement(MinusIcon, {
+      var checboxIconProps = mergeProps({
         className: iconClassName
-      }) : null;
+      }, getColumnCheckboxPTOptions(column, 'checkboxIcon'));
+      var icon = checked ? props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, checboxIconProps) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React.createElement(MinusIcon, checboxIconProps) : null;
       var checkIcon = IconUtils.getJSXIcon(icon, {
         className: iconClassName
       }, {
@@ -747,22 +819,32 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
         checked: checked,
         partialChecked: partialChecked
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-checkbox p-treetable-checkbox p-component",
+      var hiddenInputProps = mergeProps({
+        type: 'checkbox',
+        onFocus: function onFocus(e) {
+          return onCheckboxFocus();
+        },
+        onBlur: function onBlur(e) {
+          return onCheckboxBlur();
+        }
+      }, getColumnCheckboxPTOptions(column, 'hiddenInput'));
+      var checkboxWrapperProps = mergeProps({
+        className: 'p-checkbox p-treetable-checkbox p-component',
         ref: checkboxRef,
-        onClick: onCheckboxChange,
-        role: "checkbox",
-        "aria-checked": checked
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "p-hidden-accessible"
-      }, /*#__PURE__*/React.createElement("input", {
-        type: "checkbox",
-        onFocus: onCheckboxFocus,
-        onBlur: onCheckboxBlur
-      })), /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick(e) {
+          return onCheckboxChange(e);
+        },
+        role: 'checkbox',
+        'aria-checked': checked
+      }, getColumnCheckboxPTOptions(column, 'checkboxWrapper'));
+      var hiddenInputWrapperProps = mergeProps({
+        className: 'p-hidden-accessible'
+      }, getColumnCheckboxPTOptions(column, 'hiddenInputWrapper'));
+      var checkboxProps = mergeProps({
         className: _className,
         ref: checkboxBoxRef
-      }, checkIcon));
+      }, getColumnCheckboxPTOptions(column, 'checkbox'));
+      return /*#__PURE__*/React.createElement("div", checkboxWrapperProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", hiddenInputProps)), /*#__PURE__*/React.createElement("div", checkboxProps, checkIcon));
     } else {
       return null;
     }
@@ -770,8 +852,8 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
   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.createElement(TreeTableBodyCell, _extends({
       key: "".concat(getColumnProp(column, 'columnKey') || getColumnProp(column, 'field'), "_").concat(index)
@@ -780,7 +862,9 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
       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() {
@@ -796,6 +880,7 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
           expandedKeys: props.expandedKeys,
           selectOnEdit: props.selectOnEdit,
           onToggle: props.onToggle,
+          togglerTemplate: props.togglerTemplate,
           onExpand: props.onExpand,
           onCollapse: props.onCollapse,
           selectionMode: props.selectionMode,
@@ -803,6 +888,8 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
           onSelectionChange: props.onSelectionChange,
           metaKeySelection: props.metaKeySelection,
           onRowClick: props.onRowClick,
+          onRowMouseEnter: props.onRowMouseEnter,
+          onRowMouseLeave: props.onRowMouseLeave,
           onSelect: props.onSelect,
           onUnselect: props.onUnselect,
           propagateSelectionUp: props.propagateSelectionUp,
@@ -811,7 +898,9 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
           rowClassName: props.rowClassName,
           contextMenuSelectionKey: props.contextMenuSelectionKey,
           onContextMenuSelectionChange: props.onContextMenuSelectionChange,
-          onContextMenu: props.onContextMenu
+          onContextMenu: props.onContextMenu,
+          ptCallbacks: props.ptCallbacks,
+          metaData: props.metaData
         });
       });
     } else {
@@ -822,23 +911,39 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
   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 = classNames(className, props.node.className);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+  var rowProps = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", rowProps, cells), children);
 });
 TreeTableRow.displayName = 'TreeTableRow';
 
@@ -1002,6 +1107,7 @@ var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
       columns: props.columns,
       expandedKeys: props.expandedKeys,
       onToggle: props.onToggle,
+      togglerTemplate: props.togglerTemplate,
       onExpand: props.onExpand,
       onCollapse: props.onCollapse,
       selectionMode: props.selectionMode,
@@ -1009,6 +1115,8 @@ var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
       onSelectionChange: props.onSelectionChange,
       metaKeySelection: props.metaKeySelection,
       onRowClick: onRowClick,
+      onRowMouseEnter: props.onRowMouseEnter,
+      onRowMouseLeave: props.onRowMouseLeave,
       onSelect: props.onSelect,
       onUnselect: props.onUnselect,
       propagateSelectionUp: props.propagateSelectionUp,
@@ -1016,7 +1124,9 @@ var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
       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() {
@@ -1040,20 +1150,24 @@ var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
     } else {
       var colSpan = props.columns ? props.columns.length : null;
       var _content = props.emptyMessage || localeOption('emptyMessage');
-      return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-        className: "p-treetable-emptymessage",
+      var emptyMessageProps = mergeProps({
+        className: 'p-treetable-emptymessage'
+      }, props.ptCallbacks.ptm('emptyMessage'));
+      var bodyCellProps = mergeProps({
         colSpan: colSpan
-      }, _content));
+      }, props.ptCallbacks.ptm('bodyCell'));
+      return /*#__PURE__*/React.createElement("tr", emptyMessageProps, /*#__PURE__*/React.createElement("td", bodyCellProps, _content));
     }
   };
   var content = props.value && props.value.length ? createRows() : createEmptyMessage();
-  return /*#__PURE__*/React.createElement("tbody", {
-    className: "p-treetable-tbody"
-  }, content);
+  var tbodyProps = mergeProps({
+    className: 'p-treetable-tbody'
+  }, props.ptCallbacks.ptm('tbody'));
+  return /*#__PURE__*/React.createElement("tbody", tbodyProps, content);
 });
 TreeTableBody.displayName = 'TreeTableBody';
 
-var ColumnGroupBase = {
+var ColumnGroupBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'ColumnGroup',
     children: undefined
@@ -1064,45 +1178,50 @@ var ColumnGroupBase = {
   getCProps: function getCProps(group) {
     return ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps);
   }
-};
+});
 
-var RowBase = {
+var RowBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Row',
     style: null,
     className: null,
     children: undefined
   },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, RowBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, RowBase.defaultProps);
-  },
   getCProp: function getCProp(row, name) {
     return ObjectUtils.getComponentProp(row, name, RowBase.defaultProps);
   }
-};
+});
 
 var TreeTableFooter = /*#__PURE__*/React.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.createElement("td", {
+    var footerCellProps = 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.createElement("td", footerCellProps, getColumnProp(column, 'footer'));
   };
   var createFooterRow = function createFooterRow(row, index) {
     var rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children'));
     var rowFooterCells = rowColumns.map(createFooterCell);
-    return /*#__PURE__*/React.createElement("tr", {
+    var footerRowProps = mergeProps(props.ptCallbacks.ptm('footerRow'));
+    return /*#__PURE__*/React.createElement("tr", _extends({}, footerRowProps, {
       key: index
-    }, rowFooterCells);
+    }), rowFooterCells);
   };
   var createColumnGroup = function createColumnGroup() {
     var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
@@ -1111,7 +1230,8 @@ var TreeTableFooter = /*#__PURE__*/React.memo(function (props) {
   var createColumns = function createColumns(columns) {
     if (columns) {
       var headerCells = columns.map(createFooterCell);
-      return /*#__PURE__*/React.createElement("tr", null, headerCells);
+      var footerRowProps = mergeProps(props.ptCallbacks.ptm('footerRow'));
+      return /*#__PURE__*/React.createElement("tr", footerRowProps, headerCells);
     } else {
       return null;
     }
@@ -1130,9 +1250,10 @@ var TreeTableFooter = /*#__PURE__*/React.memo(function (props) {
   };
   var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
   if (hasFooter()) {
-    return /*#__PURE__*/React.createElement("tfoot", {
-      className: "p-treetable-tfoot"
-    }, content);
+    var tfootProps = mergeProps({
+      className: 'p-treetable-tfoot'
+    }, props.ptCallbacks.ptm('tfoot'));
+    return /*#__PURE__*/React.createElement("tfoot", tfootProps, content);
   } else {
     return null;
   }
@@ -1144,6 +1265,15 @@ function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o
 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.memo(function (props) {
   var filterTimeout = React.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;
@@ -1268,13 +1398,10 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
   var createSortIcon = function createSortIcon(column, sorted, sortOrder) {
     if (getColumnProp(column, 'sortable')) {
       var iconClassName = 'p-sortable-column-icon';
-      var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React.createElement(SortAmountDownIcon, {
-        className: iconClassName
-      }) : /*#__PURE__*/React.createElement(SortAmountUpAltIcon, {
-        className: iconClassName
-      }) : /*#__PURE__*/React.createElement(SortAltIcon, {
+      var sortIconProps = mergeProps({
         className: iconClassName
-      });
+      }, getColumnPTOptions(column, 'sortIcon'));
+      var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React.createElement(SortAmountDownIcon, sortIconProps) : /*#__PURE__*/React.createElement(SortAmountUpAltIcon, sortIconProps) : /*#__PURE__*/React.createElement(SortAltIcon, sortIconProps);
       var sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, {
         className: iconClassName
       }, {
@@ -1289,21 +1416,23 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
   };
   var createResizer = function createResizer(column) {
     if (props.resizableColumns) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: "p-column-resizer p-clickable",
+      var columnResizerProps = mergeProps({
+        className: 'p-column-resizer p-clickable',
         onMouseDown: function onMouseDown(e) {
           return onResizerMouseDown(e, column);
         }
-      });
+      }, getColumnPTOptions(column, 'columnResizer'));
+      return /*#__PURE__*/React.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.createElement("span", {
-        className: "p-sortable-column-badge"
-      }, sortMetaDataIndex + 1);
+      var sortBadgeProps = mergeProps({
+        className: 'p-sortable-column-badge'
+      }, getColumnPTOptions(column, 'sortBadge'));
+      return /*#__PURE__*/React.createElement("span", sortBadgeProps, sortMetaDataIndex + 1);
     }
     return null;
   };
@@ -1311,9 +1440,10 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
     var title = ObjectUtils.getJSXElement(getColumnProp(column, 'header'), {
       props: options
     });
-    return /*#__PURE__*/React.createElement("span", {
-      className: "p-column-title"
-    }, title);
+    var headerTitleProps = mergeProps({
+      className: 'p-column-title'
+    }, getColumnPTOptions(column, 'headerTitle'));
+    return /*#__PURE__*/React.createElement("span", headerTitleProps, title);
   };
   var createHeaderCell = function createHeaderCell(column, options) {
     var filterElement;
@@ -1326,17 +1456,19 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
         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.createElement("th", {
+      var headerCellProps = mergeProps({
         key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field') || options.index,
         className: 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.createElement("th", headerCellProps, filterElement);
     } else {
       var headerCellRef = /*#__PURE__*/React.createRef(null);
       var sortMetaDataIndex = getMultiSortMetaDataIndex(column);
@@ -1348,7 +1480,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
       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 = classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), {
         'p-sortable-column': getColumnProp(column, 'sortable'),
         'p-highlight': sorted,
@@ -1358,9 +1490,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
       var hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
       var title = createTitle(column, options);
       var resizer = createResizer(column);
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: column.columnKey || column.field || options.index
-      }, /*#__PURE__*/React.createElement("th", {
+      var _headerCellProps = mergeProps({
         ref: headerCellRef,
         className: className,
         style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
@@ -1376,7 +1506,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
         },
         rowSpan: getColumnProp(column, 'rowSpan'),
         colSpan: getColumnProp(column, 'colSpan'),
-        "aria-sort": ariaSortData,
+        'aria-sort': ariaSortData,
         onDragStart: function onDragStart(e) {
           return _onDragStart(e, column);
         },
@@ -1389,7 +1519,10 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
         onDrop: function onDrop(e) {
           return _onDrop(e, column);
         }
-      }, resizer, title, sortIconElement, sortBadge, filterElement), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+      }, getColumnPTOptions(column, 'headerCell'), getColumnPTOptions(column, 'root'));
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: column.columnKey || column.field || options.index
+      }, /*#__PURE__*/React.createElement("th", _headerCellProps, resizer, title, sortIconElement, sortBadge, filterElement), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
         target: headerCellRef,
         content: headerTooltip
       }, getColumnProp(column, 'headerTooltipOptions'))));
@@ -1404,9 +1537,10 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
         renderFilter: true
       });
     });
-    return /*#__PURE__*/React.createElement("tr", {
+    var headerRowProps = mergeProps(props.ptCallbacks.ptm('headerRow'));
+    return /*#__PURE__*/React.createElement("tr", _extends({}, headerRowProps, {
       key: index
-    }, rowHeaderCells);
+    }), rowHeaderCells);
   };
   var createColumnGroup = function createColumnGroup() {
     var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
@@ -1414,14 +1548,15 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
   };
   var createColumns = function createColumns(columns) {
     if (columns) {
+      var headerRowProps = mergeProps(props.ptCallbacks.ptm('headerRow'));
       if (hasColumnFilter(columns)) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", null, columns.map(function (col, i) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", headerRowProps, columns.map(function (col, i) {
           return createHeaderCell(col, {
             index: i,
             filterOnly: false,
             renderFilter: false
           });
-        })), /*#__PURE__*/React.createElement("tr", null, columns.map(function (col, i) {
+        })), /*#__PURE__*/React.createElement("tr", headerRowProps, columns.map(function (col, i) {
           return createHeaderCell(col, {
             index: i,
             filterOnly: true,
@@ -1429,7 +1564,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
           });
         })));
       } else {
-        return /*#__PURE__*/React.createElement("tr", null, columns.map(function (col, i) {
+        return /*#__PURE__*/React.createElement("tr", headerRowProps, columns.map(function (col, i) {
           return createHeaderCell(col, {
             index: i,
             filterOnly: false,
@@ -1442,9 +1577,10 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
-  return /*#__PURE__*/React.createElement("thead", {
-    className: "p-treetable-thead"
-  }, content);
+  var theadProps = mergeProps({
+    className: 'p-treetable-thead'
+  }, props.ptCallbacks.ptm('thead'));
+  return /*#__PURE__*/React.createElement("thead", theadProps, content);
 });
 TreeTableHeader.displayName = 'TreeTableHeader';
 
@@ -1523,9 +1659,10 @@ var TreeTableScrollableView = /*#__PURE__*/React.memo(function (props) {
           key: col.field + '_' + i
         });
       });
-      return /*#__PURE__*/React.createElement("colgroup", {
-        className: "p-treetable-scrollable-colgroup"
-      }, cols);
+      var scrollableColgroupProps = mergeProps({
+        className: 'p-treetable-scrollable-colgroup'
+      }, props.ptCallbacks.ptm('scrollableColgroup'));
+      return /*#__PURE__*/React.createElement("colgroup", scrollableColgroupProps, cols);
     } else {
       return null;
     }
@@ -1540,42 +1677,55 @@ var TreeTableScrollableView = /*#__PURE__*/React.memo(function (props) {
   var scrollableBodyStyle = !props.frozen && props.scrollHeight ? {
     overflowY: 'scroll'
   } : null;
-  return /*#__PURE__*/React.createElement("div", {
+  var scrollableProps = mergeProps({
     className: className,
     style: {
       width: width,
       left: left
     },
     ref: elementRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-treetable-scrollable-header",
+  }, props.ptCallbacks.ptm('scrollable'));
+  var scrollableHeaderProps = mergeProps({
+    className: 'p-treetable-scrollable-header',
     ref: scrollHeaderRef,
-    onScroll: onHeaderScroll
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-treetable-scrollable-header-box",
+    onScroll: function onScroll(e) {
+      return onHeaderScroll();
+    }
+  }, props.ptCallbacks.ptm('scrollableHeader'));
+  var scrollableHeaderBoxProps = mergeProps({
+    className: 'p-treetable-scrollable-header-box',
     ref: scrollHeaderBoxRef
-  }, /*#__PURE__*/React.createElement("table", {
-    className: "p-treetable-scrollable-header-table"
-  }, colGroup, props.header))), /*#__PURE__*/React.createElement("div", {
-    className: "p-treetable-scrollable-body",
+  }, props.ptCallbacks.ptm('scrollableHeaderBox'));
+  var scrollableHeaderTableProps = mergeProps({
+    className: 'p-treetable-scrollable-header-table'
+  }, props.ptCallbacks.ptm('scrollableHeaderTable'));
+  var scrollableBodyProps = mergeProps({
+    className: 'p-treetable-scrollable-body',
     ref: scrollBodyRef,
     style: scrollableBodyStyle,
-    onScroll: onBodyScroll
-  }, /*#__PURE__*/React.createElement("table", {
+    onScroll: function onScroll(e) {
+      return onBodyScroll();
+    }
+  }, props.ptCallbacks.ptm('scrollableBody'));
+  var scrollableBodyTableProps = mergeProps({
     ref: scrollTableRef,
     style: {
       top: '0'
     },
-    className: "p-treetable-scrollable-body-table"
-  }, colGroup, props.body)), /*#__PURE__*/React.createElement("div", {
-    className: "p-treetable-scrollable-footer",
+    className: 'p-treetable-scrollable-body-table'
+  }, props.ptCallbacks.ptm('scrollableBodyTable'));
+  var scrollableFooterProps = mergeProps({
+    className: 'p-treetable-scrollable-footer',
     ref: scrollFooterRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-treetable-scrollable-footer-box",
+  }, props.ptCallbacks.ptm('scrollableFooter'));
+  var scrollableFooterBoxProps = mergeProps({
+    className: 'p-treetable-scrollable-footer-box',
     ref: scrollFooterBoxRef
-  }, /*#__PURE__*/React.createElement("table", {
-    className: "p-treetable-scrollable-footer-table"
-  }, colGroup, props.footer))));
+  }, props.ptCallbacks.ptm('scrollableFooterBox'));
+  var scrollableFooterTableProps = mergeProps({
+    className: 'p-treetable-scrollable-footer-table'
+  }, props.ptCallbacks.ptm('scrollableFooterTable'));
+  return /*#__PURE__*/React.createElement("div", scrollableProps, /*#__PURE__*/React.createElement("div", scrollableHeaderProps, /*#__PURE__*/React.createElement("div", scrollableHeaderBoxProps, /*#__PURE__*/React.createElement("table", scrollableHeaderTableProps, colGroup, props.header))), /*#__PURE__*/React.createElement("div", scrollableBodyProps, /*#__PURE__*/React.createElement("table", scrollableBodyTableProps, colGroup, props.body)), /*#__PURE__*/React.createElement("div", scrollableFooterProps, /*#__PURE__*/React.createElement("div", scrollableFooterBoxProps, /*#__PURE__*/React.createElement("table", scrollableFooterTableProps, colGroup, props.footer))));
 });
 TreeTableScrollableView.displayName = 'TreeTableScrollableView';
 
@@ -1585,7 +1735,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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.forwardRef(function (inProps, ref) {
-  var props = TreeTableBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = TreeTableBase.getProps(inProps, context);
   var _React$useState = React.useState(props.expandedKeys),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     expandedKeysState = _React$useState2[0],
@@ -1618,6 +1769,20 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     _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.useRef(null);
   var tableRef = React.useRef(null);
   var resizerHelperRef = React.useRef(null);
@@ -1797,13 +1962,13 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     var value2 = ObjectUtils.resolveFieldData(node2.data, multiSortMeta[index].field);
 
     // check if they are equal handling dates and locales
-    if (ObjectUtils.compare(value1, value2, PrimeReact.locale) === 0) {
+    if (ObjectUtils.compare(value1, value2, context && context.locale || PrimeReact.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 ObjectUtils.sort(value1, value2, order, PrimeReact.locale, PrimeReact.nullSortOrder);
+    return ObjectUtils.sort(value1, value2, order, context && context.locale || PrimeReact.locale, context && context.nullSortOrder || PrimeReact.nullSortOrder);
   };
   var filter = function filter(value, field, mode) {
     onFilter({
@@ -2362,13 +2527,17 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       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.createElement(TreeTableFooter, {
       columns: columns,
-      columnGroup: columnGroup
+      columnGroup: columnGroup,
+      ptCallbacks: ptCallbacks,
+      metaData: metaData
     });
   };
   var createTableBody = function createTableBody(value, columns) {
@@ -2379,6 +2548,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       expandedKeys: getExpandedKeys(),
       selectOnEdit: props.selectOnEdit,
       onToggle: onToggle,
+      togglerTemplate: props.togglerTemplate,
       onExpand: props.onExpand,
       onCollapse: props.onCollapse,
       paginator: props.paginator,
@@ -2389,6 +2559,8 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       onSelectionChange: props.onSelectionChange,
       metaKeySelection: props.metaKeySelection,
       onRowClick: props.onRowClick,
+      onRowMouseEnter: props.onRowMouseEnter,
+      onRowMouseLeave: props.onRowMouseLeave,
       onSelect: props.onSelect,
       onUnselect: props.onUnselect,
       propagateSelectionUp: props.propagateSelectionUp,
@@ -2399,7 +2571,9 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       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) {
@@ -2417,7 +2591,8 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       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) {
@@ -2431,7 +2606,9 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       footer: footer,
       scrollHeight: props.scrollHeight,
       frozen: frozen,
-      frozenWidth: props.frozenWidth
+      frozenWidth: props.frozenWidth,
+      ptCallbacks: ptCallbacks,
+      metaData: metaData
     });
   };
   var createScrollableTable = function createScrollableTable(value) {
@@ -2443,9 +2620,10 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       frozenView = createScrollableView(value, frozenColumns, true, props.frozenHeaderColumnGroup, props.frozenFooterColumnGroup);
     }
     scrollableView = createScrollableView(value, scrollableColumns, false, props.headerColumnGroup, props.footerColumnGroup);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-treetable-wrapper p-treetable-scrollable-wrapper"
-    }, frozenView, scrollableView);
+    var scrollableWrapper = mergeProps({
+      className: 'p-treetable-wrapper p-treetable-scrollable-wrapper'
+    }, ptCallbacks.ptm('scrollableWrapper'));
+    return /*#__PURE__*/React.createElement("div", scrollableWrapper, frozenView, scrollableView);
   };
   var createRegularTable = function createRegularTable(value) {
     var columns = getColumns();
@@ -2457,13 +2635,15 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       'p-treetable-resizable-table': props.resizableColumns,
       'p-treetable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
     }, props.tableClassName);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-treetable-wrapper"
-    }, /*#__PURE__*/React.createElement("table", {
+    var wrapperProps = mergeProps({
+      className: 'p-treetable-wrapper'
+    }, ptCallbacks.ptm('wrapper'));
+    var tableProps = mergeProps({
       ref: tableRef,
       style: props.tableStyle,
       className: tableClassName
-    }, header, footer, body));
+    }, ptCallbacks.ptm('table'));
+    return /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("table", tableProps, header, footer, body));
   };
   var createTable = function createTable(value) {
     return props.scrollable ? createScrollableTable(value) : createRegularTable(value);
@@ -2471,25 +2651,26 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var createLoader = function createLoader() {
     if (props.loading) {
       var iconClassName = 'p-treetable-loading-icon';
-      var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, {
-        className: iconClassName,
-        spin: true
-      });
-      var loadingIcon = IconUtils.getJSXIcon(icon, {
+      var loadingIconProps = mergeProps({
         className: iconClassName
-      }, {
+      }, ptCallbacks.ptm('loadingIcon'));
+      var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
+        spin: true
+      }));
+      var loadingIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
         props: props
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-treetable-loading"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "p-treetable-loading-overlay p-component-overlay"
-      }, loadingIcon));
+      var loadingWrapperProps = mergeProps({
+        className: 'p-treetable-loading'
+      }, ptCallbacks.ptm('loadingWrapper'));
+      var loadingOverlayProps = mergeProps({
+        className: 'p-treetable-loading-overlay p-component-overlay'
+      }, ptCallbacks.ptm('loadingOverlay'));
+      return /*#__PURE__*/React.createElement("div", loadingWrapperProps, /*#__PURE__*/React.createElement("div", loadingOverlayProps, loadingIcon));
     }
     return null;
   };
   var data = processData();
-  var otherProps = ObjectUtils.findDiffKeys(props, TreeTable.defaultProps);
   var className = classNames('p-treetable p-component', {
     'p-treetable-hoverable-rows': props.rowHover,
     'p-treetable-selectable': isRowSelectionMode(),
@@ -2500,31 +2681,35 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   }, props.className);
   var table = createTable(data);
   var totalRecords = getTotalRecords(data);
-  var headerFacet = props.header && /*#__PURE__*/React.createElement("div", {
-    className: "p-treetable-header"
-  }, props.header);
-  var footerFacet = props.footer && /*#__PURE__*/React.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.createElement("div", {
+  var headerProps = mergeProps({
+    className: 'p-treetable-header'
+  }, ptCallbacks.ptm('header'));
+  var footerProps = mergeProps({
+    className: 'p-treetable-footer'
+  }, ptCallbacks.ptm('footer'));
+  var resizeHelperProps = 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.createElement("div", headerProps, props.header);
+  var footerFacet = props.footer && /*#__PURE__*/React.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.createElement("div", resizeHelperProps);
   var style = {
     position: 'absolute',
     display: 'none'
   };
-  var reorderIndicatorUpProps = {
+  var reorderIndicatorUpProps = mergeProps({
     className: 'p-datatable-reorder-indicator-up',
     style: _objectSpread({}, style)
-  };
-  var reorderIndicatorUpIcon = props.reorderableColumns && IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React.createElement(ArrowDownIcon, null), undefined, {
+  }, ptCallbacks.ptm('reorderIndicatorUp'));
+  var reorderIndicatorUpIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon'));
+  var reorderIndicatorUpIcon = props.reorderableColumns && IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React.createElement(ArrowDownIcon, reorderIndicatorUpIconProps), _objectSpread({}, reorderIndicatorUpIconProps), {
     props: props
   });
   var reorderIndicatorUp = props.reorderableColumns && /*#__PURE__*/React.createElement("span", _extends({
@@ -2534,19 +2719,21 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     className: 'p-datatable-reorder-indicator-down',
     style: _objectSpread({}, style)
   };
-  var reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React.createElement(ArrowUpIcon, null), undefined, {
+  var reorderIndicatorDownIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
+  var reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React.createElement(ArrowUpIcon, reorderIndicatorDownIconProps), _objectSpread({}, reorderIndicatorDownIconProps), {
     props: props
   });
   var reorderIndicatorDown = props.reorderableColumns && /*#__PURE__*/React.createElement("span", _extends({
     ref: reorderIndicatorDownRef
   }, reorderIndicatorDownProps), reorderIndicatorDownIcon);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  var rootProps = 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'
+  }, ObjectUtils.findDiffKeys(props, TreeTable.defaultProps), ptCallbacks.ptm('root'));
+  return /*#__PURE__*/React.createElement("div", rootProps, loader, headerFacet, paginatorTop, table, paginatorBottom, footerFacet, resizeHelper, reorderIndicatorUp, reorderIndicatorDown);
 });
 TreeTable.displayName = 'TreeTable';