primereact 9.5.0 → 9.6.0

package/datatable/datatable.esm.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, FilterOperator, FilterService } from 'primereact/api';
-import { ObjectUtils, classNames, IconUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
+import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, PrimeReactContext, FilterOperator, FilterService } from 'primereact/api';
+import { ComponentBase } from 'primereact/componentbase';
+import { ObjectUtils, classNames, mergeProps, IconUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
 import { useEventListener, useUpdateEffect, useUnmountEffect, useOverlayListener, usePrevious, useMountEffect } from 'primereact/hooks';
 import { ArrowDownIcon } from 'primereact/icons/arrowdown';
 import { ArrowUpIcon } from 'primereact/icons/arrowup';
@@ -156,7 +157,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var ColumnBase = {
+var ColumnBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Column',
     align: null,
@@ -246,9 +247,9 @@ var ColumnBase = {
   getCOtherProps: function getCOtherProps(column) {
     return ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps);
   }
-};
+});
 
-var DataTableBase = {
+var DataTableBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'DataTable',
     alwaysShowPaginator: true,
@@ -391,14 +392,8 @@ var DataTableBase = {
     value: null,
     virtualScrollerOptions: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, DataTableBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, DataTableBase.defaultProps);
   }
-};
+});
 
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -429,61 +424,88 @@ function _objectWithoutProperties(source, excluded) {
   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.memo(function (props) {
   var _React$useState = React.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 = classNames('p-checkbox p-component', {
-    'p-checkbox-focused': focusedState
+    'p-checkbox-focused': focusedState,
+    'p-disabled': props.disabled
   });
   var boxClassName = 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.createElement(CheckIcon, {
+  var checkboxIconProps = mergeProps({
     className: iconClassName
-  }) : null;
-  var checkIcon = IconUtils.getJSXIcon(icon, {
-    className: iconClassName
-  }, {
+  }, getColumnPTOptions('checkboxIcon'));
+  var icon = props.checked ? props.checkIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconProps) : null;
+  var checkIcon = IconUtils.getJSXIcon(icon, _objectSpread$a({}, checkboxIconProps), {
     props: props
   });
   var tabIndex = props.disabled ? null : '0';
-  return /*#__PURE__*/React.createElement("div", {
+  var checkboxWrapperProps = mergeProps({
     className: className,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      return _onClick(e);
+    }
+  }, getColumnPTOptions('checkboxWrapper'));
+  var checkboxProps = 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.createElement("div", checkboxWrapperProps, /*#__PURE__*/React.createElement("div", checkboxProps, checkIcon));
 });
 RowCheckbox.displayName = 'RowCheckbox';
 
@@ -493,64 +515,95 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
   var inputRef = React.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);
       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 = classNames('p-radiobutton p-component', {
-    'p-radiobutton-focused': focusedState
+    'p-radiobutton-focused': focusedState,
+    'p-disabled': props.disabled
   });
   var boxClassName = 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.createElement("div", {
+  var radiobuttonWrapperProps = mergeProps({
     className: className
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-hidden-accessible"
-  }, /*#__PURE__*/React.createElement("input", {
+  }, getColumnPTOptions('radiobuttonWrapper'));
+  var hiddenInputWrapperProps = mergeProps({
+    className: 'p-hidden-accessible'
+  }, getColumnPTOptions('hiddenInputWrapper'));
+  var hiddenInputProps = 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.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 = mergeProps({
     className: boxClassName,
-    onClick: onClick,
-    role: "radio",
-    "aria-checked": props.checked
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-radiobutton-icon"
-  })));
+    onClick: function onClick(e) {
+      return _onClick(e);
+    },
+    role: 'radio',
+    'aria-checked': props.checked
+  }, getColumnPTOptions('radiobutton'));
+  var radiobuttonIconProps = mergeProps({
+    className: 'p-radiobutton-icon'
+  }, getColumnPTOptions('radiobuttonIcon'));
+  return /*#__PURE__*/React.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", hiddenInputProps)), /*#__PURE__*/React.createElement("div", radiobuttonProps, /*#__PURE__*/React.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.memo(function (props) {
   var _React$useState = React.useState(props.editing),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -573,6 +626,21 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   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 = useEventListener({
@@ -628,7 +696,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   };
   var getCellCallbackParams = function getCellCallbackParams(event) {
     var params = getCellParams();
-    return _objectSpread$8({
+    return _objectSpread$9({
       originalEvent: event
     }, params);
   };
@@ -666,7 +734,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     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
     });
@@ -732,7 +800,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   };
   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;
@@ -754,7 +822,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var editorCallback = function editorCallback(val) {
-    var editingRowData = _objectSpread$8({}, editingRowDataState);
+    var editingRowData = _objectSpread$9({}, editingRowDataState);
     editingRowData[field] = val;
     setEditingRowDataState(editingRowData);
 
@@ -764,7 +832,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       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;
@@ -811,15 +879,15 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       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
@@ -878,7 +946,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         case 13:
           // @deprecated
           if (!DomHandler.isClickable(target)) {
-            onClick(event);
+            _onClick(event);
             event.preventDefault();
           }
           break;
@@ -886,21 +954,21 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         //space
         case 32:
           if (!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({
@@ -968,7 +1036,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   React.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
       });
@@ -993,7 +1061,8 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       field: field
     });
     var content = ObjectUtils.getJSXElement(getVirtualScrollerOption('loadingTemplate'), options);
-    return /*#__PURE__*/React.createElement("td", null, content);
+    var bodyCellProps = mergeProps(getColumnPTOptions('bodyCell'));
+    return /*#__PURE__*/React.createElement("td", bodyCellProps, content);
   };
   var createElement = function createElement() {
     var content, editorKeyHelper;
@@ -1031,9 +1100,10 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       'p-highlight': cellSelected
     }, "p-align-".concat(align), !!align));
     var style = getStyle();
-    var title = props.responsiveLayout === 'stack' && /*#__PURE__*/React.createElement("span", {
-      className: "p-column-title"
-    }, ObjectUtils.getJSXElement(header, {
+    var columnTitleProps = mergeProps({
+      className: 'p-column-title'
+    }, getColumnProp('columnTitle'));
+    var title = props.responsiveLayout === 'stack' && /*#__PURE__*/React.createElement("span", columnTitleProps, ObjectUtils.getJSXElement(header, {
       props: props.tableProps
     }));
     if (selectionMode) {
@@ -1048,17 +1118,31 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         label = "".concat(props.selected ? ariaLabel('unselectLabel') : ariaLabel('selectLabel'), " ").concat(ariaLabelText);
       }
       content = showSelection && /*#__PURE__*/React.createElement(React.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React.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.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, {
@@ -1066,21 +1150,20 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         props: props.tableProps
       }) : true;
       var rowReorderIconClassName = 'p-datatable-reorderablerow-handle';
-      var rowReorderIcon = getColumnProp('rowReorderIcon') || /*#__PURE__*/React.createElement(BarsIcon, {
-        className: rowReorderIconClassName
-      });
-      content = showReorder && IconUtils.getJSXIcon(rowReorderIcon, {
+      var rowReorderIconProps = mergeProps({
         className: rowReorderIconClassName
-      }, {
+      }, getColumnProp('rowReorderIcon'));
+      var rowReorderIcon = getColumnProp('rowReorderIcon') || /*#__PURE__*/React.createElement(BarsIcon, rowReorderIconProps);
+      content = showReorder && IconUtils.getJSXIcon(rowReorderIcon, _objectSpread$9({}, rowReorderIconProps), {
         props: props
       });
     } else if (expander) {
-      var iconProps = {
+      var rowTogglerIconProps = mergeProps({
         className: 'p-row-toggler-icon',
         'aria-hidden': true
-      };
-      var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, iconProps) : props.collapsedRowIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, iconProps);
-      var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$8({}, iconProps), {
+      }, getColumnProp('rowTogglerIcon'));
+      var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, rowTogglerIconProps) : props.collapsedRowIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, rowTogglerIconProps);
+      var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$9({}, rowTogglerIconProps), {
         props: props
       });
       var ariaControls = "".concat(props.tableSelector, "_content_").concat(props.rowIndex, "_expanded");
@@ -1091,13 +1174,14 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         onClick: onRowToggle,
         className: 'p-row-toggler p-link'
       };
