primereact 9.4.0 → 9.6.0

package/datatable/datatable.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks, arrowdown, arrowup, spinner, paginator, virtualscroller, bars, check, chevrondown, chevronright, pencil, times, overlayservice, ripple, button, csstransition, dropdown, filter, filterslash, plus, trash, inputtext, portal, sortalt, sortamountdown, sortamountupalt, tooltip) {
+this.primereact.datatable = (function (exports, React, PrimeReact, componentbase, utils, hooks, arrowdown, arrowup, spinner, paginator, virtualscroller, bars, check, chevrondown, chevronright, pencil, times, overlayservice, ripple, button, csstransition, dropdown, filter, filterslash, plus, trash, inputtext, portal, sortalt, sortamountdown, sortamountupalt, tooltip) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -152,7 +152,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var ColumnBase = {
+  var ColumnBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Column',
       align: null,
@@ -242,9 +242,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     getCOtherProps: function getCOtherProps(column) {
       return utils.ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps);
     }
-  };
+  });
 
-  var DataTableBase = {
+  var DataTableBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'DataTable',
       alwaysShowPaginator: true,
@@ -387,14 +387,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       value: null,
       virtualScrollerOptions: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, DataTableBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, DataTableBase.defaultProps);
     }
-  };
+  });
 
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
@@ -425,61 +419,88 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     return target;
   }
 
+  function ownKeys$a(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
-    var onFocus = function onFocus() {
+    var getColumnProps = function getColumnProps() {
+      return ColumnBase.getCProps(props.column);
+    };
+    var getColumnPTOptions = function getColumnPTOptions(key) {
+      return props.ptCallbacks.ptmo(ColumnBase.getCProp(props.column, 'pt'), key, {
+        props: getColumnProps(),
+        parent: props.metaData,
+        context: {
+          checked: props.checked,
+          disabled: props.disabled
+        },
+        state: {
+          focused: focusedState
+        }
+      });
+    };
+    var _onFocus = function onFocus() {
       setFocusedState(true);
     };
-    var onBlur = function onBlur() {
+    var _onBlur = function onBlur() {
       setFocusedState(false);
     };
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event) {
       if (!props.disabled) {
         setFocusedState(true);
         props.onChange(event);
       }
     };
-    var onKeyDown = function onKeyDown(event) {
+    var _onKeyDown = function onKeyDown(event) {
       if (event.code === 'Space' || event.key === ' ') {
         // event.key is for Android support
-        onClick(event);
+        _onClick(event);
         event.preventDefault();
       }
     };
     var className = utils.classNames('p-checkbox p-component', {
-      'p-checkbox-focused': focusedState
+      'p-checkbox-focused': focusedState,
+      'p-disabled': props.disabled
     });
     var boxClassName = utils.classNames('p-checkbox-box p-component', {
       'p-highlight': props.checked,
-      'p-disabled': props.disabled,
       'p-focus': focusedState
     });
     var iconClassName = 'p-checkbox-icon';
-    var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
+    var checkboxIconProps = utils.mergeProps({
       className: iconClassName
-    }) : null;
-    var checkIcon = utils.IconUtils.getJSXIcon(icon, {
-      className: iconClassName
-    }, {
+    }, getColumnPTOptions('checkboxIcon'));
+    var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, checkboxIconProps) : null;
+    var checkIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$a({}, checkboxIconProps), {
       props: props
     });
     var tabIndex = props.disabled ? null : '0';
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    var checkboxWrapperProps = utils.mergeProps({
       className: className,
-      onClick: onClick
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+      onClick: function onClick(e) {
+        return _onClick(e);
+      }
+    }, getColumnPTOptions('checkboxWrapper'));
+    var checkboxProps = utils.mergeProps({
       className: boxClassName,
-      role: "checkbox",
-      "aria-checked": props.checked,
+      role: 'checkbox',
+      'aria-checked': props.checked,
       tabIndex: tabIndex,
-      onKeyDown: onKeyDown,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      "aria-label": props.ariaLabel
-    }, checkIcon));
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
+      },
+      onFocus: function onFocus(e) {
+        return _onFocus();
+      },
+      onBlur: function onBlur(e) {
+        return _onBlur();
+      },
+      'aria-label': props.ariaLabel
+    }, getColumnPTOptions('checkbox'));
+    return /*#__PURE__*/React__namespace.createElement("div", checkboxWrapperProps, /*#__PURE__*/React__namespace.createElement("div", checkboxProps, checkIcon));
   });
   RowCheckbox.displayName = 'RowCheckbox';
 
@@ -489,64 +510,95 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
     var inputRef = React__namespace.useRef(null);
-    var onFocus = function onFocus() {
+    var getColumnProps = function getColumnProps() {
+      return ColumnBase.getCProps(props.column);
+    };
+    var getColumnPTOptions = function getColumnPTOptions(key) {
+      return props.ptCallbacks.ptmo(ColumnBase.getCProp(props.column, 'pt'), key, {
+        props: getColumnProps(),
+        parent: props.metaData,
+        context: {
+          checked: props.checked,
+          disabled: props.disabled
+        },
+        state: {
+          focused: focusedState
+        }
+      });
+    };
+    var _onFocus = function onFocus() {
       setFocusedState(true);
     };
-    var onBlur = function onBlur() {
+    var _onBlur = function onBlur() {
       setFocusedState(false);
     };
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event) {
       if (!props.disabled) {
         props.onChange(event);
         utils.DomHandler.focus(inputRef.current);
       }
     };
-    var onKeyDown = function onKeyDown(event) {
+    var _onKeyDown = function onKeyDown(event) {
       if (event.code === 'Space' || event.key === ' ') {
         // event.key is for Android support
-        onClick(event);
+        _onClick(event);
         event.preventDefault();
       }
     };
-    var onChange = function onChange(event) {
-      onClick(event);
+    var _onChange = function onChange(event) {
+      _onClick(event);
     };
     var className = utils.classNames('p-radiobutton p-component', {
-      'p-radiobutton-focused': focusedState
+      'p-radiobutton-focused': focusedState,
+      'p-disabled': props.disabled
     });
     var boxClassName = utils.classNames('p-radiobutton-box p-component', {
       'p-highlight': props.checked,
-      'p-focus': focusedState,
-      'p-disabled': props.disabled
+      'p-focus': focusedState
     });
     var name = "".concat(props.tableSelector, "_dt_radio");
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    var radiobuttonWrapperProps = utils.mergeProps({
       className: className
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-hidden-accessible"
-    }, /*#__PURE__*/React__namespace.createElement("input", {
+    }, getColumnPTOptions('radiobuttonWrapper'));
+    var hiddenInputWrapperProps = utils.mergeProps({
+      className: 'p-hidden-accessible'
+    }, getColumnPTOptions('hiddenInputWrapper'));
+    var hiddenInputProps = utils.mergeProps({
       name: name,
       ref: inputRef,
-      type: "radio",
+      type: 'radio',
       checked: props.checked,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onChange: onChange,
-      onKeyDown: onKeyDown,
-      "aria-label": props.ariaLabel
-    })), /*#__PURE__*/React__namespace.createElement("div", {
+      onFocus: function onFocus(e) {
+        return _onFocus();
+      },
+      onBlur: function onBlur(e) {
+        return _onBlur();
+      },
+      onChange: function onChange(e) {
+        return _onChange(e);
+      },
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
+      },
+      'aria-label': props.ariaLabel
+    }, getColumnPTOptions('hiddenInput'));
+    var radiobuttonProps = utils.mergeProps({
       className: boxClassName,
-      onClick: onClick,
-      role: "radio",
-      "aria-checked": props.checked
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-radiobutton-icon"
-    })));
+      onClick: function onClick(e) {
+        return _onClick(e);
+      },
+      role: 'radio',
+      'aria-checked': props.checked
+    }, getColumnPTOptions('radiobutton'));
+    var radiobuttonIconProps = utils.mergeProps({
+      className: 'p-radiobutton-icon'
+    }, getColumnPTOptions('radiobuttonIcon'));
+    return /*#__PURE__*/React__namespace.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", hiddenInputProps)), /*#__PURE__*/React__namespace.createElement("div", radiobuttonProps, /*#__PURE__*/React__namespace.createElement("div", radiobuttonIconProps)));
   });
   RowRadioButton.displayName = 'RowRadioButton';
 
