primereact 10.9.6 → 10.9.8

package/datatable/datatable.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.datatable = (function (exports, React, PrimeReact$1, componentbase, utils, hooks, arrowdown, arrowup, spinner, paginator, virtualscroller, bars, check, chevrondown, chevronright, pencil, times, overlayservice, ripple, tooltip, button, csstransition, dropdown, filter, filterslash, plus, trash, inputtext, portal, sortalt, sortamountdown, sortamountupalt) {
+this.primereact.datatable = (function (exports, React, PrimeReact$1, componentbase, utils, hooks, arrowdown, arrowup, spinner, paginator, virtualscroller, bars, check, chevrondown, chevronright, pencil, times, ripple, tooltip, button, csstransition, dropdown, filter, filterslash, plus, trash, inputtext, overlayservice, portal, sortalt, sortamountdown, sortamountupalt) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -368,10 +368,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       });
     },
     filterSeparator: 'p-column-filter-separator',
-    filterRowItem: function filterRowItem(_ref10) {
-      var isRowMatchModeSelected = _ref10.isRowMatchModeSelected,
-        isShowMatchModes = _ref10.isShowMatchModes,
-        value = _ref10.value;
+    filterRowItem: function filterRowItem(_ref0) {
+      var isRowMatchModeSelected = _ref0.isRowMatchModeSelected,
+        isShowMatchModes = _ref0.isShowMatchModes,
+        value = _ref0.value;
       return isShowMatchModes() ? utils.classNames('p-column-filter-row-item', {
         'p-highlight': value && isRowMatchModeSelected(value)
       }) : undefined;
@@ -382,18 +382,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     filterConstraint: 'p-column-filter-constraint',
     filterAddRule: 'p-column-filter-add-rule',
     filterButtonBar: 'p-column-filter-buttonbar',
-    filterOverlay: function filterOverlay(_ref11) {
-      var props = _ref11.columnFilterProps,
-        context = _ref11.context,
-        getColumnProp = _ref11.getColumnProp;
+    filterOverlay: function filterOverlay(_ref1) {
+      var props = _ref1.columnFilterProps,
+        context = _ref1.context,
+        getColumnProp = _ref1.getColumnProp;
       return utils.classNames('p-column-filter-overlay p-component p-fluid', getColumnProp('filterMenuClassName'), {
         'p-column-filter-overlay-menu': props.display === 'menu',
         'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
         'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
       });
     },
-    columnFilter: function columnFilter(_ref12) {
-      var props = _ref12.columnFilterProps;
+    columnFilter: function columnFilter(_ref10) {
+      var props = _ref10.columnFilterProps;
       return utils.classNames('p-column-filter p-fluid', {
         'p-column-filter-row': props.display === 'row',
         'p-column-filter-menu': props.display === 'menu'
@@ -405,13 +405,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     sortIcon: 'p-sortable-column-icon',
     headerTitle: 'p-column-title',
     headerContent: 'p-column-header-content',
-    headerCell: function headerCell(_ref13) {
-      var props = _ref13.headerProps,
-        frozen = _ref13.frozen,
-        sortMeta = _ref13.sortMeta,
-        align = _ref13.align,
-        _isSortableDisabled = _ref13._isSortableDisabled,
-        getColumnProp = _ref13.getColumnProp;
+    headerCell: function headerCell(_ref11) {
+      var props = _ref11.headerProps,
+        frozen = _ref11.frozen,
+        sortMeta = _ref11.sortMeta,
+        align = _ref11.align,
+        _isSortableDisabled = _ref11._isSortableDisabled,
+        getColumnProp = _ref11.getColumnProp;
       return utils.ObjectUtils.isEmpty(props) ? utils.classNames('p-filter-column', {
         'p-frozen-column': frozen
       }) : utils.classNames(_defineProperty({
@@ -425,9 +425,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen
       }, "p-align-".concat(align), !!align));
     },
-    footerCell: function footerCell(_ref14) {
-      var getColumnProp = _ref14.getColumnProp,
-        align = _ref14.align;
+    footerCell: function footerCell(_ref12) {
+      var getColumnProp = _ref12.getColumnProp,
+        align = _ref12.align;
       return utils.classNames(_defineProperty({
         'p-frozen-column': getColumnProp('frozen')
       }, "p-align-".concat(align), !!align));
@@ -441,12 +441,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     resizeHelper: {
       display: 'none'
     },
-    reorderIndicatorUp: function reorderIndicatorUp(_ref15) {
-      var style = _ref15.style;
+    reorderIndicatorUp: function reorderIndicatorUp(_ref13) {
+      var style = _ref13.style;
       return _objectSpread$f({}, style);
     },
-    reorderIndicatorDown: function reorderIndicatorDown(_ref16) {
-      var style = _ref16.style;
+    reorderIndicatorDown: function reorderIndicatorDown(_ref14) {
+      var style = _ref14.style;
       return _objectSpread$f({}, style);
     }
   };
@@ -456,6 +456,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       alwaysShowPaginator: true,
       breakpoint: '960px',
       cellClassName: null,
+      cellMemo: true,
+      cellMemoProps: ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'rowIndex', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'],
+      cellMemoPropsDepth: 1,
       cellSelection: false,
       checkIcon: null,
       className: null,
@@ -888,7 +891,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var tabIndex = props.disabled ? null : '0';
     var checkboxProps = {
       role: 'checkbox',
-      'aria-checked': props.checked,
       tabIndex: tabIndex,
       onChange: onChange,
       'aria-label': props.ariaLabel,
@@ -1158,8 +1160,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       setStyleObjectState = _React$useState6[1];
     var elementRef = React__namespace.useRef(null);
     var keyHelperRef = React__namespace.useRef(null);
-    var overlayEventListener = React__namespace.useRef(null);
-    var selfClick = React__namespace.useRef(false);
     var focusTimeout = React__namespace.useRef(null);
     var initFocusTimeout = React__namespace.useRef(null);
     var editingRowDataStateRef = React__namespace.useRef(null);
@@ -1196,17 +1196,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var cellEditValidateOnClose = function cellEditValidateOnClose() {
       return getColumnProp('cellEditValidateOnClose');
     };
+    var isIgnoredElement = function isIgnoredElement(element) {
+      var isOverlay = function isOverlay(el) {
+        return el.getAttribute && el.getAttribute('data-pr-is-overlay');
+      };
+      return isOverlay(element) || utils.DomHandler.getParents(element).find(function (el) {
+        return isOverlay(el);
+      });
+    };
     var _useEventListener = hooks.useEventListener({
         type: 'click',
         listener: function listener(e) {
-          setTimeout(function () {
-            if (!selfClick.current && isOutsideClicked(e.target)) {
-              // #2666 for overlay components and outside is clicked
-
-              switchCellToViewMode(e, true);
-            }
-          }, 0);
-          selfClick.current = false;
+          if (!isIgnoredElement(e.target) && isOutsideClicked(e.target)) {
+            switchCellToViewMode(e, true);
+          }
         },
         options: true,
         when: isEditable()
@@ -1251,10 +1254,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       setTimeout(function () {
         setEditingState(false);
         unbindDocumentClickListener();
-        overlayservice.OverlayService.off('overlay-click', overlayEventListener.current);
-        overlayEventListener.current = null;
-        editingRowDataStateRef.current = null;
-        selfClick.current = false;
       }, 1);
     };
     var switchCellToViewMode = function switchCellToViewMode(event, submit) {
@@ -1298,7 +1297,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       editingRowDataStateRef.current = editingRowData;
     };
     var _onClick = function onClick(event) {
-      props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, selfClick, props.column, bindDocumentClickListener, overlayEventListener, isOutsideClicked);
+      props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, props.column, bindDocumentClickListener);
     };
     var _onMouseDown = function onMouseDown(event) {
       var params = getCellCallbackParams(event);
@@ -1370,7 +1369,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       }
     };
     var _onBlur = function onBlur(event) {
-      selfClick.current = false;
       if (props.editMode !== 'row' && editingState && getColumnProp('cellEditValidatorEvent') === 'blur') {
         switchCellToViewMode(event, true);
       }
@@ -1451,9 +1449,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [editingState]);
     hooks.useUnmountEffect(function () {
-      if (overlayEventListener.current) {
-        overlayservice.OverlayService.off('overlay-click', overlayEventListener.current);
-        overlayEventListener.current = null;
+      if (editingRowDataStateRef.current) {
+        editingRowDataStateRef.current = null;
       }
     });
     var createLoading = function createLoading() {
@@ -1757,6 +1754,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
   var RadioCheckCell = /*#__PURE__*/React__namespace.memo(function (props) {
     return /*#__PURE__*/React__namespace.createElement(Cell, props);
   }, function (prevProps, nextProps) {
+    if (nextProps.cellMemo === false) return false;
     var keysToCompare = ['isRowSelected', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData'];
     return utils.ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
   });
@@ -2240,8 +2238,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         } else {
           var left = 0;
           var prev = elementRef.current && elementRef.current.previousElementSibling;
-          if (prev && prev.classList.contains('p-frozen-column')) {
-            left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+          while (prev) {
+            if (prev.classList.contains('p-frozen-column')) {
+              left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+              elementRef.current.style.left = left + 'px';
+              break;
+            }
+            prev = prev.previousElementSibling;
           }
           styleObject.left = left + 'px';
         }
@@ -2249,9 +2252,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         !isSameStyle && setStyleObjectState(styleObject);
       }
     }, []);
-    var onCellClick = function onCellClick(event, params, isEditable, editingState, setEditingState, selfClick, column, bindDocumentClickListener, overlayEventListener, isOutsideClicked) {
+    var onCellClick = function onCellClick(event, params, isEditable, editingState, setEditingState, column, bindDocumentClickListener) {
       if (props.editMode !== 'row' && isEditable && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.isRowSelected)) {
-        selfClick.current = true;
         var onBeforeCellEditShow = getColumnProp(column, 'onBeforeCellEditShow');
         var onCellEditInit = getColumnProp(column, 'onCellEditInit');
         var cellEditValidatorEvent = getColumnProp(column, 'cellEditValidatorEvent');
@@ -2282,12 +2284,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           }
           if (cellEditValidatorEvent === 'click') {
             bindDocumentClickListener();
-            overlayEventListener.current = function (e) {
-              if (!isOutsideClicked(e.target)) {
-                selfClick.current = true;
-              }
-            };
-            overlayservice.OverlayService.on('overlay-click', overlayEventListener.current);
           }
         }, 1);
       }
@@ -3356,23 +3352,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       }
     });
     var createEmptyContent = function createEmptyContent() {
-      if (!props.loading) {
-        var colSpan = getColumnsLength();
-        var _content = utils.ObjectUtils.getJSXElement(props.emptyMessage, {
-          props: props.tableProps,
-          frozen: props.frozenRow
-        }) || PrimeReact$1.localeOption('emptyMessage');
-        var emptyMessageProps = mergeProps({
-          className: cx('emptyMessage'),
-          role: 'row'
-        }, ptm('emptyMessage'));
-        var bodyCellProps = mergeProps({
-          colSpan: colSpan,
-          role: 'cell'
-        }, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
-        return /*#__PURE__*/React__namespace.createElement("tr", emptyMessageProps, /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, _content));
-      }
-      return null;
+      var colSpan = getColumnsLength();
+      var content = utils.ObjectUtils.getJSXElement(props.emptyMessage, {
+        props: props.tableProps,
+        frozen: props.frozenRow
+      }) || PrimeReact$1.localeOption('emptyMessage');
+      var emptyMessageProps = mergeProps({
+        className: cx('emptyMessage'),
+        role: 'row'
+      }, ptm('emptyMessage'));
+      var bodyCellProps = mergeProps({
+        colSpan: colSpan,
+        role: 'cell'
+      }, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
+      return /*#__PURE__*/React__namespace.createElement("tr", emptyMessageProps, /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, content));
     };
     var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
       if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
@@ -3393,7 +3386,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           props: props.tableProps,
           customRendering: false
         };
-        var _content2 = utils.ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
+        var _content = utils.ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
 
         // check if the user wants complete control of the rendering
         if (!options.customRendering) {
@@ -3403,14 +3396,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           var rowGroupHeaderNameProps = mergeProps({
             className: cx('rowGroupHeaderName')
           }, ptm('rowGroupHeaderName'));
-          _content2 = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, toggler, /*#__PURE__*/React__namespace.createElement("span", rowGroupHeaderNameProps, _content2));
+          _content = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, toggler, /*#__PURE__*/React__namespace.createElement("span", rowGroupHeaderNameProps, _content));
         }
         var rowGroupHeaderProps = mergeProps({
           className: cx('rowGroupHeader'),
           style: style,
           role: 'row'
         }, ptm('rowGroupHeader'));
-        return /*#__PURE__*/React__namespace.createElement("tr", rowGroupHeaderProps, _content2);
+        return /*#__PURE__*/React__namespace.createElement("tr", rowGroupHeaderProps, _content);
       }
       return null;
     };