-      content = /*#__PURE__*/React.createElement("button", _extends({}, expanderProps, {
-        type: "button",
-        "aria-expanded": props.expanded,
-        "aria-controls": ariaControls,
+      var rowTogglerProps = mergeProps(_objectSpread$9(_objectSpread$9({}, expanderProps), {}, {
+        type: 'button',
+        'aria-expanded': props.expanded,
+        'aria-controls': ariaControls,
         tabIndex: props.tabIndex,
-        "aria-label": _label
-      }), togglerIcon, /*#__PURE__*/React.createElement(Ripple, null));
+        'aria-label': _label
+      }), getColumnPTOptions('rowToggler'));
+      content = /*#__PURE__*/React.createElement("button", rowTogglerProps, togglerIcon, /*#__PURE__*/React.createElement(Ripple, null));
       if (body) {
         expanderProps['element'] = content;
         content = ObjectUtils.getJSXElement(body, props.rowData, {
@@ -1114,25 +1198,22 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       var rowEditorSaveIconClassName = 'p-row-editor-save-icon',
         rowEditorCancelIconClassName = 'p-row-editor-cancel-icon',
         rowEditorInitIconClassName = 'p-row-editor-init-icon';
-      var rowEditorSaveIcon = IconUtils.getJSXIcon(props.rowEditorSaveIcon || /*#__PURE__*/React.createElement(CheckIcon, {
-        className: rowEditorSaveIconClassName
-      }), {
+      var rowEditorSaveIconProps = mergeProps({
         className: rowEditorSaveIconClassName
-      }, {
+      }, getColumnProp('rowEditorSaveIconProps'));
+      var rowEditorCancelIconProps = mergeProps({
+        className: rowEditorCancelIconClassName
+      }, getColumnProp('rowEditorCancelIconProps'));
+      var rowEditorInitIconProps = mergeProps({
+        className: rowEditorInitIconClassName
+      }, getColumnProp('rowEditorInitIconProps'));
+      var rowEditorSaveIcon = IconUtils.getJSXIcon(props.rowEditorSaveIcon || /*#__PURE__*/React.createElement(CheckIcon, rowEditorSaveIconProps), _objectSpread$9({}, rowEditorSaveIconProps), {
         props: props
       });
-      var rowEditorCancelIcon = IconUtils.getJSXIcon(props.rowEditorCancelIcon || /*#__PURE__*/React.createElement(TimesIcon, {
-        className: rowEditorCancelIconClassName
-      }), {
-        className: rowEditorCancelIconClassName
-      }, {
+      var rowEditorCancelIcon = IconUtils.getJSXIcon(props.rowEditorCancelIcon || /*#__PURE__*/React.createElement(TimesIcon, rowEditorCancelIconProps), _objectSpread$9({}, rowEditorCancelIconProps), {
         props: props
       });
-      var rowEditorInitIcon = IconUtils.getJSXIcon(props.rowEditorInitIcon || /*#__PURE__*/React.createElement(PencilIcon, {
-        className: rowEditorInitIconClassName
-      }), {
-        className: rowEditorInitIconClassName
-      }, {
+      var rowEditorInitIcon = IconUtils.getJSXIcon(props.rowEditorInitIcon || /*#__PURE__*/React.createElement(PencilIcon, rowEditorInitIconProps), _objectSpread$9({}, rowEditorInitIconProps), {
         props: props
       });
       if (editingState) {
@@ -1143,32 +1224,35 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           onCancelClick: onRowEditCancel,
           cancelClassName: 'p-row-editor-cancel p-link'
         };
-        content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-          type: "button",
-          name: "row-save",
+        var rowEditorEditButtonProps = mergeProps({
+          type: 'button',
+          name: 'row-save',
           onClick: rowEditorProps.onSaveClick,
           className: rowEditorProps.saveClassName,
           tabIndex: props.tabIndex
-        }, rowEditorSaveIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", {
-          type: "button",
-          name: "row-cancel",
+        }, getColumnPTOptions('rowEditorSaveButtonProps'));
+        var rowEditorCancelButtonProps = mergeProps({
+          type: 'button',
+          name: 'row-cancel',
           onClick: rowEditorProps.onCancelClick,
           className: rowEditorProps.cancelClassName,
           tabIndex: props.tabIndex
-        }, rowEditorCancelIcon, /*#__PURE__*/React.createElement(Ripple, null)));
+        }, getColumnPTOptions('rowEditorCancelButtonProps'));
+        content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", rowEditorEditButtonProps, rowEditorSaveIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", rowEditorCancelButtonProps, rowEditorCancelIcon, /*#__PURE__*/React.createElement(Ripple, null)));
       } else {
         rowEditorProps = {
           editing: false,
           onInitClick: onRowEditInit,
           initClassName: 'p-row-editor-init p-link'
         };
-        content = /*#__PURE__*/React.createElement("button", {
-          type: "button",
-          name: "row-edit",
+        var rowEditorInitButtonProps = mergeProps({
+          type: 'button',
+          name: 'row-edit',
           onClick: rowEditorProps.onInitClick,
           className: rowEditorProps.initClassName,
           tabIndex: props.tabIndex
-        }, rowEditorInitIcon, /*#__PURE__*/React.createElement(Ripple, null));
+        }, getColumnPTOptions('rowEditorInitButtonProps'));
+        content = /*#__PURE__*/React.createElement("button", rowEditorInitButtonProps, rowEditorInitIcon, /*#__PURE__*/React.createElement(Ripple, null));
       }
       if (body) {
         rowEditorProps['element'] = content;
@@ -1205,42 +1289,70 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     }
     content = typeof content == 'boolean' ? content.toString() : content;
     if (!isRowEditor && editor) {
-      /* eslint-disable */
-      editorKeyHelper = /*#__PURE__*/React.createElement("a", {
-        tabIndex: "0",
+      var editorKeyHelperProps = mergeProps({
+        tabIndex: '0',
         ref: keyHelperRef,
-        className: "p-cell-editor-key-helper p-hidden-accessible",
-        onFocus: onEditorFocus
-      }, /*#__PURE__*/React.createElement("span", null));
+        className: 'p-cell-editor-key-helper p-hidden-accessible',
+        onFocus: function onFocus(e) {
+          return onEditorFocus(e);
+        }
+      }, getColumnPTOptions('editorKeyHelperLabel'));
+      var editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
+      /* eslint-disable */
+      editorKeyHelper = /*#__PURE__*/React.createElement("a", editorKeyHelperProps, /*#__PURE__*/React.createElement("span", editorKeyHelperLabelProps));
       /* eslint-enable */
     }
 
-    return /*#__PURE__*/React.createElement("td", {
+    var bodyCellProps = 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.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.memo(function (props) {
   var _React$useState = React.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);
   };
@@ -1311,14 +1423,14 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       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,
@@ -1332,24 +1444,24 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       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;
@@ -1378,7 +1490,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         case 13:
           // @deprecated
           if (!DomHandler.isClickable(target)) {
-            onClick(event);
+            _onClick(event);
             event.preventDefault();
           }
           break;
@@ -1386,56 +1498,56 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         //space
         case 32:
           if (!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,
@@ -1452,7 +1564,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         newData = e.newData;
       if (dataKey) {
         var dataKeyValue = String(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
@@ -1572,7 +1684,9 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
           tableProps: props.tableProps,
           tableSelector: props.tableSelector,
           value: props.value,
-          virtualScrollerOptions: props.virtualScrollerOptions
+          virtualScrollerOptions: props.virtualScrollerOptions,
+          ptCallbacks: props.ptCallbacks,
+          metaData: props.metaData
         });
       }
       return null;
@@ -1595,65 +1709,119 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
   };
   var content = createContent();
   var tabIndex = getTabIndex();
-  return /*#__PURE__*/React.createElement("tr", {
-    role: "row",
+  var rowProps = 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.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.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 = mergeProps({
     className: 'p-row-toggler-icon',
     'aria-hidden': true
-  };
-  var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, iconProps) : props.collapsedRowIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, iconProps);
-  var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$6({}, iconProps), {
+  }, getColumnPTOptions('rowGroupTogglerIcon'));
+  var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, rowGroupTogglerIconProps) : props.collapsedRowIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, rowGroupTogglerIconProps);
+  var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$7({}, rowGroupTogglerIconProps), {
     props: props
   });
   var label = props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
