primereact 10.9.1 → 10.9.3

package/datatable/datatable.esm.js

@@ -265,8 +265,8 @@ var ColumnBase = ComponentBase.extend({
   }
 });
 
-function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var styles$1 = "\n@layer primereact {\n    .p-datatable {\n        position: relative;\n    }\n\n    .p-datatable > .p-datatable-wrapper {\n        overflow: auto;\n    }\n\n    .p-datatable-table {\n        border-spacing: 0px;\n        width: 100%;\n    }\n\n    .p-datatable .p-sortable-disabled {\n        cursor: auto;\n    }\n\n    .p-datatable .p-sortable-column {\n        cursor: pointer;\n        user-select: none;\n    }\n\n    .p-datatable .p-sortable-column .p-column-title,\n    .p-datatable .p-sortable-column .p-sortable-column-icon,\n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        vertical-align: middle;\n    }\n\n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .p-datatable-selectable .p-selectable-row,\n    .p-datatable-selectable-cell .p-selectable-cell {\n        cursor: pointer;\n    }\n\n    .p-datatable-drag-selection-helper {\n        position: absolute;\n        z-index: 99999999;\n    }\n\n    /* Scrollable */\n    .p-datatable-scrollable > .p-datatable-wrapper {\n        position: relative;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-thead {\n        position: sticky;\n        top: 0;\n        z-index: 2;\n    }\n\n    .p-datatable.p-datatable-gridlines .p-datatable-scrollable-table > .p-datatable-thead {\n        top: -1px;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n        position: sticky;\n        z-index: 1;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-tfoot {\n        position: sticky;\n        bottom: 0;\n        z-index: 1;\n    }\n\n    .p-datatable-scrollable .p-frozen-column {\n        position: sticky;\n        background: inherit;\n    }\n\n    .p-datatable-scrollable th.p-frozen-column {\n        z-index: 1;\n    }\n\n    .p-datatable-flex-scrollable {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n\n    .p-datatable-flex-scrollable > .p-datatable-wrapper {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        height: 100%;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {\n        position: sticky;\n        z-index: 1;\n    }\n\n    /* Resizable */\n    .p-datatable-resizable-table > .p-datatable-thead > tr > th,\n    .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n    .p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n        overflow: hidden;\n        white-space: nowrap;\n    }\n\n    .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {\n        background-clip: padding-box;\n        position: relative;\n    }\n\n    .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {\n        display: none;\n    }\n\n    .p-datatable .p-column-resizer {\n        display: block;\n        position: absolute;\n        top: 0;\n        right: 0;\n        margin: 0;\n        width: 0.5rem;\n        height: 100%;\n        padding: 0px;\n        cursor: col-resize;\n        border: 1px solid transparent;\n    }\n\n    .p-datatable .p-column-header-content {\n        display: flex;\n        align-items: center;\n    }\n\n    .p-datatable .p-column-resizer-helper {\n        width: 1px;\n        position: absolute;\n        z-index: 10;\n        display: none;\n    }\n\n    .p-datatable .p-row-editor-init,\n    .p-datatable .p-row-editor-save,\n    .p-datatable .p-row-editor-cancel {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Expand */\n    .p-datatable .p-row-toggler {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Reorder */\n    .p-datatable-reorder-indicator-up,\n    .p-datatable-reorder-indicator-down {\n        position: absolute;\n        display: none;\n    }\n\n    .p-reorderable-column,\n    .p-datatable-reorderablerow-handle {\n        cursor: move;\n    }\n\n    /* Loader */\n    .p-datatable .p-datatable-loading-overlay {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n    }\n\n    /* Filter */\n    .p-column-filter-row {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n\n    .p-column-filter-menu {\n        display: inline-flex;\n        margin-left: auto;\n    }\n\n    .p-column-filter-row .p-column-filter-element {\n        flex: 1 1 auto;\n        width: 1%;\n    }\n\n    .p-column-filter-menu-button,\n    .p-column-filter-clear-button {\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        text-decoration: none;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-column-filter-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n    }\n\n    .p-column-filter-row-items {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n\n    .p-column-filter-row-item {\n        cursor: pointer;\n    }\n\n    .p-column-filter-add-button,\n    .p-column-filter-remove-button {\n        justify-content: center;\n    }\n\n    .p-column-filter-add-button .p-button-label,\n    .p-column-filter-remove-button .p-button-label {\n        flex-grow: 0;\n    }\n\n    .p-column-filter-buttonbar {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n        width: auto;\n    }\n\n    /* Responsive */\n    .p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n        display: none;\n    }\n\n    /* VirtualScroller */\n    .p-datatable-virtualscroller-spacer {\n        display: flex;\n    }\n\n    .p-datatable .p-virtualscroller .p-virtualscroller-loading {\n        transform: none;\n        min-height: 0;\n        position: sticky;\n        top: 0;\n        left: 0;\n    }\n\n    /* Alignment */\n    .p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-left,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-left {\n        text-align: left;\n        justify-content: flex-start;\n    }\n\n    .p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-right,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-right {\n        text-align: right;\n        justify-content: flex-end;\n    }\n\n    .p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-center,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-center {\n        text-align: center;\n        justify-content: center;\n    }\n}\n";
 var classes$2 = {
   root: function root(_ref) {
@@ -461,11 +461,11 @@ var inlineStyles = {
   },
   reorderIndicatorUp: function reorderIndicatorUp(_ref15) {
     var style = _ref15.style;
-    return _objectSpread$e({}, style);
+    return _objectSpread$f({}, style);
   },
   reorderIndicatorDown: function reorderIndicatorDown(_ref16) {
     var style = _ref16.style;
-    return _objectSpread$e({}, style);
+    return _objectSpread$f({}, style);
   }
 };
 var DataTableBase = ComponentBase.extend({
@@ -700,8 +700,8 @@ var CheckboxBase = ComponentBase.extend({
   }
 });
 
-function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Checkbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
@@ -818,7 +818,7 @@ var Checkbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
   }, otherProps, ptm('root'));
   var createInputElement = function createInputElement() {
     var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
-    var inputProps = mergeProps(_objectSpread$d({
+    var inputProps = mergeProps(_objectSpread$e({
       id: props.inputId,
       type: 'checkbox',
       className: cx('input'),
@@ -855,7 +855,7 @@ var Checkbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
       'data-p-disabled': props.disabled
     }, ptm('box'));
     var icon = checked ? props.icon || /*#__PURE__*/React.createElement(CheckIcon, iconProps) : null;
-    var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$d({}, iconProps), {
+    var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$e({}, iconProps), {
       props: props,
       checked: checked
     });
@@ -871,8 +871,8 @@ var Checkbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
 }));
 Checkbox.displayName = 'Checkbox';
 
-function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
   var mergeProps = useMergeProps();
   var getColumnProps = function getColumnProps() {
@@ -907,7 +907,7 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
     className: cx('checkIcon')
   }, getColumnPTOptions('rowCheckbox.icon'));
   var icon = props.checked ? props.checkIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconProps) : null;