-  function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     var _React$useState = React__namespace.useState(props.editing),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -569,6 +621,21 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     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: {
+          styleObject: styleObjectState,
+          editing: editingState,
+          editingRowData: editingRowDataState
+        }
+      });
+    };
     var field = getColumnProp('field') || "field_".concat(props.index);
     var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
     var _useEventListener = hooks.useEventListener({
@@ -624,7 +691,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var getCellCallbackParams = function getCellCallbackParams(event) {
       var params = getCellParams();
-      return _objectSpread$8({
+      return _objectSpread$9({
         originalEvent: event
       }, params);
     };
@@ -662,7 +729,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var callbackParams = getCellCallbackParams(event);
       var newRowData = editingRowDataState;
       var newValue = resolveFieldData(newRowData);
-      var params = _objectSpread$8(_objectSpread$8({}, callbackParams), {}, {
+      var params = _objectSpread$9(_objectSpread$9({}, callbackParams), {}, {
         newRowData: newRowData,
         newValue: newValue
       });
@@ -728,7 +795,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var updateStickyPosition = function updateStickyPosition() {
       if (getColumnProp('frozen')) {
-        var styleObject = _objectSpread$8({}, styleObjectState);
+        var styleObject = _objectSpread$9({}, styleObjectState);
         var align = getColumnProp('alignFrozen');
         if (align === 'right') {
           var right = 0;
@@ -750,7 +817,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
     };
     var editorCallback = function editorCallback(val) {
-      var editingRowData = _objectSpread$8({}, editingRowDataState);
+      var editingRowData = _objectSpread$9({}, editingRowDataState);
       editingRowData[field] = val;
       setEditingRowDataState(editingRowData);
 
@@ -760,7 +827,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         currentData[field] = val;
       }
     };
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event) {
       var params = getCellCallbackParams(event);
       if (props.editMode !== 'row' && isEditable() && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.selected)) {
         selfClick.current = true;
@@ -807,15 +874,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         props.onClick(params);
       }
     };
-    var onMouseDown = function onMouseDown(event) {
+    var _onMouseDown = function onMouseDown(event) {
       var params = getCellCallbackParams(event);
       props.onMouseDown && props.onMouseDown(params);
     };
-    var onMouseUp = function onMouseUp(event) {
+    var _onMouseUp = function onMouseUp(event) {
       var params = getCellCallbackParams(event);
       props.onMouseUp && props.onMouseUp(params);
     };
-    var onKeyDown = function onKeyDown(event) {
+    var _onKeyDown = function onKeyDown(event) {
       if (props.editMode !== 'row') {
         if (event.which === 13 || event.which === 9) {
           // tab || enter
@@ -874,7 +941,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           case 13:
             // @deprecated
             if (!utils.DomHandler.isClickable(target)) {
-              onClick(event);
+              _onClick(event);
               event.preventDefault();
             }
             break;
@@ -882,21 +949,21 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           //space
           case 32:
             if (!utils.DomHandler.isClickable(target) && !target.readOnly) {
-              onClick(event);
+              _onClick(event);
               event.preventDefault();
             }
             break;
         }
       }
     };
-    var onBlur = function onBlur(event) {
+    var _onBlur = function onBlur(event) {
       selfClick.current = false;
       if (props.editMode !== 'row' && editingState && getColumnProp('cellEditValidatorEvent') === 'blur') {
         switchCellToViewMode(event, true);
       }
     };
     var onEditorFocus = function onEditorFocus(event) {
-      onClick(event);
+      _onClick(event);
     };
     var onRadioChange = function onRadioChange(event) {
       props.onRadioChange({
@@ -964,7 +1031,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     React__namespace.useEffect(function () {
       if (props.editMode === 'cell' || props.editMode === 'row') {
         var callbackParams = getCellCallbackParams();
-        var params = _objectSpread$8(_objectSpread$8({}, callbackParams), {}, {
+        var params = _objectSpread$9(_objectSpread$9({}, callbackParams), {}, {
           editing: editingState,
           editingKey: editingKey
         });
@@ -989,7 +1056,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         field: field
       });
       var content = utils.ObjectUtils.getJSXElement(getVirtualScrollerOption('loadingTemplate'), options);
-      return /*#__PURE__*/React__namespace.createElement("td", null, content);
+      var bodyCellProps = utils.mergeProps(getColumnPTOptions('bodyCell'));
+      return /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, content);
     };
     var createElement = function createElement() {
       var content, editorKeyHelper;
@@ -1027,9 +1095,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         'p-highlight': cellSelected
       }, "p-align-".concat(align), !!align));
       var style = getStyle();
-      var title = props.responsiveLayout === 'stack' && /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-column-title"
-      }, utils.ObjectUtils.getJSXElement(header, {
+      var columnTitleProps = utils.mergeProps({
+        className: 'p-column-title'
+      }, getColumnProp('columnTitle'));
+      var title = props.responsiveLayout === 'stack' && /*#__PURE__*/React__namespace.createElement("span", columnTitleProps, utils.ObjectUtils.getJSXElement(header, {
         props: props.tableProps
       }));
       if (selectionMode) {
@@ -1044,17 +1113,31 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           label = "".concat(props.selected ? PrimeReact.ariaLabel('unselectLabel') : PrimeReact.ariaLabel('selectLabel'), " ").concat(ariaLabelText);
         }
         content = showSelection && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__namespace.createElement(RowRadioButton, {
+          column: props.column,
           checked: props.selected,
+          disabled: !props.isSelectable({
+            data: props.rowData,
+            index: props.rowIndex
+          }),
           onChange: onRadioChange,
           tabIndex: props.tabIndex,
           tableSelector: props.tableSelector,
-          ariaLabel: label
+          ariaLabel: label,
+          ptCallbacks: props.ptCallbacks,
+          metaData: props.metaData
         }), selectionMode === 'multiple' && /*#__PURE__*/React__namespace.createElement(RowCheckbox, {
+          column: props.column,
           checked: props.selected,
+          disabled: !props.isSelectable({
+            data: props.rowData,
+            index: props.rowIndex
+          }),
           onChange: onCheckboxChange,
           tabIndex: props.tabIndex,
           ariaLabel: label,
-          checkIcon: props.checkIcon
+          checkIcon: props.checkIcon,
+          ptCallbacks: props.ptCallbacks,
+          metaData: props.metaData
         }));
       } else if (rowReorder) {
         var showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, {
@@ -1062,21 +1145,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           props: props.tableProps
         }) : true;
         var rowReorderIconClassName = 'p-datatable-reorderablerow-handle';
-        var rowReorderIcon = getColumnProp('rowReorderIcon') || /*#__PURE__*/React__namespace.createElement(bars.BarsIcon, {
-          className: rowReorderIconClassName
-        });
-        content = showReorder && utils.IconUtils.getJSXIcon(rowReorderIcon, {
+        var rowReorderIconProps = utils.mergeProps({
           className: rowReorderIconClassName
-        }, {
+        }, getColumnProp('rowReorderIcon'));
+        var rowReorderIcon = getColumnProp('rowReorderIcon') || /*#__PURE__*/React__namespace.createElement(bars.BarsIcon, rowReorderIconProps);
+        content = showReorder && utils.IconUtils.getJSXIcon(rowReorderIcon, _objectSpread$9({}, rowReorderIconProps), {
           props: props
         });
       } else if (expander) {
-        var iconProps = {
+        var rowTogglerIconProps = utils.mergeProps({
           className: 'p-row-toggler-icon',
           'aria-hidden': true
-        };
-        var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, iconProps) : props.collapsedRowIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, iconProps);
-        var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$8({}, iconProps), {
+        }, getColumnProp('rowTogglerIcon'));
+        var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, rowTogglerIconProps) : props.collapsedRowIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, rowTogglerIconProps);
+        var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$9({}, rowTogglerIconProps), {
           props: props
         });
         var ariaControls = "".concat(props.tableSelector, "_content_").concat(props.rowIndex, "_expanded");
@@ -1087,13 +1169,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           onClick: onRowToggle,
           className: 'p-row-toggler p-link'
         };
-        content = /*#__PURE__*/React__namespace.createElement("button", _extends({}, expanderProps, {
-          type: "button",
-          "aria-expanded": props.expanded,
-          "aria-controls": ariaControls,
+        var rowTogglerProps = utils.mergeProps(_objectSpread$9(_objectSpread$9({}, expanderProps), {}, {
+          type: 'button',
+          'aria-expanded': props.expanded,
+          'aria-controls': ariaControls,
           tabIndex: props.tabIndex,
-          "aria-label": _label
-        }), togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+          'aria-label': _label
+        }), getColumnPTOptions('rowToggler'));
+        content = /*#__PURE__*/React__namespace.createElement("button", rowTogglerProps, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
         if (body) {
           expanderProps['element'] = content;
           content = utils.ObjectUtils.getJSXElement(body, props.rowData, {
@@ -1110,25 +1193,22 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         var rowEditorSaveIconClassName = 'p-row-editor-save-icon',
           rowEditorCancelIconClassName = 'p-row-editor-cancel-icon',
           rowEditorInitIconClassName = 'p-row-editor-init-icon';
-        var rowEditorSaveIcon = utils.IconUtils.getJSXIcon(props.rowEditorSaveIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
-          className: rowEditorSaveIconClassName
-        }), {
+        var rowEditorSaveIconProps = utils.mergeProps({
           className: rowEditorSaveIconClassName
-        }, {
+        }, getColumnProp('rowEditorSaveIconProps'));
+        var rowEditorCancelIconProps = utils.mergeProps({
+          className: rowEditorCancelIconClassName
+        }, getColumnProp('rowEditorCancelIconProps'));
+        var rowEditorInitIconProps = utils.mergeProps({
+          className: rowEditorInitIconClassName
+        }, getColumnProp('rowEditorInitIconProps'));
+        var rowEditorSaveIcon = utils.IconUtils.getJSXIcon(props.rowEditorSaveIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, rowEditorSaveIconProps), _objectSpread$9({}, rowEditorSaveIconProps), {
           props: props
         });
-        var rowEditorCancelIcon = utils.IconUtils.getJSXIcon(props.rowEditorCancelIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, {
-          className: rowEditorCancelIconClassName
-        }), {
-          className: rowEditorCancelIconClassName
-        }, {
+        var rowEditorCancelIcon = utils.IconUtils.getJSXIcon(props.rowEditorCancelIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, rowEditorCancelIconProps), _objectSpread$9({}, rowEditorCancelIconProps), {
           props: props
         });
-        var rowEditorInitIcon = utils.IconUtils.getJSXIcon(props.rowEditorInitIcon || /*#__PURE__*/React__namespace.createElement(pencil.PencilIcon, {
-          className: rowEditorInitIconClassName
-        }), {
-          className: rowEditorInitIconClassName
-        }, {
+        var rowEditorInitIcon = utils.IconUtils.getJSXIcon(props.rowEditorInitIcon || /*#__PURE__*/React__namespace.createElement(pencil.PencilIcon, rowEditorInitIconProps), _objectSpread$9({}, rowEditorInitIconProps), {
           props: props
         });
         if (editingState) {
@@ -1139,32 +1219,35 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
             onCancelClick: onRowEditCancel,
             cancelClassName: 'p-row-editor-cancel p-link'
           };
-          content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", {
-            type: "button",
-            name: "row-save",
+          var rowEditorEditButtonProps = utils.mergeProps({
+            type: 'button',
+            name: 'row-save',
             onClick: rowEditorProps.onSaveClick,
             className: rowEditorProps.saveClassName,
             tabIndex: props.tabIndex
-          }, rowEditorSaveIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", {
-            type: "button",
-            name: "row-cancel",
+          }, getColumnPTOptions('rowEditorSaveButtonProps'));
+          var rowEditorCancelButtonProps = utils.mergeProps({
+            type: 'button',
+            name: 'row-cancel',
             onClick: rowEditorProps.onCancelClick,
             className: rowEditorProps.cancelClassName,
             tabIndex: props.tabIndex
-          }, rowEditorCancelIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
+          }, getColumnPTOptions('rowEditorCancelButtonProps'));
+          content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", rowEditorEditButtonProps, rowEditorSaveIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", rowEditorCancelButtonProps, rowEditorCancelIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
         } else {
           rowEditorProps = {
             editing: false,
             onInitClick: onRowEditInit,
             initClassName: 'p-row-editor-init p-link'
           };
-          content = /*#__PURE__*/React__namespace.createElement("button", {
-            type: "button",
-            name: "row-edit",
+          var rowEditorInitButtonProps = utils.mergeProps({
+            type: 'button',
+            name: 'row-edit',
             onClick: rowEditorProps.onInitClick,
             className: rowEditorProps.initClassName,
             tabIndex: props.tabIndex
-          }, rowEditorInitIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+          }, getColumnPTOptions('rowEditorInitButtonProps'));
+          content = /*#__PURE__*/React__namespace.createElement("button", rowEditorInitButtonProps, rowEditorInitIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
         }
         if (body) {
           rowEditorProps['element'] = content;
@@ -1201,42 +1284,70 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
       content = typeof content == 'boolean' ? content.toString() : content;
       if (!isRowEditor && editor) {
-        /* eslint-disable */
-        editorKeyHelper = /*#__PURE__*/React__namespace.createElement("a", {
-          tabIndex: "0",
+        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(e);
+          }
+        }, getColumnPTOptions('editorKeyHelperLabel'));
+        var editorKeyHelperLabelProps = utils.mergeProps(getColumnPTOptions('editorKeyHelper'));
+        /* eslint-disable */
+        editorKeyHelper = /*#__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,
         style: style,
         className: className,
         rowSpan: props.rowSpan,
         tabIndex: tabIndex,
-        role: "cell",
-        onClick: onClick,
-        onKeyDown: onKeyDown,
-        onBlur: onBlur,
-        onMouseDown: onMouseDown,
-        onMouseUp: onMouseUp
-      }, editorKeyHelper, title, content);
+        role: 'cell',
+        onClick: function onClick(e) {
+          return _onClick(e);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return _onKeyDown(e);
+        },
+        onBlur: function onBlur(e) {
+          return _onBlur(e);
+        },
+        onMouseDown: function onMouseDown(e) {
+          return _onMouseDown(e);
+        },
+        onMouseUp: function onMouseUp(e) {
+          return _onMouseUp(e);
+        }
+      }, getColumnPTOptions('bodyCell'), getColumnPTOptions('root'));
+      return /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, editorKeyHelper, title, content);
     };
     return getVirtualScrollerOption('loading') ? createLoading() : createElement();
   });
   BodyCell.displayName = 'BodyCell';
 
-  function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       editingState = _React$useState2[0],
       setEditingState = _React$useState2[1];
     var editing = props.onRowEditChange ? props.editing : editingState;
+    var getColumnProps = function getColumnProps(column) {
+      return ColumnBase.getCProps(column);
+    };
+    var getColumnPTOptions = function getColumnPTOptions(key) {
+      var cProps = getColumnProps(props.column);
+      return props.ptCallbacks.ptmo(cProps, key, {
+        props: cProps,
+        parent: props.metaData,
+        state: {
+          editing: editingState
+        }
+      });
+    };
     var getColumnProp = function getColumnProp(column, name) {
       return ColumnBase.getCProp(column, name);
     };
@@ -1307,14 +1418,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         return null;
       }
     };
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event) {
       props.onRowClick({
         originalEvent: event,
         data: props.rowData,
         index: props.rowIndex
       });
     };
-    var onDoubleClick = function onDoubleClick(event) {
+    var _onDoubleClick = function onDoubleClick(event) {
       props.onRowDoubleClick({
         originalEvent: event,
         data: props.rowData,
@@ -1328,24 +1439,24 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         index: props.rowIndex
       });
     };
-    var onMouseEnter = function onMouseEnter(event) {
+    var _onMouseEnter = function onMouseEnter(event) {
       props.onRowMouseEnter({
         originalEvent: event,
         data: props.rowData,
         index: props.rowIndex
       });
     };
-    var onMouseLeave = function onMouseLeave(event) {
+    var _onMouseLeave = function onMouseLeave(event) {
       props.onRowMouseLeave({
         originalEvent: event,
         data: props.rowData,
         index: props.rowIndex
       });
     };
-    var onTouchEnd = function onTouchEnd(event) {
+    var _onTouchEnd = function onTouchEnd(event) {
       props.onRowTouchEnd(event);
     };
-    var onKeyDown = function onKeyDown(event) {
+    var _onKeyDown = function onKeyDown(event) {
       if (isFocusable() && !props.allowCellSelection) {
         var target = event.target,
           row = event.currentTarget;
@@ -1374,7 +1485,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           case 13:
             // @deprecated
             if (!utils.DomHandler.isClickable(target)) {
-              onClick(event);
+              _onClick(event);
               event.preventDefault();
             }
             break;
@@ -1382,56 +1493,56 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           //space
           case 32:
             if (!utils.DomHandler.isClickable(target) && !target.readOnly) {
-              onClick(event);
+              _onClick(event);
               event.preventDefault();
             }
             break;
         }
       }
     };
-    var onMouseDown = function onMouseDown(event) {
+    var _onMouseDown = function onMouseDown(event) {
       props.onRowMouseDown({
         originalEvent: event,
         data: props.rowData,
         index: props.rowIndex
       });
     };
-    var onMouseUp = function onMouseUp(event) {
+    var _onMouseUp = function onMouseUp(event) {
       props.onRowMouseUp({
         originalEvent: event,
         data: props.rowData,
         index: props.rowIndex
       });
     };
-    var onDragStart = function onDragStart(event) {
+    var _onDragStart = function onDragStart(event) {
       props.onRowDragStart({
         originalEvent: event,
         data: props.rowData,
         index: props.rowIndex
       });
     };
-    var onDragOver = function onDragOver(event) {
+    var _onDragOver = function onDragOver(event) {
       props.onRowDragOver({
         originalEvent: event,
         data: props.rowData,
         index: props.rowIndex
       });
     };
-    var onDragLeave = function onDragLeave(event) {
+    var _onDragLeave = function onDragLeave(event) {
       props.onRowDragLeave({
         originalEvent: event,
         data: props.rowData,
         index: props.rowIndex
       });
     };
-    var onDragEnd = function onDragEnd(event) {
+    var _onDragEnd = function onDragEnd(event) {
       props.onRowDragEnd({
         originalEvent: event,
         data: props.rowData,
         index: props.rowIndex
       });
     };
-    var onDrop = function onDrop(event) {
+    var _onDrop = function onDrop(event) {
       props.onRowDrop({
         originalEvent: event,
         data: props.rowData,
@@ -1448,7 +1559,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           newData = e.newData;
         if (dataKey) {
           var dataKeyValue = String(utils.ObjectUtils.resolveFieldData(data, dataKey));
-          editingRows = props.editingRows ? _objectSpread$7({}, props.editingRows) : {};
+          editingRows = props.editingRows ? _objectSpread$8({}, props.editingRows) : {};
           if (!isEditing) {
             delete editingRows[dataKeyValue];
             // if the key value was changed, stop editing for the new key value too
@@ -1526,46 +1637,51 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           var rowSpan = props.rowGroupMode === 'rowspan' ? calculateRowGroupSize(props.value, col, props.index) : null;
           return /*#__PURE__*/React__namespace.createElement(BodyCell, {
             key: key,
-            value: props.value,
-            tableProps: props.tableProps,
-            tableSelector: props.tableSelector,
+            allowCellSelection: props.allowCellSelection,
+            cellClassName: props.cellClassName,
+            checkIcon: props.checkIcon,
+            collapsedRowIcon: props.collapsedRowIcon,
             column: col,
-            rowData: props.rowData,
-            rowIndex: props.rowIndex,
-            index: i,
-            rowSpan: rowSpan,
+            compareSelectionBy: props.compareSelectionBy,
             dataKey: props.dataKey,
+            editMode: props.editMode,
             editing: editing,
             editingMeta: props.editingMeta,
-            editMode: props.editMode,
+            expanded: props.expanded,
+            expandedRowIcon: props.expandedRowIcon,
+            frozenRow: props.frozenRow,
+            index: i,
+            isSelectable: props.isSelectable,
+            onCheckboxChange: props.onCheckboxChange,
+            onClick: props.onCellClick,
+            onEditingMetaChange: props.onEditingMetaChange,
+            onMouseDown: props.onCellMouseDown,
+            onMouseUp: props.onCellMouseUp,
+            onRadioChange: props.onRadioChange,
+            onRowEditCancel: onEditCancel,
             onRowEditInit: onEditInit,
             onRowEditSave: onEditSave,
-            onRowEditCancel: onEditCancel,
-            onEditingMetaChange: props.onEditingMetaChange,
             onRowToggle: props.onRowToggle,
-            selection: props.selection,
-            selectionAriaLabel: props.tableProps.selectionAriaLabel,
-            allowCellSelection: props.allowCellSelection,
-            compareSelectionBy: props.compareSelectionBy,
+            responsiveLayout: props.responsiveLayout,
+            rowData: props.rowData,
+            rowEditorCancelIcon: props.rowEditorCancelIcon,
+            rowEditorInitIcon: props.rowEditorInitIcon,
+            rowEditorSaveIcon: props.rowEditorSaveIcon,
+            rowIndex: props.rowIndex,
+            rowSpan: rowSpan,
             selectOnEdit: props.selectOnEdit,
             selected: props.selected,
-            onClick: props.onCellClick,
-            onMouseDown: props.onCellMouseDown,
-            onMouseUp: props.onCellMouseUp,
-            tabIndex: props.tabIndex,
-            cellClassName: props.cellClassName,
-            responsiveLayout: props.responsiveLayout,
-            frozenRow: props.frozenRow,
-            isSelectable: props.isSelectable,
-            showSelectionElement: props.showSelectionElement,
+            selection: props.selection,
+            selectionAriaLabel: props.tableProps.selectionAriaLabel,
             showRowReorderElement: props.showRowReorderElement,
-            onRadioChange: props.onRadioChange,
-            onCheckboxChange: props.onCheckboxChange,
-            expanded: props.expanded,
-            expandedRowIcon: props.expandedRowIcon,
-            collapsedRowIcon: props.collapsedRowIcon,
-            checkIcon: props.checkIcon,
-            virtualScrollerOptions: props.virtualScrollerOptions
+            showSelectionElement: props.showSelectionElement,
+            tabIndex: props.tabIndex,
+            tableProps: props.tableProps,
+            tableSelector: props.tableSelector,
+            value: props.value,
+            virtualScrollerOptions: props.virtualScrollerOptions,
+            ptCallbacks: props.ptCallbacks,
+            metaData: props.metaData
           });
         }
         return null;
@@ -1588,65 +1704,119 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var content = createContent();
     var tabIndex = getTabIndex();
-    return /*#__PURE__*/React__namespace.createElement("tr", {
-      role: "row",
+    var rowProps = utils.mergeProps({
+      role: 'row',
       tabIndex: tabIndex,
       className: className,
       style: style,
-      onMouseDown: onMouseDown,
-      onMouseUp: onMouseUp,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onClick: onClick,
-      onDoubleClick: onDoubleClick,
-      onContextMenu: onRightClick,
-      onTouchEnd: onTouchEnd,
-      onKeyDown: onKeyDown,
-      onDragStart: onDragStart,
-      onDragOver: onDragOver,
-      onDragLeave: onDragLeave,
-      onDragEnd: onDragEnd,
-      onDrop: onDrop
-    }, content);
+      onMouseDown: function onMouseDown(e) {
+        return _onMouseDown(e);
+      },
+      onMouseUp: function onMouseUp(e) {
+        return _onMouseUp(e);
+      },
+      onMouseEnter: function onMouseEnter(e) {
+        return _onMouseEnter(e);
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        return _onMouseLeave(e);
+      },
+      onClick: function onClick(e) {
+        return _onClick(e);
+      },
+      onDoubleClick: function onDoubleClick(e) {
+        return _onDoubleClick(e);
+      },
+      onContextMenu: function onContextMenu(e) {
+        return onRightClick(e);
+      },
+      onTouchEnd: function onTouchEnd(e) {
+        return _onTouchEnd(e);
+      },
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
+      },
+      onDragStart: function onDragStart(e) {
+        return _onDragStart(e);
+      },
+      onDragOver: function onDragOver(e) {
+        return _onDragOver(e);
+      },
+      onDragLeave: function onDragLeave(e) {
+        return _onDragLeave(e);
+      },
+      onDragEnd: function onDragEnd(e) {
+        return _onDragEnd(e);
+      },
+      onDrop: function onDrop(e) {
+        return _onDrop(e);
+      }
+    }, getColumnPTOptions('row'));
+    return /*#__PURE__*/React__namespace.createElement("tr", rowProps, content);
   });
   BodyRow.displayName = 'BodyRow';
 
-  function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var RowTogglerButton = /*#__PURE__*/React__namespace.memo(function (props) {
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event) {
       props.onClick({
         originalEvent: event,
         data: props.rowData
       });
     };
-    var iconProps = {
+    var getColumnProps = function getColumnProps() {
+      return ColumnBase.getCProps(props.column);
+    };
+    var getColumnPTOptions = function getColumnPTOptions(key) {
+      return props.ptCallbacks.ptmo(ColumnBase.getCProp(props.column, 'pt'), key, {
+        props: getColumnProps(),
+        parent: props.metaData
+      });
+    };
+    var rowGroupTogglerIconProps = utils.mergeProps({
       className: 'p-row-toggler-icon',
       'aria-hidden': true
-    };
-    var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, iconProps) : props.collapsedRowIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, iconProps);
-    var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$6({}, iconProps), {
+    }, getColumnPTOptions('rowGroupTogglerIcon'));
+    var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, rowGroupTogglerIconProps) : props.collapsedRowIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, rowGroupTogglerIconProps);
+    var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$7({}, rowGroupTogglerIconProps), {
       props: props
     });
     var label = props.expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel');
-    return /*#__PURE__*/React__namespace.createElement("button", {
-      type: "button",
-      onClick: onClick,
-      className: "p-row-toggler p-link",
+    var rowGroupTogglerProps = utils.mergeProps({
+      type: 'button',
+      onClick: function onClick(e) {
+        return _onClick(e);
+      },
+      className: 'p-row-toggler p-link',
       tabIndex: props.tabIndex,
-      "aria-label": label
-    }, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      'aria-label': label
+    }, getColumnPTOptions('rowGroupToggler'));
+    return /*#__PURE__*/React__namespace.createElement("button", rowGroupTogglerProps, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
   });
   RowTogglerButton.displayName = 'RowTogglerButton';
 
   var _excluded = ["originalEvent"];
-  function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _React$useState = React__namespace.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       rowGroupHeaderStyleObjectState = _React$useState2[0],
       setRowGroupHeaderStyleObjectState = _React$useState2[1];
+    var getColumnProps = function getColumnProps(column) {
+      return ColumnBase.getCProps(column);
+    };
+    var getColumnPTOptions = function getColumnPTOptions(key) {
+      var cProps = getColumnProps(props.column);
+      return props.ptCallbacks.ptmo(cProps, key, {
+        props: cProps,
+        parent: props.metaData,
+        state: {
+          rowGroupHeaderStyleObject: rowGroupHeaderStyleObjectState
+        }
+      });
+    };
     var elementRef = React__namespace.useRef(null);
     var refCallback = React__namespace.useCallback(function (el) {
       elementRef.current = el;
@@ -2022,14 +2192,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       return selection;
     };
     var onSelect = function onSelect(event) {
-      if (allowCellSelection()) props.onCellSelect && props.onCellSelect(_objectSpread$5(_objectSpread$5({
+      if (allowCellSelection()) props.onCellSelect && props.onCellSelect(_objectSpread$6(_objectSpread$6({
         originalEvent: event.originalEvent
       }, event.data), {}, {
         type: event.type
       }));else props.onRowSelect && props.onRowSelect(event);
     };
     var onUnselect = function onUnselect(event) {
-      if (allowCellSelection()) props.onCellUnselect && props.onCellUnselect(_objectSpread$5(_objectSpread$5({
+      if (allowCellSelection()) props.onCellUnselect && props.onCellUnselect(_objectSpread$6(_objectSpread$6({
         originalEvent: event.originalEvent
       }, event.data), {}, {
         type: event.type
@@ -2087,12 +2257,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           rangeRowIndex.current = event.index;
           anchorRowFirst.current = props.first;
           if (isSingleSelection()) {
-            onSingleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, {
+            onSingleSelection(_objectSpread$6(_objectSpread$6({}, event), {}, {
               toggleable: toggleable,
               type: 'row'
             }));
           } else {
-            onMultipleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, {
+            onMultipleSelection(_objectSpread$6(_objectSpread$6({}, event), {}, {
               toggleable: toggleable,
               type: 'row'
             }));
@@ -2162,7 +2332,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var hasDataKey = props.groupRowsBy ? dataKey === props.groupRowsBy : !!dataKey;
       if (hasDataKey) {
         var dataKeyValue = String(utils.ObjectUtils.resolveFieldData(event.data, dataKey));
-        expandedRows = props.expandedRows ? _objectSpread$5({}, props.expandedRows) : {};
+        expandedRows = props.expandedRows ? _objectSpread$6({}, props.expandedRows) : {};
         if (expandedRows[dataKeyValue] != null) {
           delete expandedRows[dataKeyValue];
           if (props.onRowCollapse) {
@@ -2279,13 +2449,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       event.preventDefault();
     };
     var onRadioChange = function onRadioChange(event) {
-      onSingleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, {
+      onSingleSelection(_objectSpread$6(_objectSpread$6({}, event), {}, {
         toggleable: true,
         type: 'radio'
       }));
     };
     var onCheckboxChange = function onCheckboxChange(event) {
-      onMultipleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, {
+      onMultipleSelection(_objectSpread$6(_objectSpread$6({}, event), {}, {
         toggleable: true,
         type: 'checkbox'
       }));
@@ -2396,13 +2566,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           props: props.tableProps,
           frozen: props.frozenRow
         }) || PrimeReact.localeOption('emptyMessage');
-        return /*#__PURE__*/React__namespace.createElement("tr", {
-          className: "p-datatable-emptymessage",
-          role: "row"
-        }, /*#__PURE__*/React__namespace.createElement("td", {
+        var emptyMessageProps = utils.mergeProps({
+          className: 'p-datatable-emptymessage',
+          role: 'row'
+        }, getColumnPTOptions('emptyMessage'));
+        var bodyCellProps = utils.mergeProps({
           colSpan: colSpan,
-          role: "cell"
-        }, _content));
+          role: 'cell'
+        }, getColumnPTOptions('bodyCell'), getColumnPTOptions('root'));
+        return /*#__PURE__*/React__namespace.createElement("tr", emptyMessageProps, /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, _content));
       }
       return null;
     };
@@ -2414,7 +2586,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           rowData: rowData,
           expanded: expanded,
           expandedRowIcon: props.expandedRowIcon,
-          collapsedRowIcon: props.collapsedRowIcon
+          collapsedRowIcon: props.collapsedRowIcon,
+          ptCallbacks: props.ptCallbacks,
+          metaData: props.metaData
         });
         var options = {
           index: rowIndex,
@@ -2425,17 +2599,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
 
         // check if the user wants complete control of the rendering
         if (!options.customRendering) {
-          _content2 = /*#__PURE__*/React__namespace.createElement("td", {
+          var bodyCellProps = utils.mergeProps({
             colSpan: colSpan
-          }, toggler, /*#__PURE__*/React__namespace.createElement("span", {
-            className: "p-rowgroup-header-name"
-          }, _content2));
+          }, getColumnPTOptions('bodyCell'), getColumnPTOptions('root'));
+          var rowgroupHeaderNameProps = utils.mergeProps({
+            className: 'p-rowgroup-header-name'
+          }, getColumnPTOptions('rowgroupHeaderName'));
+          _content2 = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, toggler, /*#__PURE__*/React__namespace.createElement("span", rowgroupHeaderNameProps, _content2));
         }
-        return /*#__PURE__*/React__namespace.createElement("tr", {
-          className: "p-rowgroup-header",
+        var rowgroupHeaderProps = utils.mergeProps({
+          className: 'p-rowgroup-header',
           style: style,
-          role: "row"
-        }, _content2);
+          role: 'row'
+        }, getColumnPTOptions('rowgroupHeader'));
+        return /*#__PURE__*/React__namespace.createElement("tr", rowgroupHeaderProps, _content2);
       }
       return null;
     };
@@ -2447,68 +2624,73 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         var _allowCellSelection = allowCellSelection();
         var editing = isRowEditing(rowData);
         return /*#__PURE__*/React__namespace.createElement(BodyRow, {
-          tableProps: props.tableProps,
-          tableSelector: props.tableSelector,
-          value: props.value,
+          allowCellSelection: _allowCellSelection,
+          allowRowSelection: _allowRowSelection,
+          cellClassName: props.cellClassName,
+          checkIcon: props.checkIcon,
+          collapsedRowIcon: props.collapsedRowIcon,
           columns: props.columns,
-          rowData: rowData,
-          rowIndex: rowIndex,
-          index: index,
-          selected: selected,
+          compareSelectionBy: props.compareSelectionBy,
           contextMenuSelected: contextMenuSelected,
-          onRowClick: onRowClick,
-          onRowDoubleClick: onRowDoubleClick,
-          onRowRightClick: onRowRightClick,
-          onRowMouseEnter: onRowMouseEnter,
-          onRowMouseLeave: onRowMouseLeave,
-          tabIndex: props.tabIndex,
+          dataKey: props.dataKey,
+          editMode: props.editMode,
+          editing: editing,
+          editingMeta: props.editingMeta,
+          editingRows: props.editingRows,
+          expanded: expanded,
+          expandedRowIcon: props.expandedRowIcon,
+          frozenRow: props.frozenRow,
+          groupRowsBy: props.groupRowsBy,
+          index: index,
           isSelectable: isSelectable,
-          onRowTouchEnd: onRowTouchEnd,
-          onRowMouseDown: onRowMouseDown,
-          onRowMouseUp: onRowMouseUp,
-          onRowToggle: onRowToggle,
-          onRowDragStart: onRowDragStart,
-          onRowDragOver: onRowDragOver,
-          onRowDragLeave: onRowDragLeave,
-          onRowDragEnd: onRowDragEnd,
-          onRowDrop: onRowDrop,
-          onRadioChange: onRadioChange,
-          onCheckboxChange: onCheckboxChange,
           onCellClick: onCellClick,
           onCellMouseDown: onCellMouseDown,
           onCellMouseUp: onCellMouseUp,
-          editing: editing,
-          editingRows: props.editingRows,
-          editingMeta: props.editingMeta,
-          editMode: props.editMode,
-          onRowEditChange: props.onRowEditChange,
+          onCheckboxChange: onCheckboxChange,
           onEditingMetaChange: props.onEditingMetaChange,
-          groupRowsBy: props.groupRowsBy,
-          compareSelectionBy: props.compareSelectionBy,
-          dataKey: props.dataKey,
-          rowGroupMode: props.rowGroupMode,
+          onRadioChange: onRadioChange,
+          onRowClick: onRowClick,
+          onRowDoubleClick: onRowDoubleClick,
+          onRowDragEnd: onRowDragEnd,
+          onRowDragLeave: onRowDragLeave,
+          onRowDragOver: onRowDragOver,
+          onRowDragStart: onRowDragStart,
+          onRowDrop: onRowDrop,
+          onRowEditCancel: props.onRowEditCancel,
+          onRowEditChange: props.onRowEditChange,
+          onRowEditComplete: props.onRowEditComplete,
           onRowEditInit: props.onRowEditInit,
-          rowEditValidator: props.rowEditValidator,
           onRowEditSave: props.onRowEditSave,
-          onRowEditComplete: props.onRowEditComplete,
-          onRowEditCancel: props.onRowEditCancel,
-          selection: props.selection,
-          allowRowSelection: _allowRowSelection,
-          allowCellSelection: _allowCellSelection,
+          onRowMouseDown: onRowMouseDown,
+          onRowMouseEnter: onRowMouseEnter,
+          onRowMouseLeave: onRowMouseLeave,
+          onRowMouseUp: onRowMouseUp,
+          onRowRightClick: onRowRightClick,
+          onRowToggle: onRowToggle,
+          onRowTouchEnd: onRowTouchEnd,
+          responsiveLayout: props.responsiveLayout,
+          rowClassName: props.rowClassName,
+          rowData: rowData,
+          rowEditValidator: props.rowEditValidator,
+          rowEditorCancelIcon: props.rowEditorCancelIcon,
+          rowEditorInitIcon: props.rowEditorInitIcon,
+          rowEditorSaveIcon: props.rowEditorSaveIcon,
+          rowGroupMode: props.rowGroupMode,
+          rowIndex: rowIndex,
           selectOnEdit: props.selectOnEdit,
+          selected: selected,
+          selection: props.selection,
           selectionMode: props.selectionMode,
           selectionModeInColumn: props.selectionModeInColumn,
-          cellClassName: props.cellClassName,
-          responsiveLayout: props.responsiveLayout,
-          frozenRow: props.frozenRow,
-          showSelectionElement: props.showSelectionElement,
           showRowReorderElement: props.showRowReorderElement,
-          expanded: expanded,
-          expandedRowIcon: props.expandedRowIcon,
-          collapsedRowIcon: props.collapsedRowIcon,
-          checkIcon: props.checkIcon,
-          rowClassName: props.rowClassName,
-          virtualScrollerOptions: props.virtualScrollerOptions
+          showSelectionElement: props.showSelectionElement,
+          tabIndex: props.tabIndex,
+          tableProps: props.tableProps,
+          tableSelector: props.tableSelector,
+          value: props.value,
+          virtualScrollerOptions: props.virtualScrollerOptions,
+          ptCallbacks: props.ptCallbacks,
+          metaData: props.metaData
         });
       }
     };
@@ -2523,16 +2705,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
 
         // check if the user wants complete control of the rendering
         if (!options.customRendering) {
-          _content3 = /*#__PURE__*/React__namespace.createElement("td", {
-            role: "cell",
-            colSpan: colSpan
-          }, _content3);
+          var bodyCellProps = utils.mergeProps({
+            colSpan: colSpan,
+            role: 'cell'
+          }, getColumnPTOptions('bodyCell'), getColumnPTOptions('root'));
+          _content3 = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, _content3);
         }
-        return /*#__PURE__*/React__namespace.createElement("tr", {
+        var rowExpansionProps = utils.mergeProps({
           id: id,
-          className: "p-datatable-row-expansion",
-          role: "row"
-        }, _content3);
+          className: 'p-datatable-row-expansion',
+          role: 'row'
+        }, getColumnPTOptions('rowExpansion'));
+        return /*#__PURE__*/React__namespace.createElement("tr", rowExpansionProps, _content3);
       }
       return null;
     };
@@ -2543,10 +2727,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           colSpan: colSpan,
           props: props.tableProps
         });
-        return /*#__PURE__*/React__namespace.createElement("tr", {
-          className: "p-rowgroup-footer",
-          role: "row"
-        }, _content4);
+        var rowgroupFooterProps = utils.mergeProps({
+          className: 'p-rowgroup-footer',
+          role: 'row'
+        }, getColumnPTOptions('rowgroupFooter'));
+        return /*#__PURE__*/React__namespace.createElement("tr", rowgroupFooterProps, _content4);
       }
       return null;
     };
@@ -2566,15 +2751,17 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       });
     };
     var content = props.empty ? createEmptyContent() : createContent();
-    return /*#__PURE__*/React__namespace.createElement("tbody", {
+    var ptKey = props.className === 'p-datatable-virtualscroller-spacer' ? 'virtualScrollerSpacer' : 'tbody';
+    var tbodyProps = utils.mergeProps({
       ref: refCallback,
       style: props.style,
       className: props.className
-    }, content);
+    }, getColumnPTOptions(ptKey));
+    return /*#__PURE__*/React__namespace.createElement("tbody", tbodyProps, content);
   }));
   TableBody.displayName = 'TableBody';
 
-  var ColumnGroupBase = {
+  var ColumnGroupBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'ColumnGroup',
       children: undefined
@@ -2585,34 +2772,40 @@ this.primereact.datatable = (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);
     }
-  };
+  });
 