@@ -3507,7 +3500,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           index: rowIndex,
           customRendering: false
         };
-        var _content3 = utils.ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
+        var _content2 = utils.ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
 
         // check if the user wants complete control of the rendering
         if (!options.customRendering) {
@@ -3515,20 +3508,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             colSpan: colSpan,
             role: 'cell'
           }, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
-          _content3 = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, _content3);
+          _content2 = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, _content2);
         }
         var rowExpansionProps = mergeProps({
           id: id,
           className: cx('rowExpansion'),
           role: 'row'
         }, ptm('rowExpansion'));
-        return /*#__PURE__*/React__namespace.createElement("tr", rowExpansionProps, _content3);
+        return /*#__PURE__*/React__namespace.createElement("tr", rowExpansionProps, _content2);
       }
       return null;
     };
     var createGroupFooter = function createGroupFooter(rowData, rowIndex, expanded, colSpan) {
       if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, rowIndex - props.first, expanded)) {
-        var _content4 = utils.ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
+        var _content3 = utils.ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
           index: rowIndex,
           colSpan: colSpan,
           props: props.tableProps
@@ -3537,7 +3530,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           className: cx('rowGroupFooter'),
           role: 'row'
         }, ptm('rowGroupFooter'));
-        return /*#__PURE__*/React__namespace.createElement("tr", rowGroupFooterProps, _content4);
+        return /*#__PURE__*/React__namespace.createElement("tr", rowGroupFooterProps, _content3);
       }
       return null;
     };