-  return /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: onClick,
-    className: "p-row-toggler p-link",
+  var rowGroupTogglerProps = 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.createElement(Ripple, null));
+    'aria-label': label
+  }, getColumnPTOptions('rowGroupToggler'));
+  return /*#__PURE__*/React.createElement("button", rowGroupTogglerProps, togglerIcon, /*#__PURE__*/React.createElement(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.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.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.useRef(null);
   var refCallback = React.useCallback(function (el) {
     elementRef.current = el;
@@ -2029,14 +2197,14 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     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
@@ -2094,12 +2262,12 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         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'
           }));
@@ -2169,7 +2337,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     var hasDataKey = props.groupRowsBy ? dataKey === props.groupRowsBy : !!dataKey;
     if (hasDataKey) {
       var dataKeyValue = String(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) {
@@ -2286,13 +2454,13 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     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'
     }));
@@ -2403,13 +2571,15 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         props: props.tableProps,
         frozen: props.frozenRow
       }) || localeOption('emptyMessage');
-      return /*#__PURE__*/React.createElement("tr", {
-        className: "p-datatable-emptymessage",
-        role: "row"
-      }, /*#__PURE__*/React.createElement("td", {
+      var emptyMessageProps = mergeProps({
+        className: 'p-datatable-emptymessage',
+        role: 'row'
+      }, getColumnPTOptions('emptyMessage'));
+      var bodyCellProps = mergeProps({
         colSpan: colSpan,
-        role: "cell"
-      }, _content));
+        role: 'cell'
+      }, getColumnPTOptions('bodyCell'), getColumnPTOptions('root'));
+      return /*#__PURE__*/React.createElement("tr", emptyMessageProps, /*#__PURE__*/React.createElement("td", bodyCellProps, _content));
     }
     return null;
   };
@@ -2421,7 +2591,9 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         rowData: rowData,
         expanded: expanded,
         expandedRowIcon: props.expandedRowIcon,
-        collapsedRowIcon: props.collapsedRowIcon
+        collapsedRowIcon: props.collapsedRowIcon,
+        ptCallbacks: props.ptCallbacks,
+        metaData: props.metaData
       });
       var options = {
         index: rowIndex,
@@ -2432,17 +2604,20 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 
       // check if the user wants complete control of the rendering
       if (!options.customRendering) {
-        _content2 = /*#__PURE__*/React.createElement("td", {
+        var bodyCellProps = mergeProps({
           colSpan: colSpan
-        }, toggler, /*#__PURE__*/React.createElement("span", {
-          className: "p-rowgroup-header-name"
-        }, _content2));
+        }, getColumnPTOptions('bodyCell'), getColumnPTOptions('root'));
+        var rowgroupHeaderNameProps = mergeProps({
+          className: 'p-rowgroup-header-name'
+        }, getColumnPTOptions('rowgroupHeaderName'));
+        _content2 = /*#__PURE__*/React.createElement("td", bodyCellProps, toggler, /*#__PURE__*/React.createElement("span", rowgroupHeaderNameProps, _content2));
       }
-      return /*#__PURE__*/React.createElement("tr", {
-        className: "p-rowgroup-header",
+      var rowgroupHeaderProps = mergeProps({
+        className: 'p-rowgroup-header',
         style: style,
-        role: "row"
-      }, _content2);
+        role: 'row'
+      }, getColumnPTOptions('rowgroupHeader'));
+      return /*#__PURE__*/React.createElement("tr", rowgroupHeaderProps, _content2);
     }
     return null;
   };
@@ -2518,7 +2693,9 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         tableProps: props.tableProps,
         tableSelector: props.tableSelector,
         value: props.value,
-        virtualScrollerOptions: props.virtualScrollerOptions
+        virtualScrollerOptions: props.virtualScrollerOptions,
+        ptCallbacks: props.ptCallbacks,
+        metaData: props.metaData
       });
     }
   };
@@ -2533,16 +2710,18 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 
       // check if the user wants complete control of the rendering
       if (!options.customRendering) {
-        _content3 = /*#__PURE__*/React.createElement("td", {
-          role: "cell",
-          colSpan: colSpan
-        }, _content3);
+        var bodyCellProps = mergeProps({
+          colSpan: colSpan,
+          role: 'cell'
+        }, getColumnPTOptions('bodyCell'), getColumnPTOptions('root'));
+        _content3 = /*#__PURE__*/React.createElement("td", bodyCellProps, _content3);
       }
-      return /*#__PURE__*/React.createElement("tr", {
+      var rowExpansionProps = mergeProps({
         id: id,
-        className: "p-datatable-row-expansion",
-        role: "row"
-      }, _content3);
+        className: 'p-datatable-row-expansion',
+        role: 'row'
+      }, getColumnPTOptions('rowExpansion'));
+      return /*#__PURE__*/React.createElement("tr", rowExpansionProps, _content3);
     }
     return null;
   };
@@ -2553,10 +2732,11 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         colSpan: colSpan,
         props: props.tableProps
       });
-      return /*#__PURE__*/React.createElement("tr", {
-        className: "p-rowgroup-footer",
-        role: "row"
-      }, _content4);
+      var rowgroupFooterProps = mergeProps({
+        className: 'p-rowgroup-footer',
+        role: 'row'
+      }, getColumnPTOptions('rowgroupFooter'));
+      return /*#__PURE__*/React.createElement("tr", rowgroupFooterProps, _content4);
     }
     return null;
   };
@@ -2576,15 +2756,17 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     });
   };
   var content = props.empty ? createEmptyContent() : createContent();
-  return /*#__PURE__*/React.createElement("tbody", {
+  var ptKey = props.className === 'p-datatable-virtualscroller-spacer' ? 'virtualScrollerSpacer' : 'tbody';
+  var tbodyProps = mergeProps({
     ref: refCallback,
     style: props.style,
     className: props.className
-  }, content);
+  }, getColumnPTOptions(ptKey));
+  return /*#__PURE__*/React.createElement("tbody", tbodyProps, content);
 }));
 TableBody.displayName = 'TableBody';
 
-var ColumnGroupBase = {
+var ColumnGroupBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'ColumnGroup',
     children: undefined
@@ -2595,34 +2777,40 @@ var ColumnGroupBase = {
   getCProps: function getCProps(group) {
     return ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps);
   }
-};
+});
 
