primereact 10.9.6 → 10.9.8

package/datatable/datatable.cjs.js

@@ -19,7 +19,6 @@ var chevrondown = require('primereact/icons/chevrondown');
 var chevronright = require('primereact/icons/chevronright');
 var pencil = require('primereact/icons/pencil');
 var times = require('primereact/icons/times');
-var overlayservice = require('primereact/overlayservice');
 var ripple = require('primereact/ripple');
 var tooltip = require('primereact/tooltip');
 var button = require('primereact/button');
@@ -30,6 +29,7 @@ var filterslash = require('primereact/icons/filterslash');
 var plus = require('primereact/icons/plus');
 var trash = require('primereact/icons/trash');
 var inputtext = require('primereact/inputtext');
+var overlayservice = require('primereact/overlayservice');
 var portal = require('primereact/portal');
 var sortalt = require('primereact/icons/sortalt');
 var sortamountdown = require('primereact/icons/sortamountdown');
@@ -401,10 +401,10 @@ var classes$2 = {
     });
   },
   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;
@@ -415,18 +415,18 @@ var classes$2 = {
   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'
@@ -438,13 +438,13 @@ var classes$2 = {
   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({
@@ -458,9 +458,9 @@ var classes$2 = {
       '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));
@@ -474,12 +474,12 @@ var inlineStyles = {
   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);
   }
 };
@@ -489,6 +489,9 @@ var DataTableBase = componentbase.ComponentBase.extend({
     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,
@@ -921,7 +924,6 @@ var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
   var tabIndex = props.disabled ? null : '0';
   var checkboxProps = {
     role: 'checkbox',
-    'aria-checked': props.checked,
     tabIndex: tabIndex,
     onChange: onChange,
     'aria-label': props.ariaLabel,
@@ -1191,8 +1193,6 @@ var Cell = function Cell(props) {
     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);
@@ -1229,17 +1229,20 @@ var Cell = function Cell(props) {
   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()
@@ -1284,10 +1287,6 @@ var Cell = function Cell(props) {
     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) {
@@ -1331,7 +1330,7 @@ var Cell = function Cell(props) {
     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);
@@ -1403,7 +1402,6 @@ var Cell = function Cell(props) {
     }
   };
   var _onBlur = function onBlur(event) {
-    selfClick.current = false;
     if (props.editMode !== 'row' && editingState && getColumnProp('cellEditValidatorEvent') === 'blur') {
       switchCellToViewMode(event, true);
     }
@@ -1484,9 +1482,8 @@ var Cell = function Cell(props) {
     // 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() {
@@ -1790,6 +1787,7 @@ var Cell = function Cell(props) {
 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);
 });
@@ -2273,8 +2271,13 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
       } 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';
       }
@@ -2282,9 +2285,8 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
       !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');
@@ -2315,12 +2317,6 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
         }
         if (cellEditValidatorEvent === 'click') {
           bindDocumentClickListener();
-          overlayEventListener.current = function (e) {
-            if (!isOutsideClicked(e.target)) {
-              selfClick.current = true;
-            }
-          };
-          overlayservice.OverlayService.on('overlay-click', overlayEventListener.current);
         }
       }, 1);
     }
@@ -3389,23 +3385,20 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     }
   });
   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)) {
@@ -3426,7 +3419,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         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) {
@@ -3436,14 +3429,14 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         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;
   };
@@ -3540,7 +3533,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         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) {
@@ -3548,20 +3541,20 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
           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
@@ -3570,7 +3563,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         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;
   };
@@ -3680,16 +3673,21 @@ var FooterCell = /*#__PURE__*/React__namespace.memo(function (props) {
       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';
       }
@@ -4372,7 +4370,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
       };
     } else {
       filters[field].value = null;
-      filters[field].matchMode = defaultConstraint.matchMode;
+      filters[field].matchMode = defaultConstraint ? defaultConstraint.matchMode : filters[field].matchMode;
     }
     filterClearCallback && filterClearCallback();
     props.onFilterChange(filters);
@@ -4439,6 +4437,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   var onRowMatchModeChange = function onRowMatchModeChange(matchMode) {
+    var _iconRef$current;
     var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
     var filters = _objectSpread$4({}, props.filters);
     filters[field].matchMode = matchMode;
@@ -4449,6 +4448,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     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;
@@ -5091,7 +5091,6 @@ var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
   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,
@@ -5208,24 +5207,54 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
       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);
@@ -5783,37 +5812,37 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     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: {
@@ -5866,6 +5895,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   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);
@@ -6068,17 +6098,32 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
             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) {
@@ -7089,15 +7134,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       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) {
@@ -7107,6 +7144,15 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       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);
@@ -7183,6 +7229,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       },
       getVirtualScroller: function getVirtualScroller() {
         return virtualScrollerRef.current;
+      },
+      getProcessedData: function getProcessedData() {
+        return processedData();
       }
     };
   });