-  function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var FooterCell = /*#__PURE__*/React__namespace.memo(function (props) {
     var _React$useState = React__namespace.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       styleObjectState = _React$useState2[0],
       setStyleObjectState = _React$useState2[1];
     var elementRef = React__namespace.useRef(null);
+    var getColumnProps = function getColumnProps() {
+      return ColumnBase.getCProps(props.column);
+    };
+    var getColumnPTOptions = function getColumnPTOptions(key) {
+      return props.ptCallbacks.ptmo(ColumnBase.getCProp(props.column, 'pt'), key, {
+        props: getColumnProps(),
+        parent: props.metaData,
+        state: {
+          styleObject: styleObjectState
+        }
+      });
+    };
     var getColumnProp = function getColumnProp(name) {
       return ColumnBase.getCProp(props.column, name);
     };
@@ -2623,7 +2816,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var updateStickyPosition = function updateStickyPosition() {
       if (getColumnProp('frozen')) {
-        var styleObject = _objectSpread$4({}, styleObjectState);
+        var styleObject = _objectSpread$5({}, styleObjectState);
         var _align = getColumnProp('alignFrozen');
         if (_align === 'right') {
           var right = 0;
@@ -2659,18 +2852,38 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var content = utils.ObjectUtils.getJSXElement(getColumnProp('footer'), {
       props: props.tableProps
     });
-    return /*#__PURE__*/React__namespace.createElement("td", {
+    var footerCellProps = utils.mergeProps({
       ref: elementRef,
       style: style,
       className: className,
-      role: "cell",
+      role: 'cell',
       colSpan: colSpan,
       rowSpan: rowSpan
-    }, content);
+    }, getColumnPTOptions('footerCell'), getColumnPTOptions('root'));
+    return /*#__PURE__*/React__namespace.createElement("td", footerCellProps, content);
   });
   FooterCell.displayName = 'FooterCell';
 
   var TableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
+    var getRowProps = function getRowProps(row) {
+      return ColumnGroupBase.getCProps(row);
+    };
+    var getColumnGroupProps = function getColumnGroupProps() {
+      return props.footerColumnGroup ? props.ptCallbacks.ptmo(ColumnGroupBase.getCProps(props.footerColumnGroup)) : undefined;
+    };
+    var getRowPTOptions = function getRowPTOptions(row, key) {
+      var rProps = getRowProps(row);
+      return props.ptCallbacks.ptmo(ColumnGroupBase.getCProp(row, 'pt'), key, {
+        props: rProps,
+        parent: props.metaData
+      });
+    };
+    var getColumnGroupPTOptions = function getColumnGroupPTOptions(key) {
+      return props.ptCallbacks.ptmo(ColumnGroupBase.getCProp(props.footerColumnGroup, 'pt')), {
+        props: getColumnGroupProps(),
+        parent: props.metaData
+      };
+    };
     var hasFooter = function hasFooter() {
       return props.footerColumnGroup ? true : props.columns ? props.columns.some(function (col) {
         return col && getColumnProp(col, 'footer');
@@ -2690,7 +2903,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         return isVisible && /*#__PURE__*/React__namespace.createElement(FooterCell, {
           key: key,
           tableProps: props.tableProps,
-          column: col
+          column: col,
+          ptCallbacks: props.ptCallbacks,
+          metaData: props.metaData
         });
       });
     };
@@ -2698,28 +2913,32 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       if (props.footerColumnGroup) {
         var rows = React__namespace.Children.toArray(ColumnGroupBase.getCProp(props.footerColumnGroup, 'children'));
         return rows.map(function (row, i) {
-          return /*#__PURE__*/React__namespace.createElement("tr", {
-            key: i,
-            role: "row"
-          }, createGroupFooterCells(row));
+          var rootProps = utils.mergeProps({
+            role: 'row'
+          }, getRowPTOptions(row, 'root'));
+          return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, rootProps, {
+            key: i
+          }), createGroupFooterCells(row));
         });
       }
-      return /*#__PURE__*/React__namespace.createElement("tr", {
-        role: "row"
-      }, createFooterCells(props.columns));
+      var footerRowProps = utils.mergeProps({
+        role: 'row'
+      }, props.ptCallbacks.ptm('footerRow'));
+      return /*#__PURE__*/React__namespace.createElement("tr", footerRowProps, createFooterCells(props.columns));
     };
     if (hasFooter()) {
       var content = createContent();
-      return /*#__PURE__*/React__namespace.createElement("tfoot", {
-        className: "p-datatable-tfoot"
-      }, content);
+      var tfootProps = utils.mergeProps({
+        className: 'p-datatable-tfoot'
+      }, props.ptCallbacks.ptm('tfoot'), getColumnGroupPTOptions());
+      return /*#__PURE__*/React__namespace.createElement("tfoot", tfootProps, content);
     }
     return null;
   });
   TableFooter.displayName = 'TableFooter';
 