-var RowBase = {
+var RowBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Row',
     style: null,
     className: null,
     children: undefined
   },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, RowBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, RowBase.defaultProps);
-  },
   getCProp: function getCProp(row, name) {
     return ObjectUtils.getComponentProp(row, name, RowBase.defaultProps);
   }
-};
+});
 
-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.memo(function (props) {
   var _React$useState = React.useState({}),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     styleObjectState = _React$useState2[0],
     setStyleObjectState = _React$useState2[1];
   var elementRef = React.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);
   };
@@ -2633,7 +2821,7 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
   };
   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;
@@ -2669,18 +2857,38 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
   var content = ObjectUtils.getJSXElement(getColumnProp('footer'), {
     props: props.tableProps
   });
-  return /*#__PURE__*/React.createElement("td", {
+  var footerCellProps = mergeProps({
     ref: elementRef,
     style: style,
     className: className,
-    role: "cell",
+    role: 'cell',
     colSpan: colSpan,
     rowSpan: rowSpan
-  }, content);
+  }, getColumnPTOptions('footerCell'), getColumnPTOptions('root'));
+  return /*#__PURE__*/React.createElement("td", footerCellProps, content);
 });
 FooterCell.displayName = 'FooterCell';
 
 var TableFooter = /*#__PURE__*/React.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');
@@ -2700,7 +2908,9 @@ var TableFooter = /*#__PURE__*/React.memo(function (props) {
       return isVisible && /*#__PURE__*/React.createElement(FooterCell, {
         key: key,
         tableProps: props.tableProps,
-        column: col
+        column: col,
+        ptCallbacks: props.ptCallbacks,
+        metaData: props.metaData
       });
     });
   };
@@ -2708,28 +2918,32 @@ var TableFooter = /*#__PURE__*/React.memo(function (props) {
     if (props.footerColumnGroup) {
       var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.footerColumnGroup, 'children'));
       return rows.map(function (row, i) {
-        return /*#__PURE__*/React.createElement("tr", {
-          key: i,
-          role: "row"
-        }, createGroupFooterCells(row));
+        var rootProps = mergeProps({
+          role: 'row'
+        }, getRowPTOptions(row, 'root'));
+        return /*#__PURE__*/React.createElement("tr", _extends({}, rootProps, {
+          key: i
+        }), createGroupFooterCells(row));
       });
     }