@@ -3647,16 +3640,21 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         var _align = getColumnProp('alignFrozen');
         if (_align === 'right') {
           var right = 0;
-          var next = elementRef.current.nextElementSibling;
+          var next = elementRef.current && elementRef.current.nextElementSibling;
           if (next && next.classList.contains('p-frozen-column')) {
             right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
           styleObject.right = right + 'px';
         } else {
           var left = 0;
-          var prev = elementRef.current.previousElementSibling;
-          if (prev && prev.classList.contains('p-frozen-column')) {
-            left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+          var prev = elementRef.current && elementRef.current.previousElementSibling;
+          while (prev) {
+            if (prev && prev.classList.contains('p-frozen-column')) {
+              left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+              elementRef.current.style.left = left + 'px';
+              break;
+            }
+            prev = prev.previousElementSibling;
           }
           styleObject.left = left + 'px';
         }
@@ -4339,7 +4337,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         };
       } else {
         filters[field].value = null;
-        filters[field].matchMode = defaultConstraint.matchMode;
+        filters[field].matchMode = defaultConstraint ? defaultConstraint.matchMode : filters[field].matchMode;
       }
       filterClearCallback && filterClearCallback();
       props.onFilterChange(filters);
@@ -4406,6 +4404,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       }
     };
     var onRowMatchModeChange = function onRowMatchModeChange(matchMode) {
+      var _iconRef$current;
       var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
       var filters = _objectSpread$4({}, props.filters);
       filters[field].matchMode = matchMode;
@@ -4416,6 +4415,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       props.onFilterChange(filters);
       props.onFilterApply();
       hide();
+      (_iconRef$current = iconRef.current) === null || _iconRef$current === void 0 || _iconRef$current.focus();
     };
     var onRowMatchModeKeyDown = function onRowMatchModeKeyDown(event, matchMode, clear) {
       var item = event.target;
@@ -5058,7 +5058,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var tabIndex = props.disabled ? null : 0;
     var headerCheckboxProps = {
       role: 'checkbox',
-      'aria-checked': props.checked,
       'aria-label': props.checked ? ariaLabel('selectAll') : ariaLabel('unselectAll'),
       tabIndex: tabIndex,
       onChange: onChange,
@@ -5175,24 +5174,54 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         var align = getColumnProp('alignFrozen');
         if (align === 'right') {
           var right = 0;
-          var next = elementRef.current.nextElementSibling;
+          var next = elementRef.current && elementRef.current.nextElementSibling;
           if (next && next.classList.contains('p-frozen-column')) {
             right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
           styleObject.right = right + 'px';
         } else {
+          var _elementRef$current, _elementRef$current2;
           var left = 0;
-          var prev = elementRef.current.previousElementSibling;
-          if (prev && prev.classList.contains('p-frozen-column')) {
-            left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+          var prev = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.previousElementSibling;
+          var thead = (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.closest('thead');
+          var scrollContainer = thead === null || thead === void 0 ? void 0 : thead.parentElement.parentElement;
+          var scrollLeft = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollLeft) || 0;
+          var isMultiRow = thead && thead.querySelectorAll('tr').length > 1;
+          if (elementRef.current) {
+            if (!isMultiRow) {
+              while (prev) {
+                if (prev.classList.contains('p-frozen-column')) {
+                  left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                  break;
+                }
+                prev = prev.previousElementSibling;
+              }
+            } else {
+              var targetLeft = elementRef.current.offsetLeft - scrollLeft;
+              var frozenCells = Array.from(thead.querySelectorAll('th.p-frozen-column'));
+              var candidate = null;
+              for (var _i = 0, _frozenCells = frozenCells; _i < _frozenCells.length; _i++) {
+                var cell = _frozenCells[_i];
+                var cellLeft = cell.offsetLeft - scrollLeft;
+                var cellRight = cellLeft + utils.DomHandler.getOuterWidth(cell);
+                if (cellRight <= targetLeft && (!candidate || cellRight > candidate.offsetLeft + utils.DomHandler.getOuterWidth(candidate))) {
+                  candidate = cell;
+                }
+              }
+              if (candidate) {
+                left = candidate.offsetLeft + utils.DomHandler.getOuterWidth(candidate) - scrollLeft;
+              }
+            }
           }
           styleObject.left = left + 'px';
         }
         var filterRow = elementRef.current.parentElement.nextElementSibling;
         if (filterRow) {
           var _index = utils.DomHandler.index(elementRef.current);
-          filterRow.children[_index].style.left = styleObject.left;
-          filterRow.children[_index].style.right = styleObject.right;
+          if (filterRow.children[_index]) {
+            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);
@@ -5750,37 +5779,37 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       sortOrderState = _React$useState8[0],
       setSortOrderState = _React$useState8[1];
     var _React$useState9 = React__namespace.useState(props.multiSortMeta),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      multiSortMetaState = _React$useState10[0],
-      setMultiSortMetaState = _React$useState10[1];
-    var _React$useState11 = React__namespace.useState(props.filters),
+      _React$useState0 = _slicedToArray(_React$useState9, 2),
+      multiSortMetaState = _React$useState0[0],
+      setMultiSortMetaState = _React$useState0[1];
+    var _React$useState1 = React__namespace.useState(props.filters),
+      _React$useState10 = _slicedToArray(_React$useState1, 2),
+      filtersState = _React$useState10[0],
+      setFiltersState = _React$useState10[1];
+    var _React$useState11 = React__namespace.useState([]),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      filtersState = _React$useState12[0],
-      setFiltersState = _React$useState12[1];
-    var _React$useState13 = React__namespace.useState([]),
+      columnOrderState = _React$useState12[0],
+      setColumnOrderState = _React$useState12[1];
+    var _React$useState13 = React__namespace.useState(null),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      columnOrderState = _React$useState14[0],
-      setColumnOrderState = _React$useState14[1];
-    var _React$useState15 = React__namespace.useState(null),
+      groupRowsSortMetaState = _React$useState14[0],
+      setGroupRowsSortMetaState = _React$useState14[1];
+    var _React$useState15 = React__namespace.useState({}),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      groupRowsSortMetaState = _React$useState16[0],
-      setGroupRowsSortMetaState = _React$useState16[1];
+      editingMetaState = _React$useState16[0],
+      setEditingMetaState = _React$useState16[1];
     var _React$useState17 = React__namespace.useState({}),
       _React$useState18 = _slicedToArray(_React$useState17, 2),
-      editingMetaState = _React$useState18[0],
-      setEditingMetaState = _React$useState18[1];
-    var _React$useState19 = React__namespace.useState({}),
+      frozenEditingMetaState = _React$useState18[0],
+      setFrozenEditingMetaState = _React$useState18[1];
+    var _React$useState19 = React__namespace.useState(props.rows),
       _React$useState20 = _slicedToArray(_React$useState19, 2),
-      frozenEditingMetaState = _React$useState20[0],
-      setFrozenEditingMetaState = _React$useState20[1];
-    var _React$useState21 = React__namespace.useState(props.rows),
+      d_rowsState = _React$useState20[0],
+      setD_rowsState = _React$useState20[1];
+    var _React$useState21 = React__namespace.useState({}),
       _React$useState22 = _slicedToArray(_React$useState21, 2),
-      d_rowsState = _React$useState22[0],
-      setD_rowsState = _React$useState22[1];
-    var _React$useState23 = React__namespace.useState({}),
-      _React$useState24 = _slicedToArray(_React$useState23, 2),
-      d_filtersState = _React$useState24[0],
-      setD_filtersState = _React$useState24[1];
+      d_filtersState = _React$useState22[0],
+      setD_filtersState = _React$useState22[1];
     var metaData = {
       props: props,
       state: {
@@ -5833,6 +5862,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var columnSortFunction = React__namespace.useRef(null);
     var columnField = React__namespace.useRef(null);
     var filterTimeout = React__namespace.useRef(null);
+    var restoredRef = React__namespace.useRef(false);
     if (props.rows !== d_rowsState && !props.onPage) {
       setRowsState(props.rows);
       setD_rowsState(props.rows);
@@ -6035,17 +6065,32 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
               multiSortMeta: restoredState.multiSortMeta
             }));
           } else {
+            var lastMeta = restoredState.multiSortMeta[restoredState.multiSortMeta.length - 1];
+            var field = lastMeta && lastMeta.field ? lastMeta.field : null;
+            if (field) {
+              var sortColumn = findColumnByKey(getColumns(), field);
+              if (sortColumn) {
+                var sortFunction = getColumnProp(sortColumn, 'sortFunction');
+                var sortable = getColumnProp(sortColumn, 'sortable');
+                if (sortFunction && sortable) {
+                  columnSortFunction.current = sortFunction;
+                  columnSortable.current = sortable;
+                  columnField.current = field;
+                }
+              }
+            }
             setMultiSortMetaState(restoredState.multiSortMeta);
           }
         }
         if (restoredState.filters) {
-          setD_filtersState(cloneFilters(restoredState.filters));
+          var clonedFilters = cloneFilters(restoredState.filters);
+          setD_filtersState(clonedFilters);
           if (props.onFilter) {
             props.onFilter(createEvent({
-              filters: restoredState.filters
+              filters: clonedFilters
             }));
           } else {
-            setFiltersState(cloneFilters(restoredState.filters));
+            setFiltersState(clonedFilters);
           }
         }
         if (props.resizableColumns) {
@@ -7056,15 +7101,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         attributeSelector.current = utils.UniqueComponentId();
         elementRef.current.setAttribute(attributeSelector.current, '');
       }
-
-      //setFiltersState(cloneFilters(props.filters)); // Github #4248
       setD_filtersState(cloneFilters(props.filters));
-      if (isStateful()) {
-        restoreState();
-        if (props.resizableColumns) {
-          restoreColumnWidths();
-        }
-      }
     });
     hooks.useUpdateEffect(function () {
       if (props.responsiveLayout === 'stack' && !props.scrollable) {
@@ -7074,6 +7111,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         destroyResponsiveStyle();
       };
     }, [props.breakpoint]);
+    hooks.useUpdateEffect(function () {
+      if (!restoredRef.current && isStateful()) {
+        restoredRef.current = true;
+        restoreState();
+        if (props.resizableColumns) {
+          restoreColumnWidths();
+        }
+      }
+    }, [context]);
     hooks.useUpdateEffect(function () {
       var filters = cloneFilters(props.filters);
       setFiltersState(filters);
@@ -7150,6 +7196,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         },
         getVirtualScroller: function getVirtualScroller() {
           return virtualScrollerRef.current;
+        },
+        getProcessedData: function getProcessedData() {
+          return processedData();
         }
       };
     });