-  var checkIcon = IconUtils.getJSXIcon(icon, _objectSpread$c({}, checkboxIconProps), {
+  var checkIcon = IconUtils.getJSXIcon(icon, _objectSpread$d({}, checkboxIconProps), {
     props: props
   });
   var tabIndex = props.disabled ? null : '0';
@@ -970,8 +970,8 @@ var RadioButtonBase = ComponentBase.extend({
   }
 });
 
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RadioButton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
@@ -1085,7 +1085,7 @@ var RadioButton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
   delete rootProps.icon;
   var createInputElement = function createInputElement() {
     var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
-    var inputProps = mergeProps(_objectSpread$b({
+    var inputProps = mergeProps(_objectSpread$c({
       id: props.inputId,
       type: 'radio',
       name: props.name,
@@ -1165,8 +1165,8 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
 });
 RowRadioButton.displayName = 'RowRadioButton';
 
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BodyCell = /*#__PURE__*/React.memo(function (props) {
   var mergeProps = useMergeProps();
   var _React$useState = React.useState(props.editing),
@@ -1279,7 +1279,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   };
   var getCellCallbackParams = function getCellCallbackParams(event) {
     var params = getCellParams();
-    return _objectSpread$a({
+    return _objectSpread$b({
       originalEvent: event
     }, params);
   };
@@ -1316,9 +1316,9 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   };
   var switchCellToViewMode = function switchCellToViewMode(event, submit) {
     var callbackParams = getCellCallbackParams(event);
-    var newRowData = _objectSpread$a({}, editingRowDataStateRef.current);
+    var newRowData = _objectSpread$b({}, editingRowDataStateRef.current);
     var newValue = resolveFieldData(newRowData);
-    var params = _objectSpread$a(_objectSpread$a({}, callbackParams), {}, {
+    var params = _objectSpread$b(_objectSpread$b({}, callbackParams), {}, {
       newRowData: newRowData,
       newValue: newValue
     });
@@ -1385,7 +1385,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   };
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
-      var styleObject = _objectSpread$a({}, styleObjectState);
+      var styleObject = _objectSpread$b({}, styleObjectState);
       var align = getColumnProp('alignFrozen');
       if (align === 'right') {
         var right = 0;
@@ -1407,7 +1407,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var editorCallback = function editorCallback(val) {
-    var editingRowData = _objectSpread$a({}, editingRowDataState);
+    var editingRowData = _objectSpread$b({}, editingRowDataState);
     ObjectUtils.mutateFieldData(editingRowData, field, val);
     setEditingRowDataState(editingRowData);
 
@@ -1598,6 +1598,8 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     if (getColumnProp('frozen')) {
       updateStickyPosition();
     }
+  });
+  React.useEffect(function () {
     if (props.editMode === 'cell' || props.editMode === 'row') {
       focusOnElement();
     }
@@ -1618,7 +1620,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   React.useEffect(function () {
     if (props.editMode === 'cell' || props.editMode === 'row') {
       var callbackParams = getCellCallbackParams();
-      var params = _objectSpread$a(_objectSpread$a({}, callbackParams), {}, {
+      var params = _objectSpread$b(_objectSpread$b({}, callbackParams), {}, {
         editing: editingState,
         editingKey: editingKey
       });
@@ -1732,7 +1734,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         className: cx('rowReorderIcon')
       }, customIcon ? null : getColumnPTOptions('rowReorderIcon'));
       var rowReorderIcon = customIcon || /*#__PURE__*/React.createElement(BarsIcon, rowReorderIconProps);
-      content = showReorder ? IconUtils.getJSXIcon(rowReorderIcon, _objectSpread$a({}, rowReorderIconProps), {
+      content = showReorder ? IconUtils.getJSXIcon(rowReorderIcon, _objectSpread$b({}, rowReorderIconProps), {
         props: props
       }) : null;
     } else if (expander) {
@@ -1741,7 +1743,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         'aria-hidden': true
       }, getColumnPTOptions('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$a({}, rowTogglerIconProps), {
+      var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$b({}, rowTogglerIconProps), {
         props: props
       });
       var ariaControls = "".concat(props.tableSelector, "_content_").concat(props.rowIndex, "_expanded");
@@ -1752,7 +1754,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         onClick: onRowToggle,
         className: cx('rowToggler')
       };
-      var rowTogglerProps = mergeProps(_objectSpread$a(_objectSpread$a({}, expanderProps), {}, {
+      var rowTogglerProps = mergeProps(_objectSpread$b(_objectSpread$b({}, expanderProps), {}, {
         type: 'button',
         'aria-expanded': props.expanded,
         'aria-controls': ariaControls,
@@ -1782,13 +1784,13 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       var rowEditorInitIconProps = mergeProps({
         className: cx('rowEditorInitIcon')
       }, getColumnPTOptions('rowEditorInitIcon'));
-      var rowEditorSaveIcon = IconUtils.getJSXIcon(props.rowEditorSaveIcon || /*#__PURE__*/React.createElement(CheckIcon, rowEditorSaveIconProps), _objectSpread$a({}, rowEditorSaveIconProps), {
+      var rowEditorSaveIcon = IconUtils.getJSXIcon(props.rowEditorSaveIcon || /*#__PURE__*/React.createElement(CheckIcon, rowEditorSaveIconProps), _objectSpread$b({}, rowEditorSaveIconProps), {
         props: props
       });
-      var rowEditorCancelIcon = IconUtils.getJSXIcon(props.rowEditorCancelIcon || /*#__PURE__*/React.createElement(TimesIcon, rowEditorCancelIconProps), _objectSpread$a({}, rowEditorCancelIconProps), {
+      var rowEditorCancelIcon = IconUtils.getJSXIcon(props.rowEditorCancelIcon || /*#__PURE__*/React.createElement(TimesIcon, rowEditorCancelIconProps), _objectSpread$b({}, rowEditorCancelIconProps), {
         props: props
       });
-      var rowEditorInitIcon = IconUtils.getJSXIcon(props.rowEditorInitIcon || /*#__PURE__*/React.createElement(PencilIcon, rowEditorInitIconProps), _objectSpread$a({}, rowEditorInitIconProps), {
+      var rowEditorInitIcon = IconUtils.getJSXIcon(props.rowEditorInitIcon || /*#__PURE__*/React.createElement(PencilIcon, rowEditorInitIconProps), _objectSpread$b({}, rowEditorInitIconProps), {
         props: props
       });
       if (editingState) {
@@ -1930,8 +1932,8 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
 });
 BodyCell.displayName = 'BodyCell';
 
-function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BodyRow = /*#__PURE__*/React.memo(function (props) {
   var mergeProps = useMergeProps();
   var _React$useState = React.useState(false),
@@ -2237,7 +2239,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         newData = e.newData;
       if (dataKey) {
         var dataKeyValue = String(ObjectUtils.resolveFieldData(data, dataKey));
-        editingRows = props.editingRows ? _objectSpread$9({}, props.editingRows) : {};
+        editingRows = props.editingRows ? _objectSpread$a({}, props.editingRows) : {};
         if (!isEditing) {
           delete editingRows[dataKeyValue];
           // if the key value was changed, stop editing for the new key value too
@@ -2450,8 +2452,8 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
 });
 BodyRow.displayName = 'BodyRow';
 
-function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
   var mergeProps = useMergeProps();
   var _props$ptCallbacks = props.ptCallbacks,
@@ -2484,7 +2486,7 @@ var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
     'aria-hidden': true
   }, ptm('rowGroupTogglerIcon'), 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$8({}, rowGroupTogglerIconProps), {
+  var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$9({}, rowGroupTogglerIconProps), {
     props: props
   });
   var label = props.expanded ? ariaLabel$1('collapseLabel') : ariaLabel$1('expandLabel');
@@ -2501,9 +2503,9 @@ var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
 });
 RowTogglerButton.displayName = 'RowTogglerButton';
 
-var _excluded = ["originalEvent"];
-function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$2 = ["originalEvent"];
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
   var mergeProps = useMergeProps();
   var _props$ptCallbacks = props.ptCallbacks,
@@ -2844,8 +2846,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
   var selectRangeOnRow = function selectRangeOnRow(event, rowRangeStart, rowRangeEnd) {
     var selection = [];
     for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
-      var _props$value$i;
-      var rangeRowData = (_props$value$i = props.value[i]) !== null && _props$value$i !== void 0 ? _props$value$i : props.tableProps.value[i];
+      var rangeRowData = props.processedData[i];
       if (!isSelectable({
         data: rangeRowData,
         index: i
@@ -2909,7 +2910,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
   };
   var onSelect = function onSelect(event) {
     if (allowCellSelection()) {
-      props.onCellSelect && props.onCellSelect(_objectSpread$7(_objectSpread$7({
+      props.onCellSelect && props.onCellSelect(_objectSpread$8(_objectSpread$8({
         originalEvent: event.originalEvent
       }, event.data), {}, {
         type: event.type
@@ -2920,7 +2921,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
   };
   var onUnselect = function onUnselect(event) {
     if (allowCellSelection()) {
-      props.onCellUnselect && props.onCellUnselect(_objectSpread$7(_objectSpread$7({
+      props.onCellUnselect && props.onCellUnselect(_objectSpread$8(_objectSpread$8({
         originalEvent: event.originalEvent
       }, event.data), {}, {
         type: event.type
@@ -2982,12 +2983,12 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
         rangeRowIndex.current = event.index;
         anchorRowFirst.current = props.first;
         if (isSingleSelection()) {
-          onSingleSelection(_objectSpread$7(_objectSpread$7({}, event), {}, {
+          onSingleSelection(_objectSpread$8(_objectSpread$8({}, event), {}, {
             toggleable: toggleable,
             type: 'row'
           }));
         } else {
-          onMultipleSelection(_objectSpread$7(_objectSpread$7({}, event), {}, {
+          onMultipleSelection(_objectSpread$8(_objectSpread$8({}, event), {}, {
             toggleable: toggleable,
             type: 'row'
           }));
@@ -3063,7 +3064,8 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
     var event = e.originalEvent;
     var isDraggableHandle = isUnstyled() ? DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || event.target.closest('[data-pc-section="rowreordericon"]') : DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle') || event.target.closest('.p-datatable-reorderablerow-handle');
     event.currentTarget.draggable = isDraggableHandle;
-    event.target.draggable = isDraggableHandle;
+    //event.target.draggable = isDraggableHandle;
+
     if (allowRowDrag(e)) {
       enableDragSelection(event);
       anchorRowIndex.current = e.index;
@@ -3083,7 +3085,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$7({}, props.expandedRows) : {};
+      expandedRows = props.expandedRows ? _objectSpread$8({}, props.expandedRows) : {};
       if (expandedRows[dataKeyValue] != null) {
         delete expandedRows[dataKeyValue];
         if (props.onRowCollapse) {
@@ -3219,13 +3221,13 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
     event.preventDefault();
   };
   var onRadioChange = function onRadioChange(event) {
-    onSingleSelection(_objectSpread$7(_objectSpread$7({}, event), {}, {
+    onSingleSelection(_objectSpread$8(_objectSpread$8({}, event), {}, {
       toggleable: true,
       type: 'radio'
     }));
   };
   var onCheckboxChange = function onCheckboxChange(event) {
-    onMultipleSelection(_objectSpread$7(_objectSpread$7({}, event), {}, {
+    onMultipleSelection(_objectSpread$8(_objectSpread$8({}, event), {}, {
       toggleable: true,
       type: 'checkbox'
     }));
@@ -3265,7 +3267,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
       } else {
         var toggleable = allowMetaKeySelection(event);
         var originalEvent = event.originalEvent,
-          data = _objectWithoutProperties(event, _excluded);
+          data = _objectWithoutProperties(event, _excluded$2);
         anchorRowIndex.current = event.rowIndex;
         rangeRowIndex.current = event.rowIndex;
         anchorRowFirst.current = props.first;
@@ -3572,8 +3574,8 @@ var RowBase = ComponentBase.extend({
   }
 });
 
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FooterCell = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState({}),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -3617,7 +3619,7 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
   };
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
-      var styleObject = _objectSpread$6({}, styleObjectState);
+      var styleObject = _objectSpread$7({}, styleObjectState);
       var _align = getColumnProp('alignFrozen');
       if (_align === 'right') {
         var right = 0;
@@ -3666,6 +3668,9 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
 });
 FooterCell.displayName = 'FooterCell';
 
+var _excluded$1 = ["unstyled", "__TYPE", "ptOptions"];
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TableFooter = /*#__PURE__*/React.memo(function (props) {
   var _props$ptCallbacks = props.ptCallbacks,
     ptm = _props$ptCallbacks.ptm,
@@ -3731,9 +3736,16 @@ 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) {
+        var _RowBase$getProps = RowBase.getProps(row.props, context),
+          unstyled = _RowBase$getProps.unstyled;
+          _RowBase$getProps.__TYPE;
+          _RowBase$getProps.ptOptions;
+          var rest = _objectWithoutProperties(_RowBase$getProps, _excluded$1);
         var rootProps = mergeProps({
           role: 'row'
-        }, RowBase.getProps(row.props, context), getRowPTOptions(row, 'root'));
+        }, unstyled ? _objectSpread$6({
+          unstyled: unstyled
+        }, rest) : rest, getRowPTOptions(row, 'root'));
         return /*#__PURE__*/React.createElement("tr", _extends({}, rootProps, {
           key: i
         }), createGroupFooterCells(row));
@@ -3937,6 +3949,7 @@ var locales = {
       jumpToPageDropdownLabel: 'Jump to Page Dropdown',
       jumpToPageInputLabel: 'Jump to Page Input',
       lastPageLabel: 'Last Page',
+      listLabel: 'Option List',
       listView: 'List View',
       moveAllToSource: 'Move All to Source',
       moveAllToTarget: 'Move All to Target',
@@ -3955,7 +3968,7 @@ var locales = {
       passwordHide: 'Hide Password',
       passwordShow: 'Show Password',
       previous: 'Previous',
-      previousPageLabel: 'Previous Page',
+      prevPageLabel: 'Previous Page',
       rotateLeft: 'Rotate Left',
       rotateRight: 'Rotate Right',
       rowsPerPageLabel: 'Rows per page',
@@ -5417,6 +5430,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
 });
 HeaderCell.displayName = 'HeaderCell';
 
+var _excluded = ["unstyled", "__TYPE", "ptOptions"];
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TableHeader = /*#__PURE__*/React.memo(function (props) {
@@ -5643,9 +5657,16 @@ 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) {
+        var _RowBase$getProps = RowBase.getProps(row.props, context),
+          unstyled = _RowBase$getProps.unstyled;
+          _RowBase$getProps.__TYPE;
+          _RowBase$getProps.ptOptions;
+          var rest = _objectWithoutProperties(_RowBase$getProps, _excluded);
         var headerRowProps = mergeProps({
           role: 'row'
-        }, RowBase.getProps(row.props, context), getRowPTOptions(row, 'root'));
+        }, unstyled ? _objectSpread$1({
+          unstyled: unstyled
+        }, rest) : rest, getRowPTOptions(row, 'root'));
         return /*#__PURE__*/React.createElement("tr", _extends({}, headerRowProps, {
           key: i
         }), createGroupHeaderCells(row));
@@ -7149,7 +7170,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       unstyled: props.unstyled
     });
   };
-  var createTableBody = function createTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled) {
+  var createTableBody = function createTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled, processedData) {
     var first = getFirst();
     var rows = options.rows,
       columns = options.columns,
@@ -7210,7 +7231,10 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       onRowToggle: props.onRowToggle,
       onRowUnselect: props.onRowUnselect,
       onSelectionChange: props.onSelectionChange,
-      paginator: props.paginator,
+      paginator: props.paginator
+      // pass processedData #7546
+      ,
+      processedData: processedData,
       reorderableRows: props.reorderableRows,
       responsiveLayout: props.responsiveLayout,
       rowClassName: props.rowClassName,
@@ -7292,7 +7316,10 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       onRowToggle: props.onRowToggle,
       onRowUnselect: props.onRowUnselect,
       onSelectionChange: props.onSelectionChange,
-      paginator: props.paginator,
+      paginator: props.paginator
+      // pass processedData #7546
+      ,
+      processedData: processedData,
       reorderableRows: props.reorderableRows,
       responsiveLayout: props.responsiveLayout,
       rowClassName: props.rowClassName,
@@ -7386,7 +7413,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
           options.spacerRef && options.spacerRef(el);
         };
         var tableHeader = createTableHeader(options, empty, _isVirtualScrollerDisabled);
-        var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled);
+        var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled, processedData);
         var tableFooter = createTableFooter(options);
         var tableProps = mergeProps({
           className: classNames(props.tableClassName, ptCallbacks.cx('table')),