-    return /*#__PURE__*/React.createElement("tr", {
-      role: "row"
-    }, createFooterCells(props.columns));
+    var footerRowProps = mergeProps({
+      role: 'row'
+    }, props.ptCallbacks.ptm('footerRow'));
+    return /*#__PURE__*/React.createElement("tr", footerRowProps, createFooterCells(props.columns));
   };
   if (hasFooter()) {
     var content = createContent();
-    return /*#__PURE__*/React.createElement("tfoot", {
-      className: "p-datatable-tfoot"
-    }, content);
+    var tfootProps = mergeProps({
+      className: 'p-datatable-tfoot'
+    }, props.ptCallbacks.ptm('tfoot'), getColumnGroupPTOptions());
+    return /*#__PURE__*/React.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.memo(function (props) {
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -2742,6 +2956,19 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var getColumnProp = function getColumnProp(name) {
     return ColumnBase.getCProp(props.column, name);
   };
+  var getColumnProps = function getColumnProps() {
+    return ColumnBase.getCProps(props.column);
+  };
+  var context = React.useContext(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];
@@ -2778,7 +3005,12 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     return getColumnProp('showFilterMenu') && (props.display === 'row' ? getColumnProp('dataType') !== 'boolean' : true);
   };
   var matchModes = function matchModes() {
-    return getColumnProp('filterMatchModeOptions') || PrimeReact.filterMatchModeOptions[findDataType()].map(function (key) {
+    return getColumnProp('filterMatchModeOptions') || context && context.filterMatchModeOptions[findDataType()].map(function (key) {
+      return {
+        label: localeOption(key),
+        value: key
+      };
+    }) || PrimeReact.filterMatchModeOptions[findDataType()].map(function (key) {
       return {
         label: localeOption(key),
         value: key
@@ -2821,15 +3053,17 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     var dataType = getColumnProp('dataType');
     var matchMode = getColumnProp('filterMatchMode');
     var hasMatchMode = function hasMatchMode(key) {
-      return PrimeReact.filterMatchModeOptions[key].some(function (mode) {
+      return context && context.filterMatchModeOptions[key].some(function (mode) {
+        return mode === matchMode;
+      }) || PrimeReact.filterMatchModeOptions[key].some(function (mode) {
         return mode === matchMode;
       });
     };
     if (matchMode === 'custom' && !hasMatchMode(dataType)) {
-      PrimeReact.filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM);
+      context && context.filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM) || PrimeReact.filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM);
       return dataType;
     } else if (matchMode) {
-      return Object.keys(PrimeReact.filterMatchModeOptions).find(function (key) {
+      return Object.keys(context && context.filterMatchModeOptions || PrimeReact.filterMatchModeOptions).find(function (key) {
         return hasMatchMode(key);
       }) || dataType;
     }
@@ -2838,7 +3072,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   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;
@@ -2894,7 +3128,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     }
   };
   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;
@@ -2915,7 +3149,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   };
   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,
@@ -2955,7 +3189,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   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({
@@ -2968,7 +3202,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   };
   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({
@@ -2983,7 +3217,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   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
@@ -3000,7 +3234,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   };
   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,
@@ -3033,8 +3267,8 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     selfClick.current = true;
   };
   var onOverlayEnter = function onOverlayEnter() {
-    ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
-    DomHandler.alignOverlay(overlayRef.current, iconRef.current, PrimeReact.appendTo, false);
+    ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex['overlay'] || PrimeReact.zIndex['overlay']);
+    DomHandler.alignOverlay(overlayRef.current, iconRef.current, context && context.appendTo || PrimeReact.appendTo, false);
     overlayEventListener.current = function (e) {
       if (!isOutsideClicked(e.target)) {
         selfClick.current = true;
@@ -3092,7 +3326,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   };
   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);
@@ -3106,7 +3340,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   };
   useUpdateEffect(function () {
     if (props.display === 'menu' && overlayVisibleState) {
-      DomHandler.alignOverlay(overlayRef.current, iconRef.current, PrimeReact.appendTo, false);
+      DomHandler.alignOverlay(overlayRef.current, iconRef.current, context && context.appendTo || PrimeReact.appendTo, false);
     }
   });
   useUnmountEffect(function () {
@@ -3145,9 +3379,10 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var createRowFilterElement = function createRowFilterElement() {
     if (props.display === 'row') {
       var content = createFilterElement(filterModel, 0);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-fluid p-column-filter-element"
-      }, content);
+      var filterInputProps = mergeProps({
+        className: 'p-fluid p-column-filter-element'
+      }, getColumnPTOptions('filterInput'));
+      return /*#__PURE__*/React.createElement("div", filterInputProps, content);
     }
     return null;
   };
@@ -3155,38 +3390,43 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     return props.display === 'menu' ? createFilterElement(fieldConstraint, index) : null;
   };
   var createMenuButton = function createMenuButton() {
-    var iconProps = {
-      'aria-hidden': true
-    };
-    var icon = props.filterIcon || /*#__PURE__*/React.createElement(FilterIcon, iconProps);
-    var columnFilterIcon = IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
-      props: props
-    });
     if (showMenuButton()) {
+      var filterIconProps = mergeProps({
+        'aria-hidden': true
+      }, getColumnPTOptions('filterIcon'));
+      var icon = props.filterIcon || /*#__PURE__*/React.createElement(FilterIcon, filterIconProps);
+      var columnFilterIcon = IconUtils.getJSXIcon(icon, _objectSpread$4({}, filterIconProps), {
+        props: props
+      });
       var _className = 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.createElement("button", {
+      var filterMenuButtonProps = 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.createElement(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.createElement("button", filterMenuButtonProps, columnFilterIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
   var createClearButton = function createClearButton() {
-    var iconProps = {
+    var filterClearIconProps = mergeProps({
       'aria-hidden': true
-    };
-    var icon = props.filterClearIcon || /*#__PURE__*/React.createElement(FilterSlashIcon, iconProps);
-    var filterClearIcon = IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
+    }, getColumnPTOptions('filterClearIcon'));
+    var icon = props.filterClearIcon || /*#__PURE__*/React.createElement(FilterSlashIcon, filterClearIconProps);
+    var filterClearIcon = IconUtils.getJSXIcon(icon, _objectSpread$4({}, filterClearIconProps), {
       props: props
     });
     if (getColumnProp('showClearButton') && props.display === 'row') {
@@ -3194,12 +3434,15 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         'p-hidden-space': !hasRowFilter()
       });
       var clearLabel = clearButtonLabel();
-      return /*#__PURE__*/React.createElement("button", {
+      var headerFilterClearButtonProps = mergeProps({
         className: _className2,
-        type: "button",
-        onClick: clearFilter,
-        "aria-label": clearLabel
-      }, filterClearIcon, /*#__PURE__*/React.createElement(Ripple, null));
+        type: 'button',
+        onClick: function onClick(e) {
+          return clearFilter();
+        },
+        'aria-label': clearLabel
+      }, getColumnPTOptions('headerFilterClearButton'));
+      return /*#__PURE__*/React.createElement("button", headerFilterClearButtonProps, filterClearIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
@@ -3207,18 +3450,30 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     if (isShowMatchModes()) {
       var _matchModes = matchModes();
       var _noFilterLabel = noFilterLabel();
-      return /*#__PURE__*/React.createElement("ul", {
-        className: "p-column-filter-row-items"
-      }, _matchModes.map(function (matchMode, i) {
+      var filterSeparatorProps = mergeProps({
+        className: 'p-column-filter-separator'
+      }, getColumnPTOptions('filterSeparator'));
+      var filterRowItemProps = 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 = mergeProps({
+        className: 'p-column-filter-row-items'
+      }, getColumnPTOptions('filterRowItems'));
+      return /*#__PURE__*/React.createElement("ul", filterRowItemsProps, _matchModes.map(function (matchMode, i) {
         var value = matchMode.value,
           label = matchMode.label;
         var className = classNames('p-column-filter-row-item', {
           'p-highlight': isRowMatchModeSelected(value)
         });
         var tabIndex = i === 0 ? 0 : null;
-        return /*#__PURE__*/React.createElement("li", {
+        var filterRowItemProps = mergeProps({
           className: className,
-          key: label,
           onClick: function onClick() {
             return onRowMatchModeChange(value);
           },
@@ -3226,16 +3481,11 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
             return onRowMatchModeKeyDown(e, matchMode);
           },
           tabIndex: tabIndex
-        }, label);
-      }), /*#__PURE__*/React.createElement("li", {
-        className: "p-column-filter-separator"
-      }), /*#__PURE__*/React.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.createElement("li", _extends({}, filterRowItemProps, {
+          key: label
+        }), label);
+      }), /*#__PURE__*/React.createElement("li", filterSeparatorProps), /*#__PURE__*/React.createElement("li", filterRowItemProps, _noFilterLabel));
     }
     return null;
   };
@@ -3243,13 +3493,15 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     if (isShowOperator()) {
       var options = operatorOptions();
       var value = operator();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-column-filter-operator"
-      }, /*#__PURE__*/React.createElement(Dropdown, {
+      var filterOperatorProps = mergeProps({
+        className: 'p-column-filter-operator'
+      }, getColumnPTOptions('filterOperator'));
+      return /*#__PURE__*/React.createElement("div", filterOperatorProps, /*#__PURE__*/React.createElement(Dropdown, {
         options: options,
         value: value,
         onChange: onOperatorChange,
-        className: "p-column-filter-operator-dropdown"
+        className: "p-column-filter-operator-dropdown",
+        pt: getColumnPTOptions('filterOperatorDropdown')
       }));
     }
     return null;
@@ -3263,7 +3515,8 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         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;
@@ -3278,36 +3531,43 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         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.createElement("div", {
-      className: "p-column-filter-constraints"
-    }, _fieldConstraints.map(function (fieldConstraint, i) {
+    var filterConstraintsProps = mergeProps({
+      className: 'p-column-filter-constraints'
+    }, getColumnPTOptions('filterConstraints'));
+    var filterConstraintProps = mergeProps({
+      className: 'p-column-filter-constraint'
+    }, getColumnPTOptions('filterConstraint'));
+    return /*#__PURE__*/React.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.createElement("div", {
-        key: i,
-        className: "p-column-filter-constraint"
-      }, matchModeDropdown, menuFilterElement, /*#__PURE__*/React.createElement("div", null, removeButton));
+      var filterRemoveProps = mergeProps(getColumnPTOptions('filterRemove'));
+      return /*#__PURE__*/React.createElement("div", _extends({}, filterConstraintProps, {
+        key: i
+      }), matchModeDropdown, menuFilterElement, /*#__PURE__*/React.createElement("div", filterRemoveProps, removeButton));
     }));
   };
   var createAddRule = function createAddRule() {
     if (isShowAddConstraint()) {
       var addRuleLabel = addRuleButtonLabel();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-column-filter-add-rule"
-      }, /*#__PURE__*/React.createElement(Button, {
+      var filterAddRuleProps = mergeProps({
+        className: 'p-column-filter-add-rule'
+      }, getColumnPTOptions('filterAddRule'));
+      return /*#__PURE__*/React.createElement("div", filterAddRuleProps, /*#__PURE__*/React.createElement(Button, {
         type: "button",
         label: addRuleLabel,
         icon: props.filterAddIcon || /*#__PURE__*/React.createElement(PlusIcon, null),
         className: "p-column-filter-add-button p-button-text p-button-sm",
-        onClick: addConstraint
+        onClick: addConstraint,
+        pt: getColumnPTOptions('filterAddRuleButton')
       }));
     }
     return null;
@@ -3320,7 +3580,8 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
           type: "button",
           className: "p-button-outlined p-button-sm",
           onClick: clearFilter,
-          label: clearLabel
+          label: clearLabel,
+          pt: getColumnPTOptions('filterClearButton')
         });
       }
       return ObjectUtils.getJSXElement(getColumnProp('filterClear'), {
@@ -3339,7 +3600,8 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
           type: "button",
           className: "p-button-sm",
           onClick: applyFilter,
-          label: applyLabel
+          label: applyLabel,
+          pt: getColumnPTOptions('filterApplyButton')
         });
       }
       return ObjectUtils.getJSXElement(getColumnProp('filterApply'), {
@@ -3353,9 +3615,10 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var createButtonBar = function createButtonBar() {
     var clearButton = createFilterClearButton();
     var applyButton = createFilterApplyButton();
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-column-filter-buttonbar"
-    }, clearButton, applyButton);
+    var filterButtonbarProps = mergeProps({
+      className: 'p-column-filter-buttonbar'
+    }, getColumnPTOptions('filterButtonBar'));
+    return /*#__PURE__*/React.createElement("div", filterButtonbarProps, clearButton, applyButton);
   };
   var createItems = function createItems() {
     var operator = createOperator();
@@ -3368,8 +3631,8 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     var style = getColumnProp('filterMenuStyle');
     var className = classNames('p-column-filter-overlay p-component p-fluid', getColumnProp('filterMenuClassName'), {
       'p-column-filter-overlay-menu': props.display === 'menu',
-      'p-input-filled': PrimeReact.inputStyle === 'filled',
-      'p-ripple-disabled': PrimeReact.ripple === false
+      'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
     });
     var filterHeader = ObjectUtils.getJSXElement(getColumnProp('filterHeader'), {
       field: field,
@@ -3382,6 +3645,20 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       filterApplyCallback: filterApplyCallback
     });
     var items = props.display === 'row' ? createRowItems() : createItems();
+    var filterOverlayProps = 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.createElement(Portal, null, /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: overlayRef,
       classNames: "p-connected-overlay",
@@ -3395,14 +3672,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       onEntered: onOverlayEntered,
       onExit: onOverlayExit,
       onExited: onOverlayExited
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: overlayRef,
-      style: style,
-      className: className,
-      onKeyDown: onContentKeyDown,
-      onClick: onContentClick,
-      onMouseDown: onContentMouseDown
-    }, filterHeader, items, filterFooter)));
+    }, /*#__PURE__*/React.createElement("div", filterOverlayProps, filterHeader, items, filterFooter)));
   };
   var className = classNames('p-column-filter p-fluid', {
     'p-column-filter-row': props.display === 'row',
@@ -3412,24 +3682,43 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var menuButton = createMenuButton();
   var clearButton = createClearButton();
   var overlay = createOverlay();
-  return /*#__PURE__*/React.createElement("div", {
+  var columnFilter = mergeProps({
     className: className
-  }, rowFilterElement, menuButton, clearButton, overlay);
+  }, getColumnPTOptions('columnFilter'));
+  return /*#__PURE__*/React.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.memo(function (props) {
   var _React$useState = React.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({
@@ -3438,10 +3727,10 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
       });
     }
   };
-  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();
     }
   };
@@ -3451,27 +3740,36 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
     'p-focus': focusedState
   });
   var iconClassName = 'p-checkbox-icon';
-  var icon = props.checked ? props.checkIcon || /*#__PURE__*/React.createElement(CheckIcon, {
+  var headerCheckboxIconProps = mergeProps({
     className: iconClassName
-  }) : null;
-  var checkIcon = IconUtils.getJSXIcon(icon, {
-    className: iconClassName
-  }, {
+  }, getColumnPTOptions('headerCheckboxIcon'));
+  var icon = props.checked ? props.checkIcon || /*#__PURE__*/React.createElement(CheckIcon, headerCheckboxIconProps) : null;
+  var checkIcon = IconUtils.getJSXIcon(icon, _objectSpread$3({}, headerCheckboxIconProps), {
     props: props
   });
   var tabIndex = props.disabled ? null : 0;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "p-checkbox p-component",
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement("div", {
+  var headerCheckboxWrapperProps = mergeProps({
+    className: 'p-checkbox p-component',
+    onClick: function onClick(e) {
+      return _onClick(e);
+    }
+  }, getColumnPTOptions('headerCheckboxWrapper'));
+  var headerCheckboxProps = 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.createElement("div", headerCheckboxWrapperProps, /*#__PURE__*/React.createElement("div", headerCheckboxProps, checkIcon));
 });
 HeaderCheckbox.displayName = 'HeaderCheckbox';
 
@@ -3484,6 +3782,25 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     setStyleObjectState = _React$useState2[1];
   var elementRef = React.useRef(null);
   var prevColumn = 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;
   };
@@ -3552,9 +3869,9 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       }
       var filterRow = elementRef.current.parentElement.nextElementSibling;
       if (filterRow) {
-        var index = DomHandler.index(elementRef.current);
-        filterRow.children[index].style.left = styleObject['left'];
-        filterRow.children[index].style.right = styleObject['right'];
+        var _index = 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);
@@ -3565,7 +3882,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       props.onSortableChange();
     }
   };