-  function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -2732,6 +2951,19 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var getColumnProp = function getColumnProp(name) {
       return ColumnBase.getCProp(props.column, name);
     };
+    var getColumnProps = function getColumnProps() {
+      return ColumnBase.getCProps(props.column);
+    };
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var getColumnPTOptions = function getColumnPTOptions(key) {
+      return props.ptCallbacks.ptmo(getColumnProps(), key, {
+        props: getColumnProps(),
+        parent: props.metaData,
+        state: {
+          overlayVisible: overlayVisibleState
+        }
+      });
+    };
     var field = getColumnProp('filterField') || getColumnProp('field');
     var filterModel = props.filters[field];
     var filterStoreModel = props.filtersStore && props.filtersStore[field];
@@ -2768,7 +3000,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       return getColumnProp('showFilterMenu') && (props.display === 'row' ? getColumnProp('dataType') !== 'boolean' : true);
     };
     var matchModes = function matchModes() {
-      return getColumnProp('filterMatchModeOptions') || PrimeReact__default["default"].filterMatchModeOptions[findDataType()].map(function (key) {
+      return getColumnProp('filterMatchModeOptions') || context && context.filterMatchModeOptions[findDataType()].map(function (key) {
+        return {
+          label: PrimeReact.localeOption(key),
+          value: key
+        };
+      }) || PrimeReact__default["default"].filterMatchModeOptions[findDataType()].map(function (key) {
         return {
           label: PrimeReact.localeOption(key),
           value: key
@@ -2811,15 +3048,17 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var dataType = getColumnProp('dataType');
       var matchMode = getColumnProp('filterMatchMode');
       var hasMatchMode = function hasMatchMode(key) {
-        return PrimeReact__default["default"].filterMatchModeOptions[key].some(function (mode) {
+        return context && context.filterMatchModeOptions[key].some(function (mode) {
+          return mode === matchMode;
+        }) || PrimeReact__default["default"].filterMatchModeOptions[key].some(function (mode) {
           return mode === matchMode;
         });
       };
       if (matchMode === 'custom' && !hasMatchMode(dataType)) {
-        PrimeReact__default["default"].filterMatchModeOptions[dataType].push(PrimeReact.FilterMatchMode.CUSTOM);
+        context && context.filterMatchModeOptions[dataType].push(PrimeReact.FilterMatchMode.CUSTOM) || PrimeReact__default["default"].filterMatchModeOptions[dataType].push(PrimeReact.FilterMatchMode.CUSTOM);
         return dataType;
       } else if (matchMode) {
-        return Object.keys(PrimeReact__default["default"].filterMatchModeOptions).find(function (key) {
+        return Object.keys(context && context.filterMatchModeOptions || PrimeReact__default["default"].filterMatchModeOptions).find(function (key) {
           return hasMatchMode(key);
         }) || dataType;
       }
@@ -2828,7 +3067,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var clearFilter = function clearFilter() {
       var filterClearCallback = getColumnProp('onFilterClear');
       var defaultConstraint = getDefaultConstraint();
-      var filters = _objectSpread$3({}, props.filters);
+      var filters = _objectSpread$4({}, props.filters);
       if (filters[field].operator) {
         filters[field].constraints.splice(1);
         filters[field].operator = defaultConstraint.operator;
@@ -2884,7 +3123,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
     };
     var onInputChange = function onInputChange(event, index) {
-      var filters = _objectSpread$3({}, props.filters);
+      var filters = _objectSpread$4({}, props.filters);
       var value = event.target.value;
       if (props.display === 'menu') {
         filters[field].constraints[index].value = value;
@@ -2905,7 +3144,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var onRowMatchModeChange = function onRowMatchModeChange(matchMode) {
       var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
-      var filters = _objectSpread$3({}, props.filters);
+      var filters = _objectSpread$4({}, props.filters);
       filters[field].matchMode = matchMode;
       filterMatchModeChangeCallback && filterMatchModeChangeCallback({
         field: field,
@@ -2945,7 +3184,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var onOperatorChange = function onOperatorChange(e) {
       var filterOperationChangeCallback = getColumnProp('onFilterOperatorChange');
       var value = e.value;
-      var filters = _objectSpread$3({}, props.filters);
+      var filters = _objectSpread$4({}, props.filters);
       filters[field].operator = value;
       props.onFilterChange(filters);
       filterOperationChangeCallback && filterOperationChangeCallback({
@@ -2958,7 +3197,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var onMenuMatchModeChange = function onMenuMatchModeChange(value, index) {
       var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
-      var filters = _objectSpread$3({}, props.filters);
+      var filters = _objectSpread$4({}, props.filters);
       filters[field].constraints[index].matchMode = value;
       props.onFilterChange(filters);
       filterMatchModeChangeCallback && filterMatchModeChangeCallback({
@@ -2973,7 +3212,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var addConstraint = function addConstraint() {
       var filterConstraintAddCallback = getColumnProp('onFilterConstraintAdd');
       var defaultConstraint = getDefaultConstraint();
-      var filters = _objectSpread$3({}, props.filters);
+      var filters = _objectSpread$4({}, props.filters);
       var newConstraint = {
         value: null,
         matchMode: defaultConstraint.matchMode
@@ -2990,7 +3229,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var removeConstraint = function removeConstraint(index) {
       var filterConstraintRemoveCallback = getColumnProp('onFilterConstraintRemove');
-      var filters = _objectSpread$3({}, props.filters);
+      var filters = _objectSpread$4({}, props.filters);
       var removedConstraint = filters[field].constraints.splice(index, 1);
       filterConstraintRemoveCallback && filterConstraintRemoveCallback({
         field: field,
@@ -3023,8 +3262,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       selfClick.current = true;
     };
     var onOverlayEnter = function onOverlayEnter() {
-      utils.ZIndexUtils.set('overlay', overlayRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
-      utils.DomHandler.alignOverlay(overlayRef.current, iconRef.current, PrimeReact__default["default"].appendTo, false);
+      utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['overlay'] || PrimeReact__default["default"].zIndex['overlay']);
+      utils.DomHandler.alignOverlay(overlayRef.current, iconRef.current, context && context.appendTo || PrimeReact__default["default"].appendTo, false);
       overlayEventListener.current = function (e) {
         if (!isOutsideClicked(e.target)) {
           selfClick.current = true;
@@ -3082,7 +3321,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var filterCallback = function filterCallback(value) {
       var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      var filters = _objectSpread$3({}, props.filters);
+      var filters = _objectSpread$4({}, props.filters);
       var meta = filters[field];
       props.display === 'menu' && meta && meta.operator ? filters[field].constraints[index].value = value : filters[field].value = value;
       props.onFilterChange(filters);
@@ -3096,7 +3335,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     hooks.useUpdateEffect(function () {
       if (props.display === 'menu' && overlayVisibleState) {
-        utils.DomHandler.alignOverlay(overlayRef.current, iconRef.current, PrimeReact__default["default"].appendTo, false);
+        utils.DomHandler.alignOverlay(overlayRef.current, iconRef.current, context && context.appendTo || PrimeReact__default["default"].appendTo, false);
       }
     });
     hooks.useUnmountEffect(function () {
@@ -3135,9 +3374,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var createRowFilterElement = function createRowFilterElement() {
       if (props.display === 'row') {
         var content = createFilterElement(filterModel, 0);
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-fluid p-column-filter-element"
-        }, content);
+        var filterInputProps = utils.mergeProps({
+          className: 'p-fluid p-column-filter-element'
+        }, getColumnPTOptions('filterInput'));
+        return /*#__PURE__*/React__namespace.createElement("div", filterInputProps, content);
       }
       return null;
     };
@@ -3145,38 +3385,43 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       return props.display === 'menu' ? createFilterElement(fieldConstraint, index) : null;
     };
     var createMenuButton = function createMenuButton() {
-      var iconProps = {
-        'aria-hidden': true
-      };
-      var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(filter.FilterIcon, iconProps);
-      var columnFilterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
-        props: props
-      });
       if (showMenuButton()) {
+        var filterIconProps = utils.mergeProps({
+          'aria-hidden': true
+        }, getColumnPTOptions('filterIcon'));
+        var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(filter.FilterIcon, filterIconProps);
+        var columnFilterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$4({}, filterIconProps), {
+          props: props
+        });
         var _className = utils.classNames('p-column-filter-menu-button p-link', {
           'p-column-filter-menu-button-open': overlayVisibleState,
           'p-column-filter-menu-button-active': hasFilter()
         });
         var label = filterLabel();
-        return /*#__PURE__*/React__namespace.createElement("button", {
+        var filterMenuButtonProps = utils.mergeProps({
           ref: iconRef,
-          type: "button",
+          type: 'button',
           className: _className,
-          "aria-haspopup": true,
-          "aria-expanded": overlayVisibleState,
-          onClick: toggleMenu,
-          onKeyDown: onToggleButtonKeyDown,
-          "aria-label": label
-        }, columnFilterIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+          'aria-haspopup': true,
+          'aria-expanded': overlayVisibleState,
+          onClick: function onClick(e) {
+            return toggleMenu();
+          },
+          onKeyDown: function onKeyDown(e) {
+            return onToggleButtonKeyDown(e);
+          },
+          'aria-label': label
+        }, getColumnPTOptions('filterMenuButton'));
+        return /*#__PURE__*/React__namespace.createElement("button", filterMenuButtonProps, columnFilterIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
     var createClearButton = function createClearButton() {
-      var iconProps = {
+      var filterClearIconProps = utils.mergeProps({
         'aria-hidden': true
-      };
-      var icon = props.filterClearIcon || /*#__PURE__*/React__namespace.createElement(filterslash.FilterSlashIcon, iconProps);
-      var filterClearIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
+      }, getColumnPTOptions('filterClearIcon'));
+      var icon = props.filterClearIcon || /*#__PURE__*/React__namespace.createElement(filterslash.FilterSlashIcon, filterClearIconProps);
+      var filterClearIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$4({}, filterClearIconProps), {
         props: props
       });
       if (getColumnProp('showClearButton') && props.display === 'row') {
@@ -3184,12 +3429,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           'p-hidden-space': !hasRowFilter()
         });
         var clearLabel = clearButtonLabel();
-        return /*#__PURE__*/React__namespace.createElement("button", {
+        var headerFilterClearButtonProps = utils.mergeProps({
           className: _className2,
-          type: "button",
-          onClick: clearFilter,
-          "aria-label": clearLabel
-        }, filterClearIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+          type: 'button',
+          onClick: function onClick(e) {
+            return clearFilter();
+          },
+          'aria-label': clearLabel
+        }, getColumnPTOptions('headerFilterClearButton'));
+        return /*#__PURE__*/React__namespace.createElement("button", headerFilterClearButtonProps, filterClearIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
@@ -3197,18 +3445,30 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       if (isShowMatchModes()) {
         var _matchModes = matchModes();
         var _noFilterLabel = noFilterLabel();
-        return /*#__PURE__*/React__namespace.createElement("ul", {
-          className: "p-column-filter-row-items"
-        }, _matchModes.map(function (matchMode, i) {
+        var filterSeparatorProps = utils.mergeProps({
+          className: 'p-column-filter-separator'
+        }, getColumnPTOptions('filterSeparator'));
+        var filterRowItemProps = utils.mergeProps({
+          className: 'p-column-filter-row-item',
+          onClick: function onClick(e) {
+            return clearFilter();
+          },
+          onKeyDown: function onKeyDown(e) {
+            return onRowMatchModeKeyDown(e, null, true);
+          }
+        }, getColumnPTOptions('filterRowItem'));
+        var filterRowItemsProps = utils.mergeProps({
+          className: 'p-column-filter-row-items'
+        }, getColumnPTOptions('filterRowItems'));
+        return /*#__PURE__*/React__namespace.createElement("ul", filterRowItemsProps, _matchModes.map(function (matchMode, i) {
           var value = matchMode.value,
             label = matchMode.label;
           var className = utils.classNames('p-column-filter-row-item', {
             'p-highlight': isRowMatchModeSelected(value)
           });
           var tabIndex = i === 0 ? 0 : null;
-          return /*#__PURE__*/React__namespace.createElement("li", {
+          var filterRowItemProps = utils.mergeProps({
             className: className,
-            key: label,
             onClick: function onClick() {
               return onRowMatchModeChange(value);
             },
@@ -3216,16 +3476,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
               return onRowMatchModeKeyDown(e, matchMode);
             },
             tabIndex: tabIndex
-          }, label);
-        }), /*#__PURE__*/React__namespace.createElement("li", {
-          className: "p-column-filter-separator"
-        }), /*#__PURE__*/React__namespace.createElement("li", {
-          className: "p-column-filter-row-item",
-          onClick: clearFilter,
-          onKeyDown: function onKeyDown(e) {
-            return onRowMatchModeKeyDown(e, null, true);
-          }
-        }, _noFilterLabel));
+          }, getColumnPTOptions('filterRowItem'));
+          return /*#__PURE__*/React__namespace.createElement("li", _extends({}, filterRowItemProps, {
+            key: label
+          }), label);
+        }), /*#__PURE__*/React__namespace.createElement("li", filterSeparatorProps), /*#__PURE__*/React__namespace.createElement("li", filterRowItemProps, _noFilterLabel));
       }
       return null;
     };
@@ -3233,13 +3488,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       if (isShowOperator()) {
         var options = operatorOptions();
         var value = operator();
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-column-filter-operator"
-        }, /*#__PURE__*/React__namespace.createElement(dropdown.Dropdown, {
+        var filterOperatorProps = utils.mergeProps({
+          className: 'p-column-filter-operator'
+        }, getColumnPTOptions('filterOperator'));
+        return /*#__PURE__*/React__namespace.createElement("div", filterOperatorProps, /*#__PURE__*/React__namespace.createElement(dropdown.Dropdown, {
           options: options,
           value: value,
           onChange: onOperatorChange,
-          className: "p-column-filter-operator-dropdown"
+          className: "p-column-filter-operator-dropdown",
+          pt: getColumnPTOptions('filterOperatorDropdown')
         }));
       }
       return null;
@@ -3253,7 +3510,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           onChange: function onChange(e) {
             return onMenuMatchModeChange(e.value, index);
           },
-          className: "p-column-filter-matchmode-dropdown"
+          className: "p-column-filter-matchmode-dropdown",
+          pt: getColumnPTOptions('filterMatchModeDropdown')
         });
       }
       return null;
@@ -3268,36 +3526,43 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           onClick: function onClick() {
             return removeConstraint(index);
           },
-          label: removeRuleLabel
+          label: removeRuleLabel,
+          pt: getColumnPTOptions('filterRemoveButton')
         });
       }
       return null;
     };
     var createConstraints = function createConstraints() {
       var _fieldConstraints = fieldConstraints();
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-column-filter-constraints"
-      }, _fieldConstraints.map(function (fieldConstraint, i) {
+      var filterConstraintsProps = utils.mergeProps({
+        className: 'p-column-filter-constraints'
+      }, getColumnPTOptions('filterConstraints'));
+      var filterConstraintProps = utils.mergeProps({
+        className: 'p-column-filter-constraint'
+      }, getColumnPTOptions('filterConstraint'));
+      return /*#__PURE__*/React__namespace.createElement("div", filterConstraintsProps, _fieldConstraints.map(function (fieldConstraint, i) {
         var matchModeDropdown = createMatchModeDropdown(fieldConstraint, i);
         var menuFilterElement = createMenuFilterElement(fieldConstraint, i);
         var removeButton = createRemoveButton(i);
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          key: i,
-          className: "p-column-filter-constraint"
-        }, matchModeDropdown, menuFilterElement, /*#__PURE__*/React__namespace.createElement("div", null, removeButton));
+        var filterRemoveProps = utils.mergeProps(getColumnPTOptions('filterRemove'));
+        return /*#__PURE__*/React__namespace.createElement("div", _extends({}, filterConstraintProps, {
+          key: i
+        }), matchModeDropdown, menuFilterElement, /*#__PURE__*/React__namespace.createElement("div", filterRemoveProps, removeButton));
       }));
     };
     var createAddRule = function createAddRule() {
       if (isShowAddConstraint()) {
         var addRuleLabel = addRuleButtonLabel();
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-column-filter-add-rule"
-        }, /*#__PURE__*/React__namespace.createElement(button.Button, {
+        var filterAddRuleProps = utils.mergeProps({
+          className: 'p-column-filter-add-rule'
+        }, getColumnPTOptions('filterAddRule'));
+        return /*#__PURE__*/React__namespace.createElement("div", filterAddRuleProps, /*#__PURE__*/React__namespace.createElement(button.Button, {
           type: "button",
           label: addRuleLabel,
           icon: props.filterAddIcon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, null),
           className: "p-column-filter-add-button p-button-text p-button-sm",
-          onClick: addConstraint
+          onClick: addConstraint,
+          pt: getColumnPTOptions('filterAddRuleButton')
         }));
       }
       return null;
@@ -3310,7 +3575,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
             type: "button",
             className: "p-button-outlined p-button-sm",
             onClick: clearFilter,
-            label: clearLabel
+            label: clearLabel,
+            pt: getColumnPTOptions('filterClearButton')
           });
         }
         return utils.ObjectUtils.getJSXElement(getColumnProp('filterClear'), {
@@ -3329,7 +3595,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
             type: "button",
             className: "p-button-sm",
             onClick: applyFilter,
-            label: applyLabel
+            label: applyLabel,
+            pt: getColumnPTOptions('filterApplyButton')
           });
         }
         return utils.ObjectUtils.getJSXElement(getColumnProp('filterApply'), {
@@ -3343,9 +3610,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var createButtonBar = function createButtonBar() {
       var clearButton = createFilterClearButton();
       var applyButton = createFilterApplyButton();
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-column-filter-buttonbar"
-      }, clearButton, applyButton);
+      var filterButtonbarProps = utils.mergeProps({
+        className: 'p-column-filter-buttonbar'
+      }, getColumnPTOptions('filterButtonBar'));
+      return /*#__PURE__*/React__namespace.createElement("div", filterButtonbarProps, clearButton, applyButton);
     };
     var createItems = function createItems() {
       var operator = createOperator();
@@ -3358,8 +3626,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var style = getColumnProp('filterMenuStyle');
       var className = utils.classNames('p-column-filter-overlay p-component p-fluid', getColumnProp('filterMenuClassName'), {
         'p-column-filter-overlay-menu': props.display === 'menu',
-        'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
-        'p-ripple-disabled': PrimeReact__default["default"].ripple === false
+        'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
+        'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
       });
       var filterHeader = utils.ObjectUtils.getJSXElement(getColumnProp('filterHeader'), {
         field: field,
@@ -3372,6 +3640,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         filterApplyCallback: filterApplyCallback
       });
       var items = props.display === 'row' ? createRowItems() : createItems();
+      var filterOverlayProps = utils.mergeProps({
+        ref: overlayRef,
+        style: style,
+        className: className,
+        onKeyDown: function onKeyDown(e) {
+          return onContentKeyDown(e);
+        },
+        onClick: function onClick(e) {
+          return onContentClick(e);
+        },
+        onMouseDown: function onMouseDown(e) {
+          return onContentMouseDown();
+        }
+      }, getColumnPTOptions('filterOverlay'));
       return /*#__PURE__*/React__namespace.createElement(portal.Portal, null, /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: overlayRef,
         classNames: "p-connected-overlay",
@@ -3385,14 +3667,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         onEntered: onOverlayEntered,
         onExit: onOverlayExit,
         onExited: onOverlayExited
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        ref: overlayRef,
-        style: style,
-        className: className,
-        onKeyDown: onContentKeyDown,
-        onClick: onContentClick,
-        onMouseDown: onContentMouseDown
-      }, filterHeader, items, filterFooter)));
+      }, /*#__PURE__*/React__namespace.createElement("div", filterOverlayProps, filterHeader, items, filterFooter)));
     };
     var className = utils.classNames('p-column-filter p-fluid', {
       'p-column-filter-row': props.display === 'row',
@@ -3402,24 +3677,43 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var menuButton = createMenuButton();
     var clearButton = createClearButton();
     var overlay = createOverlay();
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    var columnFilter = utils.mergeProps({
       className: className
-    }, rowFilterElement, menuButton, clearButton, overlay);
+    }, getColumnPTOptions('columnFilter'));
+    return /*#__PURE__*/React__namespace.createElement("div", columnFilter, rowFilterElement, menuButton, clearButton, overlay);
   });
   ColumnFilter.displayName = 'ColumnFilter';
 
+  function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
-    var onFocus = function onFocus() {
+    var getColumnProps = function getColumnProps() {
+      return ColumnBase.getCProps(props.column);
+    };
+    var getColumnPTOptions = function getColumnPTOptions(key) {
+      return props.ptCallbacks.ptmo(ColumnBase.getCProp(props.column, 'pt'), key, {
+        props: getColumnProps(),
+        parent: props.metaData,
+        context: {
+          checked: props.checked,
+          disabled: props.disabled
+        },
+        state: {
+          focused: focusedState
+        }
+      });
+    };
+    var _onFocus = function onFocus() {
       setFocusedState(true);
     };
-    var onBlur = function onBlur() {
+    var _onBlur = function onBlur() {
       setFocusedState(false);
     };
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event) {
       if (!props.disabled) {
         setFocusedState(true);
         props.onChange({
@@ -3428,10 +3722,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         });
       }
     };
-    var onKeyDown = function onKeyDown(event) {
+    var _onKeyDown = function onKeyDown(event) {
       if (event.code === 'Space' || event.key === ' ') {
         // event.key is for Android support
-        onClick(event);
+        _onClick(event);
         event.preventDefault();
       }
     };
@@ -3441,27 +3735,36 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       'p-focus': focusedState
     });
     var iconClassName = 'p-checkbox-icon';
-    var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
+    var headerCheckboxIconProps = utils.mergeProps({
       className: iconClassName
-    }) : null;
-    var checkIcon = utils.IconUtils.getJSXIcon(icon, {
-      className: iconClassName
-    }, {
+    }, getColumnPTOptions('headerCheckboxIcon'));
+    var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, headerCheckboxIconProps) : null;
+    var checkIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, headerCheckboxIconProps), {
       props: props
     });
     var tabIndex = props.disabled ? null : 0;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-checkbox p-component",
-      onClick: onClick
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+    var headerCheckboxWrapperProps = utils.mergeProps({
+      className: 'p-checkbox p-component',
+      onClick: function onClick(e) {
+        return _onClick(e);
+      }
+    }, getColumnPTOptions('headerCheckboxWrapper'));
+    var headerCheckboxProps = utils.mergeProps({
       className: boxClassName,
-      role: "checkbox",
-      "aria-checked": props.checked,
+      role: 'checkbox',
+      'aria-checked': props.checked,
       tabIndex: tabIndex,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onKeyDown: onKeyDown
-    }, checkIcon));
+      onFocus: function onFocus(e) {
+        return _onFocus();
+      },
+      onBlur: function onBlur(e) {
+        return _onBlur();
+      },
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
+      }
+    }, getColumnPTOptions('headerCheckbox'));
+    return /*#__PURE__*/React__namespace.createElement("div", headerCheckboxWrapperProps, /*#__PURE__*/React__namespace.createElement("div", headerCheckboxProps, checkIcon));
   });
   HeaderCheckbox.displayName = 'HeaderCheckbox';
 
@@ -3474,6 +3777,25 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       setStyleObjectState = _React$useState2[1];
     var elementRef = React__namespace.useRef(null);
     var prevColumn = hooks.usePrevious(props.column);
+    var parentMetaData = props.metaData,
+      ptCallbacks = props.ptCallbacks,
+      index = props.index;
+    var params = {
+      index: index
+    };
+    var parentParams = _objectSpread$2(_objectSpread$2({}, parentMetaData), params);
+    var getColumnProps = function getColumnProps() {
+      return ColumnBase.getCProps(props.column);
+    };
+    var getColumnPTOptions = function getColumnPTOptions(key) {
+      return ptCallbacks.ptmo(ColumnBase.getCProp(props.column, 'pt'), key, {
+        props: getColumnProps(),
+        parent: parentParams,
+        state: {
+          styleObject: styleObjectState
+        }
+      });
+    };
     var isBadgeVisible = function isBadgeVisible() {
       return props.multiSortMeta && props.multiSortMeta.length > 1;
     };
@@ -3542,9 +3864,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         }
         var filterRow = elementRef.current.parentElement.nextElementSibling;
         if (filterRow) {
-          var index = utils.DomHandler.index(elementRef.current);
-          filterRow.children[index].style.left = styleObject['left'];
-          filterRow.children[index].style.right = styleObject['right'];
+          var _index = utils.DomHandler.index(elementRef.current);
+          filterRow.children[_index].style.left = styleObject['left'];
+          filterRow.children[_index].style.right = styleObject['right'];
         }
         var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
         !isSameStyle && setStyleObjectState(styleObject);
@@ -3555,7 +3877,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         props.onSortableChange();
       }
     };
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event) {
       if (!isSortableDisabled()) {
         var targetNode = event.target;
         if (utils.DomHandler.hasClass(targetNode, 'p-sortable-column') || utils.DomHandler.hasClass(targetNode, 'p-column-title') || utils.DomHandler.hasClass(targetNode, 'p-column-header-content') || utils.DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || utils.DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
@@ -3568,37 +3890,37 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         }
       }
     };