@@ -7630,4 +7679,4 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
 
   return exports;
 
-})({}, React, primereact.api, primereact.componentbase, primereact.utils, primereact.hooks, primereact.icons.arrowdown, primereact.icons.arrowup, primereact.icons.spinner, primereact.paginator, primereact.virtualscroller, primereact.icons.bars, primereact.icons.check, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.pencil, primereact.icons.times, primereact.overlayservice, primereact.ripple, primereact.tooltip, primereact.button, primereact.csstransition, primereact.dropdown, primereact.icons.filter, primereact.icons.filterslash, primereact.icons.plus, primereact.icons.trash, primereact.inputtext, primereact.portal, primereact.icons.sortalt, primereact.icons.sortamountdown, primereact.icons.sortamountupalt);
+})({}, React, primereact.api, primereact.componentbase, primereact.utils, primereact.hooks, primereact.icons.arrowdown, primereact.icons.arrowup, primereact.icons.spinner, primereact.paginator, primereact.virtualscroller, primereact.icons.bars, primereact.icons.check, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.pencil, primereact.icons.times, primereact.ripple, primereact.tooltip, primereact.button, primereact.csstransition, primereact.dropdown, primereact.icons.filter, primereact.icons.filterslash, primereact.icons.plus, primereact.icons.trash, primereact.inputtext, primereact.overlayservice, primereact.portal, primereact.icons.sortalt, primereact.icons.sortamountdown, primereact.icons.sortamountupalt);