-  var onClick = function onClick(event) {
+  var _onClick = function onClick(event) {
     if (!isSortableDisabled()) {
       var targetNode = event.target;
       if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') || DomHandler.hasClass(targetNode, 'p-column-header-content') || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
@@ -3578,37 +3895,37 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       }
     }
   };
-  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 && 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
@@ -3648,12 +3965,19 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
   });
   var createResizer = function createResizer() {
     if (props.resizableColumns && !getColumnProp('frozen')) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: "p-column-resizer",
-        onMouseDown: onResizerMouseDown,
-        onClick: onResizerClick,
-        onDoubleClick: onResizerDoubleClick
-      });
+      var columnResizerProps = 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.createElement("span", columnResizerProps);
     }
     return null;
   };
@@ -3661,24 +3985,27 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     var title = ObjectUtils.getJSXElement(getColumnProp('header'), {
       props: props.tableProps
     });
-    return /*#__PURE__*/React.createElement("span", {
-      className: "p-column-title"
-    }, title);
+    var headerTitleProps = mergeProps({
+      className: 'p-column-title'
+    }, getColumnPTOptions('headerTitle'));
+    return /*#__PURE__*/React.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.createElement(SortAmountDownIcon, null) : /*#__PURE__*/React.createElement(SortAmountUpAltIcon, null) : /*#__PURE__*/React.createElement(SortAltIcon, null);
-      var sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, undefined, {
+      var sortIconProps = mergeProps({
+        className: iconClassName
+      }, getColumnPTOptions('sortIcon'));
+      var sortProps = mergeProps(getColumnPTOptions('sort'));
+      var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React.createElement(SortAmountDownIcon, sortIconProps) : /*#__PURE__*/React.createElement(SortAmountUpAltIcon, sortIconProps) : /*#__PURE__*/React.createElement(SortAltIcon, sortIconProps);
+      var sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, _objectSpread$2({}, sortIconProps), {
         props: props,
         sorted: sorted,
         sortOrder: sortOrder
       });
-      return /*#__PURE__*/React.createElement("span", {
-        className: iconClassName
-      }, sortIcon);
+      return /*#__PURE__*/React.createElement("span", sortProps, sortIcon);
     }
     return null;
   };
@@ -3686,9 +4013,10 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     var metaIndex = _ref3.metaIndex;
     if (metaIndex !== -1 && isBadgeVisible()) {
       var value = props.groupRowsBy && props.groupRowsBy === props.groupRowSortField ? metaIndex : metaIndex + 1;
-      return /*#__PURE__*/React.createElement("span", {
-        className: "p-sortable-column-badge"
-      }, value);
+      var sortBadgeProps = mergeProps({
+        className: 'p-sortable-column-badge'
+      }, getColumnPTOptions('sortBadge'), getColumnPTOptions('root'));
+      return /*#__PURE__*/React.createElement("span", sortBadgeProps, value);
     }
     return null;
   };
@@ -3698,7 +4026,9 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       return /*#__PURE__*/React.createElement(HeaderCheckbox, {
         checked: allRowsSelected,
         onChange: props.onColumnCheckboxChange,
-        disabled: props.empty
+        disabled: props.empty,
+        ptCallbacks: ptCallbacks,
+        metaData: parentMetaData
       });
     }
     return null;
@@ -3713,7 +4043,9 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
         onFilterApply: props.onFilterApply,
         filtersStore: props.filtersStore,
         filterIcon: props.filterIcon,
-        filterClearIcon: props.filterClearIcon
+        filterClearIcon: props.filterClearIcon,
+        ptCallbacks: ptCallbacks,
+        metaData: parentMetaData
       });
     }
     return null;