-    var onMouseDown = function onMouseDown(event) {
+    var _onMouseDown = function onMouseDown(event) {
       props.onColumnMouseDown({
         originalEvent: event,
         column: props.column
       });
     };
-    var onKeyDown = function onKeyDown(event) {
+    var _onKeyDown = function onKeyDown(event) {
       if (event.key === 'Enter' && event.currentTarget === elementRef.current && utils.DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
-        onClick(event);
+        _onClick(event);
         event.preventDefault();
       }
     };
-    var onDragStart = function onDragStart(event) {
+    var _onDragStart = function onDragStart(event) {
       props.onColumnDragStart({
         originalEvent: event,
         column: props.column
       });
     };
-    var onDragOver = function onDragOver(event) {
+    var _onDragOver = function onDragOver(event) {
       props.onColumnDragOver({
         originalEvent: event,
         column: props.column
       });
     };
-    var onDragLeave = function onDragLeave(event) {
+    var _onDragLeave = function onDragLeave(event) {
       props.onColumnDragLeave({
         originalEvent: event,
         column: props.column
       });
     };
-    var onDrop = function onDrop(event) {
+    var _onDrop = function onDrop(event) {
       props.onColumnDrop({
         originalEvent: event,
         column: props.column
@@ -3638,12 +3960,19 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     });
     var createResizer = function createResizer() {
       if (props.resizableColumns && !getColumnProp('frozen')) {
-        return /*#__PURE__*/React__namespace.createElement("span", {
-          className: "p-column-resizer",
-          onMouseDown: onResizerMouseDown,
-          onClick: onResizerClick,
-          onDoubleClick: onResizerDoubleClick
-        });
+        var columnResizerProps = utils.mergeProps({
+          className: 'p-column-resizer',
+          onMouseDown: function onMouseDown(e) {
+            return onResizerMouseDown(e);
+          },
+          onClick: function onClick(e) {
+            return onResizerClick(e);
+          },
+          onDoubleClick: function onDoubleClick(e) {
+            return onResizerDoubleClick(e);
+          }
+        }, getColumnPTOptions('columnResizer'));
+        return /*#__PURE__*/React__namespace.createElement("span", columnResizerProps);
       }
       return null;
     };
@@ -3651,24 +3980,27 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var title = utils.ObjectUtils.getJSXElement(getColumnProp('header'), {
         props: props.tableProps
       });
-      return /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-column-title"
-      }, title);
+      var headerTitleProps = utils.mergeProps({
+        className: 'p-column-title'
+      }, getColumnPTOptions('headerTitle'));
+      return /*#__PURE__*/React__namespace.createElement("span", headerTitleProps, title);
     };
     var createSortIcon = function createSortIcon(_ref2) {
       var sorted = _ref2.sorted,
         sortOrder = _ref2.sortOrder;
       if (getColumnProp('sortable')) {
         var iconClassName = 'p-sortable-column-icon';
-        var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React__namespace.createElement(sortamountdown.SortAmountDownIcon, null) : /*#__PURE__*/React__namespace.createElement(sortamountupalt.SortAmountUpAltIcon, null) : /*#__PURE__*/React__namespace.createElement(sortalt.SortAltIcon, null);
-        var sortIcon = utils.IconUtils.getJSXIcon(props.sortIcon || icon, undefined, {
+        var sortIconProps = utils.mergeProps({
+          className: iconClassName
+        }, getColumnPTOptions('sortIcon'));
+        var sortProps = utils.mergeProps(getColumnPTOptions('sort'));
+        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, _objectSpread$2({}, sortIconProps), {
           props: props,
           sorted: sorted,
           sortOrder: sortOrder
         });
-        return /*#__PURE__*/React__namespace.createElement("span", {
-          className: iconClassName
-        }, sortIcon);
+        return /*#__PURE__*/React__namespace.createElement("span", sortProps, sortIcon);
       }
       return null;
     };
@@ -3676,9 +4008,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var metaIndex = _ref3.metaIndex;
       if (metaIndex !== -1 && isBadgeVisible()) {
         var value = props.groupRowsBy && props.groupRowsBy === props.groupRowSortField ? metaIndex : metaIndex + 1;
-        return /*#__PURE__*/React__namespace.createElement("span", {
-          className: "p-sortable-column-badge"
-        }, value);
+        var sortBadgeProps = utils.mergeProps({
+          className: 'p-sortable-column-badge'
+        }, getColumnPTOptions('sortBadge'), getColumnPTOptions('root'));
+        return /*#__PURE__*/React__namespace.createElement("span", sortBadgeProps, value);
       }
       return null;
     };
@@ -3688,7 +4021,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         return /*#__PURE__*/React__namespace.createElement(HeaderCheckbox, {
           checked: allRowsSelected,
           onChange: props.onColumnCheckboxChange,
-          disabled: props.empty
+          disabled: props.empty,
+          ptCallbacks: ptCallbacks,
+          metaData: parentMetaData
         });
       }
       return null;
@@ -3703,7 +4038,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           onFilterApply: props.onFilterApply,
           filtersStore: props.filtersStore,
           filterIcon: props.filterIcon,
-          filterClearIcon: props.filterClearIcon
+          filterClearIcon: props.filterClearIcon,
+          ptCallbacks: ptCallbacks,
+          metaData: parentMetaData
         });
       }
       return null;