@@ -3724,9 +4056,10 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     var badge = createBadge(sortMeta);
     var checkbox = createCheckbox();
     var filter = createFilter();
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-column-header-content"
-    }, title, sortIcon, badge, checkbox, filter);
+    var headerContentProps = mergeProps({
+      className: 'p-column-header-content'
+    }, getColumnPTOptions('headerContent'));
+    return /*#__PURE__*/React.createElement("div", headerContentProps, title, sortIcon, badge, checkbox, filter);
   };
   var createElement = function createElement() {
     var _isSortableDisabled = isSortableDisabled();
@@ -3752,26 +4085,43 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     var headerTooltipOptions = getColumnProp('headerTooltipOptions');
     var resizer = createResizer();
     var header = createHeader(sortMeta);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", {
+    var headerCellProps = 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.createElement(Tooltip, _extends({
+      'aria-sort': ariaSort
+    }, getColumnPTOptions('headerCell'), getColumnPTOptions('root'));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", headerCellProps, resizer, header), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
       target: elementRef,
       content: headerTooltip
-    }, headerTooltipOptions)));
+    }, headerTooltipOptions, {
+      pt: getColumnPTOptions('tooltip')
+    })));
   };
   var element = createElement();
   return element;
@@ -3795,6 +4145,43 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
   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;
   };
@@ -3835,6 +4222,7 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
         allRowsSelected: props.allRowsSelected,
         allSortableDisabled: isAllSortableDisabled,
         column: col,
+        index: i,
         empty: props.empty,
         filterClearIcon: props.filterClearIcon,
         filterDisplay: props.filterDisplay,
@@ -3868,7 +4256,9 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
         sortableDisabledFields: sortableDisabledFieldsState,
         tabIndex: props.tabIndex,
         tableProps: props.tableProps,
-        value: props.value
+        value: props.value,
+        ptCallbacks: props.ptCallbacks,
+        metaData: props.metaData
       });
     });
   };
@@ -3878,7 +4268,9 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
       return /*#__PURE__*/React.createElement(HeaderCheckbox, {
         checked: allRowsSelected,
         onChange: onCheckboxChange,
-        disabled: props.empty
+        disabled: props.empty,
+        ptCallbacks: props.ptCallbacks,
+        metaData: props.metaData
       });
     }
     return null;
@@ -3891,7 +4283,9 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
         filters: props.filters,
         filtersStore: props.filtersStore,
         onFilterChange: props.onFilterChange,
-        onFilterApply: props.onFilterApply
+        onFilterApply: props.onFilterApply,
+        ptCallbacks: props.ptCallbacks,
+        metaData: props.metaData
       });
     }
     return null;
@@ -3917,11 +4311,12 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
         var colKey = columnKey || field || i;
         var checkbox = createCheckbox(selectionMode);
         var filterRow = createFilter(col, filter);
-        return /*#__PURE__*/React.createElement("th", {
-          key: colKey,
+        var headerCellProps = mergeProps({
           style: colStyle,
-          className: colClassName
-        }, checkbox, filterRow);
+          className: colClassName,
+          key: colKey
+        }, getColumnPTOptions(col, 'headerCell'), getColumnPTOptions(col, 'root'));
+        return /*#__PURE__*/React.createElement("th", headerCellProps, checkbox, filterRow);
       }
       return null;
     });
@@ -3930,32 +4325,35 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
     if (props.headerColumnGroup) {
       var rows = React.Children.toArray(ColumnGroupBase.getCProp(props.headerColumnGroup, 'children'));
       return rows.map(function (row, i) {
-        return /*#__PURE__*/React.createElement("tr", {
-          key: i,
-          role: "row"
-        }, createGroupHeaderCells(row));
+        var headerRowProps = mergeProps({
+          role: 'row'
+        }, getRowPTOptions(row, 'root'));
+        return /*#__PURE__*/React.createElement("tr", _extends({}, headerRowProps, {
+          key: i
+        }), createGroupHeaderCells(row));
       });
     } else {
-      var headerRow = /*#__PURE__*/React.createElement("tr", {
-        role: "row"
-      }, createHeaderCells(props.columns));
-      var filterRow = props.filterDisplay === 'row' && /*#__PURE__*/React.createElement("tr", {
-        role: "row"
-      }, createFilterCells());
+      var headerRowProps = mergeProps({
+        role: 'row'
+      }, props.ptCallbacks.ptm('headerRow'));
+      var headerRow = /*#__PURE__*/React.createElement("tr", headerRowProps, createHeaderCells(props.columns));
+      var filterRow = props.filterDisplay === 'row' && /*#__PURE__*/React.createElement("tr", headerRowProps, createFilterCells());
       return /*#__PURE__*/React.createElement(React.Fragment, null, headerRow, filterRow);
     }
   };
   var content = createContent();
-  return /*#__PURE__*/React.createElement("thead", {
-    className: "p-datatable-thead"
-  }, content);
+  var theadProps = mergeProps({
+    className: 'p-datatable-thead'
+  }, props.ptCallbacks.ptm('thead'), getColumnGroupPTOptions());
+  return /*#__PURE__*/React.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.forwardRef(function (inProps, ref) {
-  var props = DataTableBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = DataTableBase.getProps(inProps, context);
   var _React$useState = React.useState(props.first),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     firstState = _React$useState2[0],
@@ -4000,6 +4398,23 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     _React$useState22 = _slicedToArray(_React$useState21, 2),
     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.useRef('');
   var elementRef = React.useRef(null);
   var tableRef = React.useRef(null);
@@ -4623,11 +5038,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
   };
   var createStyleElement = function createStyleElement() {
-    styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+    styleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce);
   };
   var createResponsiveStyle = function createResponsiveStyle() {
     if (!responsiveStyleElement.current) {
-      responsiveStyleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      responsiveStyleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce);
       var tableSelector = ".p-datatable-wrapper ".concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
       var selector = ".p-datatable[".concat(attributeSelector.current, "] > ").concat(tableSelector);
       var gridLinesSelector = ".p-datatable[".concat(attributeSelector.current, "].p-datatable-gridlines > ").concat(tableSelector);
@@ -4719,7 +5134,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return props.removableSort ? props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
   };
   var compareValuesOnSort = function compareValuesOnSort(value1, value2, order) {
-    return ObjectUtils.sort(value1, value2, order, PrimeReact.locale, PrimeReact.nullSortOrder);
+    return ObjectUtils.sort(value1, value2, order, context && context.locale || PrimeReact.locale, context && context.nullSortOrder || PrimeReact.nullSortOrder);
   };
   var addSortMeta = function addSortMeta(meta, multiSortMeta) {
     var index = multiSortMeta.findIndex(function (sortMeta) {
@@ -4805,7 +5220,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
 
     // check if they are equal handling dates and locales
-    if (ObjectUtils.compare(value1, value2, PrimeReact.locale) === 0) {
+    if (ObjectUtils.compare(value1, value2, context && context.locale || PrimeReact.locale) === 0) {
       return multiSortMeta.length - 1 > index ? multisortField(data1, data2, multiSortMeta, index + 1) : 0;
     }
     return compareValuesOnSort(value1, value2, multiSortMeta[index].order);
@@ -4929,7 +5344,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         var field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
         var filterFunction = getColumnProp(col, 'filterFunction');
         var dataType = getColumnProp(col, 'dataType');
-        var matchMode = getColumnProp(col, 'filterMatchMode') || (PrimeReact.filterMatchModeOptions[dataType] ? PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode.STARTS_WITH);
+        var matchMode = getColumnProp(col, 'filterMatchMode') || (context && context.filterMatchModeOptions[dataType] || PrimeReact.filterMatchModeOptions[dataType] ? context && context.filterMatchModeOptions[dataType][0] || PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode.STARTS_WITH);
         var constraint = {
           value: null,
           matchMode: matchMode
@@ -5194,18 +5609,19 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var createLoader = function createLoader() {
     if (props.loading) {
       var iconClassName = 'p-datatable-loading-icon';
-      var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, {
-        className: iconClassName,
-        spin: true
-      });
-      var loadingIcon = IconUtils.getJSXIcon(icon, {
+      var loadingIconProps = mergeProps({
         className: iconClassName
-      }, {
+      }, ptCallbacks.ptm('loadingIcon'));
+      var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
+        spin: true
+      }));
+      var loadingIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
         props: props
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-datatable-loading-overlay p-component-overlay"
-      }, loadingIcon);
+      var loadingOverlayProps = mergeProps({
+        className: 'p-datatable-loading-overlay p-component-overlay'
+      }, ptCallbacks.ptm('loadingOverlay'));
+      return /*#__PURE__*/React.createElement("div", loadingOverlayProps, loadingIcon);
     }
     return null;
   };
@@ -5214,9 +5630,10 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       var _content = ObjectUtils.getJSXElement(props.header, {
         props: props
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-datatable-header"
-      }, _content);
+      var headerProps = mergeProps({
+        className: 'p-datatable-header'
+      }, ptCallbacks.ptm('header'));
+      return /*#__PURE__*/React.createElement("div", headerProps, _content);
     }
     return null;
   };
@@ -5269,7 +5686,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       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) {
@@ -5354,7 +5773,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       tableProps: props,
       tableSelector: attributeSelector.current,
       value: props.frozenValue,
-      virtualScrollerOptions: options
+      virtualScrollerOptions: options,
+      ptCallbacks: ptCallbacks,
+      metaData: metaData
     });
     var body = /*#__PURE__*/React.createElement(TableBody, {
       ref: bodyRef,
@@ -5429,13 +5850,17 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       rowClassName: props.rowClassName,
       virtualScrollerContentRef: contentRef,
       virtualScrollerOptions: options,
-      isVirtualScrollerDisabled: isVirtualScrollerDisabled
+      isVirtualScrollerDisabled: isVirtualScrollerDisabled,
+      ptCallbacks: ptCallbacks,
+      metaData: metaData
     });
     var spacerBody = ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React.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.createElement(React.Fragment, null, frozenBody, body, spacerBody);
   };
@@ -5444,20 +5869,23 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return /*#__PURE__*/React.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.createElement("div", {
+    var wrapperProps = mergeProps({
       ref: wrapperRef,
-      className: "p-datatable-wrapper",
+      className: 'p-datatable-wrapper',
       style: {
         maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
       }
-    }, /*#__PURE__*/React.createElement(VirtualScroller, _extends({
+    }, ptCallbacks.ptm('wrapper'));
+    return /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement(VirtualScroller, _extends({
       ref: virtualScrollerRef
     }, virtualScrollerOptions, {
       items: processedData,
@@ -5470,6 +5898,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       loaderDisabled: true,
       inline: true,
       autoSize: true,
+      pt: ptCallbacks.ptm('virtualScroller'),
       showSpacer: false,
       contentTemplate: function contentTemplate(options) {
         var ref = function ref(el) {
@@ -5484,12 +5913,13 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         var tableHeader = createTableHeader(options, empty, _isVirtualScrollerDisabled);
         var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled);
         var tableFooter = createTableFooter(options);
-        return /*#__PURE__*/React.createElement("table", {
+        var tableProps = mergeProps({
           ref: ref,
-          style: props.tableStyle,
           className: tableClassName,
-          role: "table"
-        }, tableHeader, tableBody, tableFooter);
+          style: props.tableStyle,
+          role: 'table'
+        }, ptCallbacks.ptm('table'));
+        return /*#__PURE__*/React.createElement("table", tableProps, tableHeader, tableBody, tableFooter);
       }
     })));
   };
@@ -5498,9 +5928,10 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       var _content2 = ObjectUtils.getJSXElement(props.footer, {
         props: props
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-datatable-footer"
-      }, _content2);
+      var footerProps = mergeProps({
+        className: 'p-datatable-footer'
+      }, ptCallbacks.ptm('footer'));
+      return /*#__PURE__*/React.createElement("div", footerProps, _content2);
     }
     return null;
   };
@@ -5519,7 +5950,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       leftContent: props.paginatorLeft,
       rightContent: props.paginatorRight,
       alwaysShow: props.alwaysShowPaginator,
-      dropdownAppendTo: props.paginatorDropdownAppendTo
+      dropdownAppendTo: props.paginatorDropdownAppendTo,
+      pt: ptCallbacks.ptm('paginator')
     });
   };
   var createPaginatorTop = function createPaginatorTop(totalRecords) {
@@ -5536,13 +5968,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   };
   var createResizeHelper = function createResizeHelper() {
     if (props.resizableColumns) {
-      return /*#__PURE__*/React.createElement("div", {
+      var resizeHelperProps = mergeProps({
         ref: resizeHelperRef,
-        className: "p-column-resizer-helper",
+        className: 'p-column-resizer-helper',
         style: {
           display: 'none'
         }
-      });
+      }, ptCallbacks.ptm('resizeHelper'));
+      return /*#__PURE__*/React.createElement("div", resizeHelperProps);
     }
     return null;
   };
@@ -5552,18 +5985,20 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         position: 'absolute',
         display: 'none'
       };
-      var reorderIndicatorUpProps = {
+      var reorderIndicatorUpProps = mergeProps({
         className: 'p-datatable-reorder-indicator-up',
         style: _objectSpread({}, style)
-      };
-      var reorderIndicatorUpIcon = IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React.createElement(ArrowDownIcon, null), undefined, {
+      }, ptCallbacks.ptm('reorderIndicatorUp'));
+      var reorderIndicatorUpIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon'));
+      var reorderIndicatorUpIcon = IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React.createElement(ArrowDownIcon, reorderIndicatorUpIconProps), _objectSpread({}, reorderIndicatorUpIconProps), {
         props: props
       });
-      var reorderIndicatorDownProps = {
+      var reorderIndicatorDownProps = mergeProps({
         className: 'p-datatable-reorder-indicator-down',
         style: _objectSpread({}, style)
-      };
-      var reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React.createElement(ArrowUpIcon, null), undefined, {
+      }, ptCallbacks.ptm('reorderIndicatorDown'));
+      var reorderIndicatorDownIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
+      var reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React.createElement(ArrowUpIcon, reorderIndicatorDownIconProps), _objectSpread({}, reorderIndicatorDownIconProps), {
         props: props
       });
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", _extends({
@@ -5580,7 +6015,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var empty = ObjectUtils.isEmpty(data);
   var selectionModeInColumn = getSelectionModeInColumn(columns);
   var selectable = props.selectionMode || selectionModeInColumn;
-  var otherProps = DataTableBase.getOtherProps(props);
   var className = classNames('p-datatable p-component', {
     'p-datatable-hoverable-rows': props.rowHover,
     'p-datatable-selectable': selectable && !props.cellSelection,
@@ -5606,14 +6040,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var footer = createFooter();
   var resizeHelper = createResizeHelper();
   var reorderIndicators = createReorderIndicators();
-  return /*#__PURE__*/React.createElement("div", _extends({
+  var rootProps = 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.createElement("div", rootProps, loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
 });
 DataTable.displayName = 'DataTable';