@@ -3714,9 +4051,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var badge = createBadge(sortMeta);
       var checkbox = createCheckbox();
       var filter = createFilter();
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-column-header-content"
-      }, title, sortIcon, badge, checkbox, filter);
+      var headerContentProps = utils.mergeProps({
+        className: 'p-column-header-content'
+      }, getColumnPTOptions('headerContent'));
+      return /*#__PURE__*/React__namespace.createElement("div", headerContentProps, title, sortIcon, badge, checkbox, filter);
     };
     var createElement = function createElement() {
       var _isSortableDisabled = isSortableDisabled();
@@ -3742,26 +4080,43 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var headerTooltipOptions = getColumnProp('headerTooltipOptions');
       var resizer = createResizer();
       var header = createHeader(sortMeta);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("th", {
+      var headerCellProps = utils.mergeProps({
         ref: elementRef,
-        style: style,
         className: className,
+        style: style,
+        role: 'columnheader',
+        onClick: function onClick(e) {
+          return _onClick(e);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return _onKeyDown(e);
+        },
+        onMouseDown: function onMouseDown(e) {
+          return _onMouseDown(e);
+        },
+        onDragStart: function onDragStart(e) {
+          return _onDragStart(e);
+        },
+        onDragOver: function onDragOver(e) {
+          return _onDragOver(e);
+        },
+        onDragLeave: function onDragLeave(e) {
+          return _onDragLeave(e);
+        },
+        onDrop: function onDrop(e) {
+          return _onDrop(e);
+        },
         tabIndex: tabIndex,
-        role: "columnheader",
-        onClick: onClick,
-        onKeyDown: onKeyDown,
-        onMouseDown: onMouseDown,
-        onDragStart: onDragStart,
-        onDragOver: onDragOver,
-        onDragLeave: onDragLeave,
-        onDrop: onDrop,
         colSpan: colSpan,
         rowSpan: rowSpan,
-        "aria-sort": ariaSort
-      }, resizer, header), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+        'aria-sort': ariaSort
+      }, getColumnPTOptions('headerCell'), getColumnPTOptions('root'));
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("th", headerCellProps, resizer, header), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
         target: elementRef,
         content: headerTooltip
-      }, headerTooltipOptions)));
+      }, headerTooltipOptions, {
+        pt: getColumnPTOptions('tooltip')
+      })));
     };
     var element = createElement();
     return element;
@@ -3785,6 +4140,43 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var getColumnProp = function getColumnProp(column, name) {
       return ColumnBase.getCProp(column, name);
     };
+    var getColumnProps = function getColumnProps(column) {
+      return ColumnBase.getCProps(column);
+    };
+    var getRowProps = function getRowProps(row) {
+      return ColumnGroupBase.getCProps(row);
+    };
+    var getColumnGroupProps = function getColumnGroupProps() {
+      return props.headerColumnGroup ? props.ptCallbacks.ptmo(ColumnGroupBase.getCProps(props.headerColumnGroup)) : undefined;
+    };
+    var getColumnGroupPTOptions = function getColumnGroupPTOptions(key) {
+      return props.ptCallbacks.ptmo(ColumnGroupBase.getCProp(props.headerColumnGroup, 'pt')), {
+        props: getColumnGroupProps(),
+        parent: props.metaData,
+        state: {
+          sortableDisabledFields: sortableDisabledFieldsState,
+          allSortableDisabled: allSortableDisabledState
+        }
+      };
+    };
+    var getColumnPTOptions = function getColumnPTOptions(column, key) {
+      var cProps = getColumnProps(column);
+      return props.ptCallbacks.ptmo(cProps, key, {
+        props: cProps,
+        parent: props.metaData,
+        state: {
+          sortableDisabledFields: sortableDisabledFieldsState,
+          allSortableDisabled: allSortableDisabledState
+        }
+      });
+    };
+    var getRowPTOptions = function getRowPTOptions(row, key) {
+      var rProps = getRowProps(row);
+      return props.ptCallbacks.ptmo(rProps, key, {
+        props: rProps,
+        parent: props.metaData
+      });
+    };
     var isColumnSorted = function isColumnSorted(column) {
       return props.sortField !== null ? getColumnProp(column, 'field') === props.sortField || getColumnProp(column, 'sortField') === props.sortField : false;
     };
@@ -3822,41 +4214,46 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         var isVisible = col ? !getColumnProp(col, 'hidden') : true;
         var key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i;
         return isVisible && /*#__PURE__*/React__namespace.createElement(HeaderCell, {
-          key: key,
-          value: props.value,
-          tableProps: props.tableProps,
+          allRowsSelected: props.allRowsSelected,
+          allSortableDisabled: isAllSortableDisabled,
           column: col,
-          tabIndex: props.tabIndex,
+          index: i,
           empty: props.empty,
-          resizableColumns: props.resizableColumns,
-          groupRowsBy: props.groupRowsBy,
-          groupRowSortField: props.groupRowSortField,
-          sortMode: props.sortMode,
-          sortIcon: props.sortIcon,
-          sortField: props.sortField,
-          sortOrder: props.sortOrder,
-          multiSortMeta: props.multiSortMeta,
-          allSortableDisabled: isAllSortableDisabled,
-          onSortableChange: onSortableChange,
-          sortableDisabledFields: sortableDisabledFieldsState,
+          filterClearIcon: props.filterClearIcon,
           filterDisplay: props.filterDisplay,
+          filterIcon: props.filterIcon,
           filters: props.filters,
           filtersStore: props.filtersStore,
-          onFilterChange: props.onFilterChange,
-          onFilterApply: props.onFilterApply,
-          onColumnMouseDown: props.onColumnMouseDown,
-          onColumnDragStart: props.onColumnDragStart,
-          onColumnDragOver: props.onColumnDragOver,
+          groupRowSortField: props.groupRowSortField,
+          groupRowsBy: props.groupRowsBy,
+          key: key,
+          multiSortMeta: props.multiSortMeta,
+          onColumnCheckboxChange: onCheckboxChange,
           onColumnDragLeave: props.onColumnDragLeave,
+          onColumnDragOver: props.onColumnDragOver,
+          onColumnDragStart: props.onColumnDragStart,
           onColumnDrop: props.onColumnDrop,
+          onColumnMouseDown: props.onColumnMouseDown,
           onColumnResizeStart: props.onColumnResizeStart,
           onColumnResizerClick: props.onColumnResizerClick,
           onColumnResizerDoubleClick: props.onColumnResizerDoubleClick,
-          showSelectAll: props.showSelectAll,
-          allRowsSelected: props.allRowsSelected,
-          onColumnCheckboxChange: onCheckboxChange,
+          onFilterApply: props.onFilterApply,
+          onFilterChange: props.onFilterChange,
+          onSortChange: props.onSortChange,
+          onSortableChange: onSortableChange,
           reorderableColumns: props.reorderableColumns,
-          onSortChange: props.onSortChange
+          resizableColumns: props.resizableColumns,
+          showSelectAll: props.showSelectAll,
+          sortField: props.sortField,
+          sortIcon: props.sortIcon,
+          sortMode: props.sortMode,
+          sortOrder: props.sortOrder,
+          sortableDisabledFields: sortableDisabledFieldsState,
+          tabIndex: props.tabIndex,
+          tableProps: props.tableProps,
+          value: props.value,
+          ptCallbacks: props.ptCallbacks,
+          metaData: props.metaData
         });
       });
     };
@@ -3866,7 +4263,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         return /*#__PURE__*/React__namespace.createElement(HeaderCheckbox, {
           checked: allRowsSelected,
           onChange: onCheckboxChange,
-          disabled: props.empty
+          disabled: props.empty,
+          ptCallbacks: props.ptCallbacks,
+          metaData: props.metaData
         });
       }
       return null;
@@ -3879,7 +4278,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           filters: props.filters,
           filtersStore: props.filtersStore,
           onFilterChange: props.onFilterChange,
-          onFilterApply: props.onFilterApply
+          onFilterApply: props.onFilterApply,
+          ptCallbacks: props.ptCallbacks,
+          metaData: props.metaData
         });
       }
       return null;
@@ -3905,11 +4306,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           var colKey = columnKey || field || i;
           var checkbox = createCheckbox(selectionMode);
           var filterRow = createFilter(col, filter);
-          return /*#__PURE__*/React__namespace.createElement("th", {
-            key: colKey,
+          var headerCellProps = utils.mergeProps({
             style: colStyle,
-            className: colClassName
-          }, checkbox, filterRow);
+            className: colClassName,
+            key: colKey
+          }, getColumnPTOptions(col, 'headerCell'), getColumnPTOptions(col, 'root'));
+          return /*#__PURE__*/React__namespace.createElement("th", headerCellProps, checkbox, filterRow);
         }
         return null;
       });
@@ -3918,32 +4320,35 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       if (props.headerColumnGroup) {
         var rows = React__namespace.Children.toArray(ColumnGroupBase.getCProp(props.headerColumnGroup, 'children'));
         return rows.map(function (row, i) {
-          return /*#__PURE__*/React__namespace.createElement("tr", {
-            key: i,
-            role: "row"
-          }, createGroupHeaderCells(row));
+          var headerRowProps = utils.mergeProps({
+            role: 'row'
+          }, getRowPTOptions(row, 'root'));
+          return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, headerRowProps, {
+            key: i
+          }), createGroupHeaderCells(row));
         });
       } else {
-        var headerRow = /*#__PURE__*/React__namespace.createElement("tr", {
-          role: "row"
-        }, createHeaderCells(props.columns));
-        var filterRow = props.filterDisplay === 'row' && /*#__PURE__*/React__namespace.createElement("tr", {
-          role: "row"
-        }, createFilterCells());
+        var headerRowProps = utils.mergeProps({
+          role: 'row'
+        }, props.ptCallbacks.ptm('headerRow'));
+        var headerRow = /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, createHeaderCells(props.columns));
+        var filterRow = props.filterDisplay === 'row' && /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, createFilterCells());
         return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, headerRow, filterRow);
       }
     };
     var content = createContent();
-    return /*#__PURE__*/React__namespace.createElement("thead", {
-      className: "p-datatable-thead"
-    }, content);
+    var theadProps = utils.mergeProps({
+      className: 'p-datatable-thead'
+    }, props.ptCallbacks.ptm('thead'), getColumnGroupPTOptions());
+    return /*#__PURE__*/React__namespace.createElement("thead", theadProps, content);
   });
   TableHeader.displayName = 'TableHeader';
 
   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 DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = DataTableBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var props = DataTableBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(props.first),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       firstState = _React$useState2[0],
@@ -3980,18 +4385,32 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       _React$useState18 = _slicedToArray(_React$useState17, 2),
       editingMetaState = _React$useState18[0],
       setEditingMetaState = _React$useState18[1];
-    var _React$useState19 = React__namespace.useState(null),
+    var _React$useState19 = React__namespace.useState(props.rows),
       _React$useState20 = _slicedToArray(_React$useState19, 2),
-      attributeSelectorState = _React$useState20[0],
-      setAttributeSelectorState = _React$useState20[1];
-    var _React$useState21 = React__namespace.useState(props.rows),
+      d_rowsState = _React$useState20[0],
+      setD_rowsState = _React$useState20[1];
+    var _React$useState21 = React__namespace.useState({}),
       _React$useState22 = _slicedToArray(_React$useState21, 2),
-      d_rowsState = _React$useState22[0],
-      setD_rowsState = _React$useState22[1];
-    var _React$useState23 = React__namespace.useState({}),
-      _React$useState24 = _slicedToArray(_React$useState23, 2),
-      d_filtersState = _React$useState24[0],
-      setD_filtersState = _React$useState24[1];
+      d_filtersState = _React$useState22[0],
+      setD_filtersState = _React$useState22[1];
+    var metaData = {
+      props: props,
+      state: {
+        first: firstState,
+        rows: rowsState,
+        sortField: sortFieldState,
+        sortOrder: sortOrderState,
+        multiSortMeta: multiSortMetaState,
+        filters: filtersState,
+        columnOrder: columnOrderState,
+        groupRowsSortMeta: groupRowsSortMetaState,
+        editingMeta: editingMetaState,
+        d_rows: d_rowsState,
+        d_filters: d_filtersState
+      }
+    };
+    var ptCallbacks = DataTableBase.setMetaData(metaData);
+    var attributeSelector = React__namespace.useRef('');
     var elementRef = React__namespace.useRef(null);
     var tableRef = React__namespace.useRef(null);
     var wrapperRef = React__namespace.useRef(null);
@@ -4279,7 +4698,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         if (utils.ObjectUtils.isNotEmpty(widths)) {
           createStyleElement();
           var innerHTML = '';
-          var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
+          var selector = ".p-datatable[".concat(attributeSelector.current, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
           widths.forEach(function (width, index) {
             var style = "width: ".concat(width, "px !important; max-width: ").concat(width, "px !important");
             innerHTML += "\n                        ".concat(selector, " > .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                        ").concat(selector, " > .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                        ").concat(selector, " > .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                            ").concat(style, "\n                        }\n                    ");
@@ -4452,7 +4871,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       destroyStyleElement();
       createStyleElement();
       var innerHTML = '';
-      var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
+      var selector = ".p-datatable[".concat(attributeSelector.current, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
       widths.forEach(function (width, index) {
         var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
         var style = "width: ".concat(colWidth, "px !important; max-width: ").concat(colWidth, "px !important");
@@ -4614,14 +5033,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
     };
     var createStyleElement = function createStyleElement() {
-      styleElement.current = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce);
+      styleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce);
     };
     var createResponsiveStyle = function createResponsiveStyle() {
       if (!responsiveStyleElement.current) {
-        responsiveStyleElement.current = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce);
+        responsiveStyleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce);
         var tableSelector = ".p-datatable-wrapper ".concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
-        var selector = ".p-datatable[".concat(attributeSelectorState, "] > ").concat(tableSelector);
-        var gridLinesSelector = ".p-datatable[".concat(attributeSelectorState, "].p-datatable-gridlines > ").concat(tableSelector);
+        var selector = ".p-datatable[".concat(attributeSelector.current, "] > ").concat(tableSelector);
+        var gridLinesSelector = ".p-datatable[".concat(attributeSelector.current, "].p-datatable-gridlines > ").concat(tableSelector);
         var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    ").concat(selector, " > .p-datatable-thead > tr > th,\n    ").concat(selector, " > .p-datatable-tfoot > tr > td {\n        display: none !important;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td {\n        display: flex;\n        width: 100% !important;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td:not(:last-child) {\n        border: 0 none;\n    }\n\n    ").concat(gridLinesSelector, " > .p-datatable-tbody > tr > td:last-child {\n        border-top: 0;\n        border-right: 0;\n        border-left: 0;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td > .p-column-title {\n        display: block;\n    }\n}\n");
         responsiveStyleElement.current.innerHTML = innerHTML;
       }
@@ -4710,7 +5129,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       return props.removableSort ? props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
     };
     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 addSortMeta = function addSortMeta(meta, multiSortMeta) {
       var index = multiSortMeta.findIndex(function (sortMeta) {
@@ -4796,7 +5215,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       var value2 = utils.ObjectUtils.resolveFieldData(data2, 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(data1, data2, multiSortMeta, index + 1) : 0;
       }
       return compareValuesOnSort(value1, value2, multiSortMeta[index].order);
@@ -4920,7 +5339,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           var field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
           var filterFunction = getColumnProp(col, 'filterFunction');
           var dataType = getColumnProp(col, 'dataType');
-          var matchMode = getColumnProp(col, 'filterMatchMode') || (PrimeReact__default["default"].filterMatchModeOptions[dataType] ? PrimeReact__default["default"].filterMatchModeOptions[dataType][0] : PrimeReact.FilterMatchMode.STARTS_WITH);
+          var matchMode = getColumnProp(col, 'filterMatchMode') || (context && context.filterMatchModeOptions[dataType] || PrimeReact__default["default"].filterMatchModeOptions[dataType] ? context && context.filterMatchModeOptions[dataType][0] || PrimeReact__default["default"].filterMatchModeOptions[dataType][0] : PrimeReact.FilterMatchMode.STARTS_WITH);
           var constraint = {
             value: null,
             matchMode: matchMode
@@ -5103,7 +5522,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       return data;
     };
     hooks.useMountEffect(function () {
-      !attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId());
+      attributeSelector.current = utils.UniqueComponentId();
 
       //setFiltersState(cloneFilters(props.filters)); // Github #4248
       setD_filtersState(cloneFilters(props.filters));
@@ -5115,16 +5534,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       }
     });
     hooks.useUpdateEffect(function () {
-      if (attributeSelectorState) {
-        elementRef.current.setAttribute(attributeSelectorState, '');
-        if (props.responsiveLayout === 'stack' && !props.scrollable) {
-          createResponsiveStyle();
-        }
+      elementRef.current.setAttribute(attributeSelector.current, '');
+      if (props.responsiveLayout === 'stack' && !props.scrollable) {
+        createResponsiveStyle();
       }
       return function () {
         destroyResponsiveStyle();
       };
-    }, [attributeSelectorState, props.breakpoint]);
+    }, [props.breakpoint]);
     hooks.useUpdateEffect(function () {
       var filters = cloneFilters(props.filters);
       setFiltersState(filters);
@@ -5187,18 +5604,19 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var createLoader = function createLoader() {
       if (props.loading) {
         var iconClassName = 'p-datatable-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-datatable-loading-overlay p-component-overlay"
-        }, loadingIcon);
+        var loadingOverlayProps = utils.mergeProps({
+          className: 'p-datatable-loading-overlay p-component-overlay'
+        }, ptCallbacks.ptm('loadingOverlay'));
+        return /*#__PURE__*/React__namespace.createElement("div", loadingOverlayProps, loadingIcon);
       }
       return null;
     };
@@ -5207,9 +5625,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         var _content = utils.ObjectUtils.getJSXElement(props.header, {
           props: props
         });
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-datatable-header"
-        }, _content);
+        var headerProps = utils.mergeProps({
+          className: 'p-datatable-header'
+        }, ptCallbacks.ptm('header'));
+        return /*#__PURE__*/React__namespace.createElement("div", headerProps, _content);
       }
       return null;
     };
@@ -5262,7 +5681,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         onColumnDragLeave: onColumnHeaderDragLeave,
         onColumnDrop: onColumnHeaderDrop,
         rowGroupMode: props.rowGroupMode,
-        reorderableColumns: props.reorderableColumns
+        reorderableColumns: props.reorderableColumns,
+        ptCallbacks: ptCallbacks,
+        metaData: metaData
       });
     };
     var createTableBody = function createTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled) {
@@ -5276,75 +5697,80 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         itemSize = options.itemSize;
       var frozenBody = utils.ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React__namespace.createElement(TableBody, {
         ref: frozenBodyRef,
-        value: props.frozenValue,
+        cellClassName: props.cellClassName,
+        cellSelection: props.cellSelection,
+        checkIcon: props.checkIcon,
         className: "p-datatable-tbody p-datatable-frozen-tbody",
-        frozenRow: true,
-        tableProps: props,
-        tableSelector: attributeSelectorState,
+        collapsedRowIcon: props.collapsedRowIcon,
         columns: columns,
-        selectionModeInColumn: selectionModeInColumn,
-        first: first,
+        compareSelectionBy: props.compareSelectionBy,
+        contextMenuSelection: props.contextMenuSelection,
+        dataKey: props.dataKey,
+        dragSelection: props.dragSelection,
+        editMode: props.editMode,
         editingMeta: editingMetaState,
-        onEditingMetaChange: onEditingMetaChange,
-        tabIndex: props.tabIndex,
-        onRowClick: props.onRowClick,
-        onRowDoubleClick: props.onRowDoubleClick,
-        onRowMouseEnter: props.onRowMouseEnter,
-        onRowMouseLeave: props.onRowMouseLeave,
-        onCellClick: props.onCellClick,
-        selection: props.selection,
-        onSelectionChange: props.onSelectionChange,
+        editingRows: props.editingRows,
+        emptyMessage: props.emptyMessage,
+        expandableRowGroups: props.expandableRowGroups,
+        expandedRowIcon: props.expandedRowIcon,
+        expandedRows: props.expandedRows,
+        first: first,
+        frozenRow: true,
+        groupRowsBy: props.groupRowsBy,
+        isDataSelectable: props.isDataSelectable,
+        isVirtualScrollerDisabled: true,
         lazy: props.lazy,
-        paginator: props.paginator,
+        loading: props.loading,
+        metaKeySelection: props.metaKeySelection,
+        onCellClick: props.onCellClick,
         onCellSelect: props.onCellSelect,
         onCellUnselect: props.onCellUnselect,
-        onRowSelect: props.onRowSelect,
-        onRowUnselect: props.onRowUnselect,
-        dragSelection: props.dragSelection,
         onContextMenu: props.onContextMenu,
         onContextMenuSelectionChange: props.onContextMenuSelectionChange,
-        metaKeySelection: props.metaKeySelection,
-        selectionMode: props.selectionMode,
-        cellSelection: props.cellSelection,
-        contextMenuSelection: props.contextMenuSelection,
-        dataKey: props.dataKey,
-        expandedRows: props.expandedRows,
+        onEditingMetaChange: onEditingMetaChange,
+        onRowClick: props.onRowClick,
         onRowCollapse: props.onRowCollapse,
+        onRowDoubleClick: props.onRowDoubleClick,
+        onRowEditCancel: props.onRowEditCancel,
+        onRowEditChange: props.onRowEditChange,
+        onRowEditComplete: props.onRowEditComplete,
+        onRowEditInit: props.onRowEditInit,
+        onRowEditSave: props.onRowEditSave,
         onRowExpand: props.onRowExpand,
-        onRowToggle: props.onRowToggle,
-        editMode: props.editMode,
-        editingRows: props.editingRows,
+        onRowMouseEnter: props.onRowMouseEnter,
+        onRowMouseLeave: props.onRowMouseLeave,
         onRowReorder: props.onRowReorder,
+        onRowSelect: props.onRowSelect,
+        onRowToggle: props.onRowToggle,
+        onRowUnselect: props.onRowUnselect,
+        onSelectionChange: props.onSelectionChange,
+        paginator: props.paginator,
         reorderableRows: props.reorderableRows,
-        scrollable: props.scrollable,
-        rowGroupMode: props.rowGroupMode,
-        groupRowsBy: props.groupRowsBy,
-        expandableRowGroups: props.expandableRowGroups,
-        loading: props.loading,
-        emptyMessage: props.emptyMessage,
-        rowGroupHeaderTemplate: props.rowGroupHeaderTemplate,
+        responsiveLayout: props.responsiveLayout,
+        rowClassName: props.rowClassName,
+        rowEditValidator: props.rowEditValidator,
+        rowEditorCancelIcon: props.rowEditorCancelIcon,
+        rowEditorInitIcon: props.rowEditorInitIcon,
+        rowEditorSaveIcon: props.rowEditorSaveIcon,
         rowExpansionTemplate: props.rowExpansionTemplate,
         rowGroupFooterTemplate: props.rowGroupFooterTemplate,
-        onRowEditChange: props.onRowEditChange,
-        compareSelectionBy: props.compareSelectionBy,
+        rowGroupHeaderTemplate: props.rowGroupHeaderTemplate,
+        rowGroupMode: props.rowGroupMode,
+        scrollable: props.scrollable,
         selectOnEdit: props.selectOnEdit,
-        onRowEditInit: props.onRowEditInit,
-        rowEditValidator: props.rowEditValidator,
-        onRowEditSave: props.onRowEditSave,
-        onRowEditComplete: props.onRowEditComplete,
-        onRowEditCancel: props.onRowEditCancel,
-        cellClassName: props.cellClassName,
-        responsiveLayout: props.responsiveLayout,
+        selection: props.selection,
         selectionAutoFocus: props.selectionAutoFocus,
-        isDataSelectable: props.isDataSelectable,
-        showSelectionElement: props.showSelectionElement,
+        selectionMode: props.selectionMode,
+        selectionModeInColumn: selectionModeInColumn,
         showRowReorderElement: props.showRowReorderElement,
-        expandedRowIcon: props.expandedRowIcon,
-        collapsedRowIcon: props.collapsedRowIcon,
-        checkIcon: props.checkIcon,
-        rowClassName: props.rowClassName,
+        showSelectionElement: props.showSelectionElement,
+        tabIndex: props.tabIndex,
+        tableProps: props,
+        tableSelector: attributeSelector.current,
+        value: props.frozenValue,
         virtualScrollerOptions: options,
-        isVirtualScrollerDisabled: true
+        ptCallbacks: ptCallbacks,
+        metaData: metaData
       });
       var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
         ref: bodyRef,
@@ -5354,7 +5780,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         empty: empty,
         frozenRow: false,
         tableProps: props,
-        tableSelector: attributeSelectorState,
+        tableSelector: attributeSelector.current,
         columns: columns,
         selectionModeInColumn: selectionModeInColumn,
         first: first,
@@ -5419,13 +5845,17 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         rowClassName: props.rowClassName,
         virtualScrollerContentRef: contentRef,
         virtualScrollerOptions: options,
-        isVirtualScrollerDisabled: isVirtualScrollerDisabled
+        isVirtualScrollerDisabled: isVirtualScrollerDisabled,
+        ptCallbacks: ptCallbacks,
+        metaData: metaData
       });
       var spacerBody = utils.ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React__namespace.createElement(TableBody, {
         style: {
           height: "calc(".concat(spacerStyle.height, " - ").concat(rows.length * itemSize, "px)")
         },
-        className: "p-datatable-virtualscroller-spacer"
+        className: "p-datatable-virtualscroller-spacer",
+        ptCallbacks: ptCallbacks,
+        metaData: metaData
       }) : null;
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, frozenBody, body, spacerBody);
     };
@@ -5434,20 +5864,23 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
       return /*#__PURE__*/React__namespace.createElement(TableFooter, {
         tableProps: props,
         columns: columns,
-        footerColumnGroup: props.footerColumnGroup
+        footerColumnGroup: props.footerColumnGroup,
+        ptCallbacks: ptCallbacks,
+        metaData: metaData
       });
     };
     var createContent = function createContent(processedData, columns, selectionModeInColumn, empty) {
       if (!columns) return;
       var _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
       var virtualScrollerOptions = props.virtualScrollerOptions || {};
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      var wrapperProps = utils.mergeProps({
         ref: wrapperRef,
-        className: "p-datatable-wrapper",
+        className: 'p-datatable-wrapper',
         style: {
           maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
         }
-      }, /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
+      }, ptCallbacks.ptm('wrapper'));
+      return /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
         ref: virtualScrollerRef
       }, virtualScrollerOptions, {
         items: processedData,
@@ -5460,6 +5893,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         loaderDisabled: true,
         inline: true,
         autoSize: true,
+        pt: ptCallbacks.ptm('virtualScroller'),
         showSpacer: false,
         contentTemplate: function contentTemplate(options) {
           var ref = function ref(el) {
@@ -5474,12 +5908,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           var tableHeader = createTableHeader(options, empty, _isVirtualScrollerDisabled);
           var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled);
           var tableFooter = createTableFooter(options);
-          return /*#__PURE__*/React__namespace.createElement("table", {
+          var tableProps = utils.mergeProps({
             ref: ref,
-            style: props.tableStyle,
             className: tableClassName,
-            role: "table"
-          }, tableHeader, tableBody, tableFooter);
+            style: props.tableStyle,
+            role: 'table'
+          }, ptCallbacks.ptm('table'));
+          return /*#__PURE__*/React__namespace.createElement("table", tableProps, tableHeader, tableBody, tableFooter);
         }
       })));
     };
@@ -5488,9 +5923,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
         var _content2 = utils.ObjectUtils.getJSXElement(props.footer, {
           props: props
         });
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-datatable-footer"
-        }, _content2);
+        var footerProps = utils.mergeProps({
+          className: 'p-datatable-footer'
+        }, ptCallbacks.ptm('footer'));
+        return /*#__PURE__*/React__namespace.createElement("div", footerProps, _content2);
       }
       return null;
     };
@@ -5509,7 +5945,8 @@ this.primereact.datatable = (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 createPaginatorTop = function createPaginatorTop(totalRecords) {
@@ -5526,13 +5963,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     };
     var createResizeHelper = function createResizeHelper() {
       if (props.resizableColumns) {
-        return /*#__PURE__*/React__namespace.createElement("div", {
+        var resizeHelperProps = utils.mergeProps({
           ref: resizeHelperRef,
-          className: "p-column-resizer-helper",
+          className: 'p-column-resizer-helper',
           style: {
             display: 'none'
           }
-        });
+        }, ptCallbacks.ptm('resizeHelper'));
+        return /*#__PURE__*/React__namespace.createElement("div", resizeHelperProps);
       }
       return null;
     };
@@ -5542,18 +5980,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
           position: 'absolute',
           display: 'none'
         };
-        var reorderIndicatorUpProps = {
+        var reorderIndicatorUpProps = utils.mergeProps({
           className: 'p-datatable-reorder-indicator-up',
           style: _objectSpread({}, style)
-        };
-        var reorderIndicatorUpIcon = 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 = utils.IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React__namespace.createElement(arrowdown.ArrowDownIcon, reorderIndicatorUpIconProps), _objectSpread({}, reorderIndicatorUpIconProps), {
           props: props
         });
-        var reorderIndicatorDownProps = {
+        var reorderIndicatorDownProps = utils.mergeProps({
           className: 'p-datatable-reorder-indicator-down',
           style: _objectSpread({}, style)
-        };
-        var reorderIndicatorDownIcon = utils.IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React__namespace.createElement(arrowup.ArrowUpIcon, null), undefined, {
+        }, ptCallbacks.ptm('reorderIndicatorDown'));
+        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
         });
         return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("span", _extends({
@@ -5570,7 +6010,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var empty = utils.ObjectUtils.isEmpty(data);
     var selectionModeInColumn = getSelectionModeInColumn(columns);
     var selectable = props.selectionMode || selectionModeInColumn;
-    var otherProps = DataTableBase.getOtherProps(props);
     var className = utils.classNames('p-datatable p-component', {
       'p-datatable-hoverable-rows': props.rowHover,
       'p-datatable-selectable': selectable && !props.cellSelection,
@@ -5596,14 +6035,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
     var footer = createFooter();
     var resizeHelper = createResizeHelper();
     var reorderIndicators = createReorderIndicators();
-    return /*#__PURE__*/React__namespace.createElement("div", _extends({
+    var rootProps = utils.mergeProps({
       ref: elementRef,
       id: props.id,
       className: className,
-      style: props.style
-    }, otherProps, {
-      "data-scrollselectors": ".p-datatable-wrapper"
-    }), loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
+      style: props.style,
+      'data-scrollselectors': '.p-datatable-wrapper'
+    }, DataTableBase.getOtherProps(props), ptCallbacks.ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement("div", rootProps, loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
   });
   DataTable.displayName = 'DataTable';
 
@@ -5613,4 +6052,4 @@ this.primereact.datatable = (function (exports, React, PrimeReact, utils, hooks,
 
   return exports;
 
-})({}, React, primereact.api, primereact.utils, primereact.hooks, primereact.icons.arrowdown, primereact.icons.arrowup, primereact.icons.spinner, primereact.paginator, primereact.virtualscroller, primereact.icons.bars, primereact.icons.check, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.pencil, primereact.icons.times, primereact.overlayservice, primereact.ripple, primereact.button, primereact.csstransition, primereact.dropdown, primereact.icons.filter, primereact.icons.filterslash, primereact.icons.plus, primereact.icons.trash, primereact.inputtext, primereact.portal, primereact.icons.sortalt, primereact.icons.sortamountdown, primereact.icons.sortamountupalt, primereact.tooltip);
+})({}, React, primereact.api, primereact.componentbase, primereact.utils, primereact.hooks, primereact.icons.arrowdown, primereact.icons.arrowup, primereact.icons.spinner, primereact.paginator, primereact.virtualscroller, primereact.icons.bars, primereact.icons.check, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.pencil, primereact.icons.times, primereact.overlayservice, primereact.ripple, primereact.button, primereact.csstransition, primereact.dropdown, primereact.icons.filter, primereact.icons.filterslash, primereact.icons.plus, primereact.icons.trash, primereact.inputtext, primereact.portal, primereact.icons.sortalt, primereact.icons.sortamountdown, primereact.icons.sortamountupalt, primereact.tooltip);