primereact 8.7.2 → 9.0.0-beta.1

package/datatable/datatable.esm.js

@@ -17,20 +17,45 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -41,17 +66,14 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) {
     arr2[i] = arr[i];
   }
-
   return arr2;
 }
 
@@ -85,33 +107,33 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
+        ;
+      }
+    } catch (err) {
+      _d = !0, _e = err;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
+    return _arr;
   }
-
-  return _arr;
 }
 
 function _nonIterableRest() {
@@ -127,13 +149,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
@@ -141,10 +161,8 @@ function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
   var target = _objectWithoutPropertiesLoose(source, excluded);
   var key, i;
-
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
     for (i = 0; i < sourceSymbolKeys.length; i++) {
       key = sourceSymbolKeys[i];
       if (excluded.indexOf(key) >= 0) continue;
@@ -152,38 +170,33 @@ function _objectWithoutProperties(source, excluded) {
       target[key] = source[key];
     }
   }
-
   return target;
 }
 
 var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focusedState = _React$useState2[0],
-      setFocusedState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedState = _React$useState2[0],
+    setFocusedState = _React$useState2[1];
   var onFocus = function onFocus() {
     setFocusedState(true);
   };
-
   var onBlur = function onBlur() {
     setFocusedState(false);
   };
-
   var onClick = function onClick(event) {
     if (!props.disabled) {
       setFocusedState(true);
       props.onChange(event);
     }
   };
-
   var onKeyDown = function onKeyDown(event) {
-    if (event.code === 'Space') {
+    if (event.code === 'Space' || event.key === ' ') {
+      // event.key is for Android support
       onClick(event);
       event.preventDefault();
     }
   };
-
   var className = classNames('p-checkbox p-component', {
     'p-checkbox-focused': focusedState
   });
@@ -216,38 +229,32 @@ RowCheckbox.displayName = 'RowCheckbox';
 
 var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focusedState = _React$useState2[0],
-      setFocusedState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedState = _React$useState2[0],
+    setFocusedState = _React$useState2[1];
   var inputRef = React.useRef(null);
-
   var onFocus = function onFocus() {
     setFocusedState(true);
   };
-
   var onBlur = function onBlur() {
     setFocusedState(false);
   };
-
   var onClick = function onClick(event) {
     if (!props.disabled) {
       props.onChange(event);
       DomHandler.focus(inputRef.current);
     }
   };
-
   var onKeyDown = function onKeyDown(event) {
-    if (event.code === 'Space') {
+    if (event.code === 'Space' || event.key === ' ') {
+      // event.key is for Android support
       onClick(event);
       event.preventDefault();
     }
   };
-
   var onChange = function onChange(event) {
     onClick(event);
   };
-
   var className = classNames('p-radiobutton p-component', {
     'p-radiobutton-focused': focusedState
   });
@@ -283,87 +290,70 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
 RowRadioButton.displayName = 'RowRadioButton';
 
 function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BodyCell = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(props.editing),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      editingState = _React$useState2[0],
-      setEditingState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    editingState = _React$useState2[0],
+    setEditingState = _React$useState2[1];
   var _React$useState3 = React.useState(props.rowData),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      editingRowDataState = _React$useState4[0],
-      setEditingRowDataState = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    editingRowDataState = _React$useState4[0],
+    setEditingRowDataState = _React$useState4[1];
   var _React$useState5 = React.useState({}),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      styleObjectState = _React$useState6[0],
-      setStyleObjectState = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    styleObjectState = _React$useState6[0],
+    setStyleObjectState = _React$useState6[1];
   var elementRef = React.useRef(null);
   var keyHelperRef = React.useRef(null);
   var overlayEventListener = React.useRef(null);
   var selfClick = React.useRef(false);
   var tabindexTimeout = React.useRef(null);
   var initFocusTimeout = React.useRef(null);
-
   var getColumnProp = function getColumnProp(prop) {
     return props.column ? props.column.props[prop] : null;
   };
-
   var field = getColumnProp('field') || "field_".concat(props.index);
-  var editingKey = props.dataKey ? props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
-
+  var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
   var _useEventListener = useEventListener({
-    type: 'click',
-    listener: function listener(e) {
-      if (!selfClick.current && isOutsideClicked(e.target)) {
-        switchCellToViewMode(e, true);
-      }
-
-      selfClick.current = false;
-    },
-    options: true
-  }),
-      _useEventListener2 = _slicedToArray(_useEventListener, 2),
-      bindDocumentClickListener = _useEventListener2[0],
-      unbindDocumentClickListener = _useEventListener2[1];
-
+      type: 'click',
+      listener: function listener(e) {
+        if (!selfClick.current && isOutsideClicked(e.target)) {
+          switchCellToViewMode(e, true);
+        }
+        selfClick.current = false;
+      },
+      options: true
+    }),
+    _useEventListener2 = _slicedToArray(_useEventListener, 2),
+    bindDocumentClickListener = _useEventListener2[0],
+    unbindDocumentClickListener = _useEventListener2[1];
   if (props.editMode === 'row' && props.editing !== editingState) {
     setEditingState(props.editing);
   }
-
   var isEditable = function isEditable() {
     return getColumnProp('editor');
   };
-
   var isSelected = function isSelected() {
     return props.selection ? props.selection instanceof Array ? findIndex(props.selection) > -1 : equals(props.selection) : false;
   };
-
   var equalsData = function equalsData(data) {
     return props.compareSelectionBy === 'equals' ? data === props.rowData : ObjectUtils.equals(data, props.rowData, props.dataKey);
   };
-
   var equals = function equals(selectedCell) {
-    return (selectedCell.rowIndex === props.rowIndex || equalsData(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === props.index);
+    return selectedCell && (selectedCell.rowIndex === props.rowIndex || equalsData(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === props.index);
   };
-
   var isOutsideClicked = function isOutsideClicked(target) {
     return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
   };
-
   var getVirtualScrollerOption = function getVirtualScrollerOption(option) {
     return props.virtualScrollerOptions ? props.virtualScrollerOptions[option] : null;
   };
-
   var getStyle = function getStyle() {
     var bodyStyle = getColumnProp('bodyStyle');
     var columnStyle = getColumnProp('style');
     return getColumnProp('frozen') ? Object.assign({}, columnStyle, bodyStyle, styleObjectState) : Object.assign({}, columnStyle, bodyStyle);
   };
-
   var getCellParams = function getCellParams() {
     return {
       value: resolveFieldData(),
@@ -376,42 +366,34 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       props: props
     };
   };
-
   var getCellCallbackParams = function getCellCallbackParams(event) {
     var params = getCellParams();
     return _objectSpread$7({
       originalEvent: event
     }, params);
   };
-
   var resolveFieldData = function resolveFieldData(data) {
     return ObjectUtils.resolveFieldData(data || props.rowData, field);
   };
-
   var getEditingRowData = function getEditingRowData() {
     return props.editingMeta && props.editingMeta[editingKey] ? props.editingMeta[editingKey].data : props.rowData;
   };
-
   var getTabIndex = function getTabIndex(cellSelected) {
     return props.allowCellSelection ? cellSelected ? 0 : props.rowIndex === 0 && props.index === 0 ? props.tabIndex : -1 : null;
   };
-
   var findIndex = function findIndex(collection) {
     return (collection || []).findIndex(function (data) {
       return equals(data);
     });
   };
-
   var closeCell = function closeCell(event) {
     var params = getCellCallbackParams(event);
     var onBeforeCellEditHide = getColumnProp('onBeforeCellEditHide');
-
     if (onBeforeCellEditHide) {
       onBeforeCellEditHide(params);
     }
-    /* When using the 'tab' key, the focus event of the next cell is not called in IE. */
-
 
+    /* When using the 'tab' key, the focus event of the next cell is not called in IE. */
     setTimeout(function () {
       setEditingState(false);
       unbindDocumentClickListener();
@@ -420,71 +402,57 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       selfClick.current = false;
     }, 1);
   };
-
   var switchCellToViewMode = function switchCellToViewMode(event, submit) {
     var callbackParams = getCellCallbackParams(event);
     var newRowData = editingRowDataState;
     var newValue = resolveFieldData(newRowData);
-
     var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, {
       newRowData: newRowData,
       newValue: newValue
     });
-
     var onCellEditCancel = getColumnProp('onCellEditCancel');
     var cellEditValidator = getColumnProp('cellEditValidator');
     var onCellEditComplete = getColumnProp('onCellEditComplete');
-
     if (!submit && onCellEditCancel) {
       onCellEditCancel(params);
     }
-
     var valid = true;
-
     if (cellEditValidator) {
       valid = cellEditValidator(params);
     }
-
     if (valid) {
       if (submit && onCellEditComplete) {
         onCellEditComplete(params);
       }
-
       closeCell(event);
     } else {
       event.preventDefault();
     }
   };
-
   var findNextSelectableCell = function findNextSelectableCell(cell) {
     var nextCell = cell.nextElementSibling;
     return nextCell ? DomHandler.hasClass(nextCell, 'p-selectable-cell') ? nextCell : findNextSelectableCell(nextCell) : null;
   };
-
   var findPrevSelectableCell = function findPrevSelectableCell(cell) {
     var prevCell = cell.previousElementSibling;
     return prevCell ? DomHandler.hasClass(prevCell, 'p-selectable-cell') ? prevCell : findPrevSelectableCell(prevCell) : null;
   };
-
   var findDownSelectableCell = function findDownSelectableCell(cell) {
     var downRow = cell.parentElement.nextElementSibling;
     var downCell = downRow ? downRow.children[props.index] : null;
     return downRow && downCell ? DomHandler.hasClass(downRow, 'p-selectable-row') && DomHandler.hasClass(downCell, 'p-selectable-cell') ? downCell : findDownSelectableCell(downCell) : null;
   };
-
   var findUpSelectableCell = function findUpSelectableCell(cell) {
     var upRow = cell.parentElement.previousElementSibling;
     var upCell = upRow ? upRow.children[props.index] : null;
     return upRow && upCell ? DomHandler.hasClass(upRow, 'p-selectable-row') && DomHandler.hasClass(upCell, 'p-selectable-cell') ? upCell : findUpSelectableCell(upCell) : null;
   };
-
   var changeTabIndex = function changeTabIndex(currentCell, nextCell) {
     if (currentCell && nextCell) {
       currentCell.tabIndex = -1;
       nextCell.tabIndex = props.tabIndex;
     }
   };
-
   var focusOnElement = function focusOnElement() {
     clearTimeout(tabindexTimeout.current);
     tabindexTimeout.current = setTimeout(function () {
@@ -492,11 +460,9 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         var focusableEl = props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not(.p-cell-editor-key-helper)') : DomHandler.findSingle(elementRef.current, '.p-row-editor-save');
         focusableEl && focusableEl.focus();
       }
-
       keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
     }, 1);
   };
-
   var focusOnInit = function focusOnInit() {
     clearTimeout(initFocusTimeout.current);
     initFocusTimeout.current = setTimeout(function () {
@@ -504,197 +470,163 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       focusableEl && focusableEl.focus();
     }, 1);
   };
-
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
       var styleObject = _objectSpread$7({}, styleObjectState);
-
       var align = getColumnProp('alignFrozen');
-
       if (align === 'right') {
         var right = 0;
-        var next = elementRef.current.nextElementSibling;
-
+        var next = elementRef.current && elementRef.current.nextElementSibling;
         if (next) {
           right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
         }
-
         styleObject['right'] = right + 'px';
       } else {
         var left = 0;
-        var prev = elementRef.current.previousElementSibling;
-
+        var prev = elementRef.current && elementRef.current.previousElementSibling;
         if (prev) {
           left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
         }
-
         styleObject['left'] = left + 'px';
       }
-
       var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
       !isSameStyle && setStyleObjectState(styleObject);
     }
   };
-
   var editorCallback = function editorCallback(val) {
     var editingRowData = _objectSpread$7({}, editingRowDataState);
-
     editingRowData[field] = val;
-    setEditingRowDataState(editingRowData); // update editing meta for complete methods on row mode
+    setEditingRowDataState(editingRowData);
 
-    props.editingMeta[editingKey].data[field] = val;
+    // update editing meta for complete methods on row mode
+    var currentData = getEditingRowData();
+    if (currentData) {
+      currentData[field] = val;
+    }
   };
-
   var onClick = function onClick(event) {
     var params = getCellCallbackParams(event);
-
     if (props.editMode !== 'row' && isEditable() && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.selected)) {
       selfClick.current = true;
       var onBeforeCellEditShow = getColumnProp('onBeforeCellEditShow');
       var onCellEditInit = getColumnProp('onCellEditInit');
       var cellEditValidatorEvent = getColumnProp('cellEditValidatorEvent');
-
       if (onBeforeCellEditShow) {
         onBeforeCellEditShow(params);
-      } // If the data is sorted using sort icon, it has been added to wait for the sort operation when any cell is wanted to be opened.
-
+      }
 
+      // If the data is sorted using sort icon, it has been added to wait for the sort operation when any cell is wanted to be opened.
       setTimeout(function () {
         setEditingState(true);
-
         if (onCellEditInit) {
           onCellEditInit(params);
         }
-
         if (cellEditValidatorEvent === 'click') {
           bindDocumentClickListener();
-
           overlayEventListener.current = function (e) {
             if (!isOutsideClicked(e.target)) {
               selfClick.current = true;
             }
           };
-
           OverlayService.on('overlay-click', overlayEventListener.current);
         }
       }, 1);
     }
-
     if (props.allowCellSelection && props.onClick) {
       props.onClick(params);
     }
   };
-
   var onMouseDown = function onMouseDown(event) {
     var params = getCellCallbackParams(event);
     props.onMouseDown && props.onMouseDown(params);
   };
-
   var onMouseUp = function onMouseUp(event) {
     var params = getCellCallbackParams(event);
     props.onMouseUp && props.onMouseUp(params);
   };
-
   var onKeyDown = function onKeyDown(event) {
     if (props.editMode !== 'row') {
       if (event.which === 13 || event.which === 9) {
         // tab || enter
         switchCellToViewMode(event, true);
       }
-
       if (event.which === 27) {
         // escape
         switchCellToViewMode(event, false);
       }
     }
-
     if (props.allowCellSelection) {
       var target = event.target,
-          cell = event.currentTarget;
-
+        cell = event.currentTarget;
       switch (event.which) {
         //left arrow
         case 37:
           var prevCell = findPrevSelectableCell(cell);
-
           if (prevCell) {
             changeTabIndex(cell, prevCell);
             prevCell.focus();
           }
-
           event.preventDefault();
           break;
-        //right arrow
 
+        //right arrow
         case 39:
           var nextCell = findNextSelectableCell(cell);
-
           if (nextCell) {
             changeTabIndex(cell, nextCell);
             nextCell.focus();
           }
-
           event.preventDefault();
           break;
-        //up arrow
 
+        //up arrow
         case 38:
           var upCell = findUpSelectableCell(cell);
-
           if (upCell) {
             changeTabIndex(cell, upCell);
             upCell.focus();
           }
-
           event.preventDefault();
           break;
-        //down arrow
 
+        //down arrow
         case 40:
           var downCell = findDownSelectableCell(cell);
-
           if (downCell) {
             changeTabIndex(cell, downCell);
             downCell.focus();
           }
-
           event.preventDefault();
           break;
-        //enter
 
+        //enter
         case 13:
           // @deprecated
           if (!DomHandler.isClickable(target)) {
             onClick(event);
             event.preventDefault();
           }
-
           break;
-        //space
 
+        //space
         case 32:
           if (!DomHandler.isClickable(target) && !target.readOnly) {
             onClick(event);
             event.preventDefault();
           }
-
           break;
       }
     }
   };
-
   var onBlur = function onBlur(event) {
     selfClick.current = false;
-
     if (props.editMode !== 'row' && editingState && getColumnProp('cellEditValidatorEvent') === 'blur') {
       switchCellToViewMode(event, true);
     }
   };
-
   var onEditorFocus = function onEditorFocus(event) {
     onClick(event);
   };
-
   var onRadioChange = function onRadioChange(event) {
     props.onRadioChange({
       originalEvent: event,
@@ -702,7 +634,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       index: props.rowIndex
     });
   };
-
   var onCheckboxChange = function onCheckboxChange(event) {
     props.onCheckboxChange({
       originalEvent: event,
@@ -710,7 +641,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       index: props.rowIndex
     });
   };
-
   var onRowToggle = function onRowToggle(event) {
     props.onRowToggle({
       originalEvent: event,
@@ -718,7 +648,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     });
     event.preventDefault();
   };
-
   var onRowEditInit = function onRowEditInit(event) {
     props.onRowEditInit({
       originalEvent: event,
@@ -728,7 +657,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       index: props.rowIndex
     });
   };
-
   var onRowEditSave = function onRowEditSave(event) {
     props.onRowEditSave({
       originalEvent: event,
@@ -739,7 +667,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     });
     focusOnInit();
   };
-
   var onRowEditCancel = function onRowEditCancel(event) {
     props.onRowEditCancel({
       originalEvent: event,
@@ -750,12 +677,10 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     });
     focusOnInit();
   };
-
   React.useEffect(function () {
     if (getColumnProp('frozen')) {
       updateStickyPosition();
     }
-
     if (props.editMode === 'cell' || props.editMode === 'row') {
       focusOnElement();
     }
@@ -765,17 +690,16 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       setEditingRowDataState(getEditingRowData());
     }
   }, [props.editingMeta]);
-  useUpdateEffect(function () {
+  React.useEffect(function () {
     if (props.editMode === 'cell' || props.editMode === 'row') {
       var callbackParams = getCellCallbackParams();
-
       var params = _objectSpread$7(_objectSpread$7({}, callbackParams), {}, {
         editing: editingState,
         editingKey: editingKey
       });
-
       props.onEditingMetaChange(params);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editingState]);
   useUnmountEffect(function () {
     if (overlayEventListener.current) {
@@ -783,7 +707,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       overlayEventListener.current = null;
     }
   });
-
   var createLoading = function createLoading() {
     var options = getVirtualScrollerOption('getLoaderOptions')(props.rowIndex, {
       cellIndex: props.index,
@@ -797,7 +720,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     var content = ObjectUtils.getJSXElement(getVirtualScrollerOption('loadingTemplate'), options);
     return /*#__PURE__*/React.createElement("td", null, content);
   };
-
   var createElement = function createElement() {
     var content, editorKeyHelper;
     var cellSelected = props.allowCellSelection && isSelected();
@@ -839,20 +761,17 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     }, ObjectUtils.getJSXElement(header, {
       props: props.tableProps
     }));
-
     if (selectionMode) {
       var showSelection = props.showSelectionElement ? props.showSelectionElement(props.rowData, {
         rowIndex: props.rowIndex,
         props: props.tableProps
       }) : true;
       var label;
-
       if (showSelection) {
         var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
         var ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
         label = "".concat(props.selected ? ariaLabel('unselectLabel') : ariaLabel('selectLabel'), " ").concat(ariaLabelText);
       }
-
       content = showSelection && /*#__PURE__*/React.createElement(React.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React.createElement(RowRadioButton, {
         checked: props.selected,
         onChange: onRadioChange,
@@ -876,13 +795,9 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     } else if (expander) {
       var iconClassName = classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
       var ariaControls = "".concat(props.tableSelector, "_content_").concat(props.rowIndex, "_expanded");
-
       var _ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
-
       var _ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, _ariaLabelField);
-
       var _label = "".concat(props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel'), " ").concat(_ariaLabelText);
-
       var expanderProps = {
         onClick: onRowToggle,
         className: 'p-row-toggler p-link',
@@ -900,7 +815,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         className: expanderProps.iconClassName,
         "aria-hidden": "true"
       }), /*#__PURE__*/React.createElement(Ripple, null));
-
       if (body) {
         expanderProps['element'] = content;
         content = ObjectUtils.getJSXElement(body, props.rowData, {
@@ -914,7 +828,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       }
     } else if (isRowEditor && rowEditor) {
       var rowEditorProps = {};
-
       if (editingState) {
         rowEditorProps = {
           editing: true,
@@ -959,7 +872,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           className: rowEditorProps.initIconClassName
         }), /*#__PURE__*/React.createElement(Ripple, null));
       }
-
       if (body) {
         rowEditorProps['element'] = content;
         content = ObjectUtils.getJSXElement(body, props.rowData, {
@@ -993,9 +905,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     } else {
       content = value;
     }
-
     content = typeof content == 'boolean' ? content.toString() : content;
-
     if (!isRowEditor && editor) {
       /* eslint-disable */
       editorKeyHelper = /*#__PURE__*/React.createElement("a", {
@@ -1021,108 +931,87 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       onMouseUp: onMouseUp
     }, editorKeyHelper, title, content);
   };
-
   return getVirtualScrollerOption('loading') ? createLoading() : createElement();
 });
 BodyCell.displayName = 'BodyCell';
 
 function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BodyRow = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      editingState = _React$useState2[0],
-      setEditingState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    editingState = _React$useState2[0],
+    setEditingState = _React$useState2[1];
   var editing = props.onRowEditChange ? props.editing : editingState;
-
   var isFocusable = function isFocusable() {
     return props.selectionMode && props.selectionModeInColumn !== 'single' && props.selectionModeInColumn !== 'multiple';
   };
-
   var isGrouped = function isGrouped(column) {
     if (props.groupRowsBy && getColumnProp(column, 'field')) {
       return Array.isArray(props.groupRowsBy) ? props.groupRowsBy.indexOf(column.props.field) > -1 : props.groupRowsBy === column.props.field;
     }
-
     return false;
   };
-
   var equals = function equals(data1, data2) {
     return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
   };
-
   var getColumnProp = function getColumnProp(col, prop) {
     return col ? col.props[prop] : null;
   };
-
   var getTabIndex = function getTabIndex() {
     return isFocusable() && !props.allowCellSelection ? props.index === 0 ? props.tabIndex : -1 : null;
   };
-
   var findIndex = function findIndex(collection, rowData) {
     return (collection || []).findIndex(function (data) {
       return equals(rowData, data);
     });
   };
-
   var changeTabIndex = function changeTabIndex(currentRow, nextRow) {
     if (currentRow && nextRow) {
       currentRow.tabIndex = -1;
       nextRow.tabIndex = props.tabIndex;
     }
   };
-
   var findNextSelectableRow = function findNextSelectableRow(row) {
     var nextRow = row.nextElementSibling;
     return nextRow ? DomHandler.hasClass(nextRow, 'p-selectable-row') ? nextRow : findNextSelectableRow(nextRow) : null;
   };
-
   var findPrevSelectableRow = function findPrevSelectableRow(row) {
     var prevRow = row.previousElementSibling;
     return prevRow ? DomHandler.hasClass(prevRow, 'p-selectable-row') ? prevRow : findPrevSelectableRow(prevRow) : null;
   };
-
   var shouldRenderBodyCell = function shouldRenderBodyCell(value, column, i) {
     if (getColumnProp(column, 'hidden')) {
       return false;
     } else if (props.rowGroupMode && props.rowGroupMode === 'rowspan' && isGrouped(column)) {
       var prevRowData = value[i - 1];
-
       if (prevRowData) {
         var currentRowFieldData = ObjectUtils.resolveFieldData(value[i], getColumnProp(column, 'field'));
         var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, getColumnProp(column, 'field'));
         return currentRowFieldData !== previousRowFieldData;
       }
     }
-
     return true;
   };
-
   var calculateRowGroupSize = function calculateRowGroupSize(value, column, index) {
     if (isGrouped(column)) {
       var currentRowFieldData = ObjectUtils.resolveFieldData(value[index], getColumnProp(column, 'field'));
       var nextRowFieldData = currentRowFieldData;
       var groupRowSpan = 0;
-
       while (currentRowFieldData === nextRowFieldData) {
         groupRowSpan++;
         var nextRowData = value[++index];
-
         if (nextRowData) {
           nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, getColumnProp(column, 'field'));
         } else {
           break;
         }
       }
-
       return groupRowSpan === 1 ? null : groupRowSpan;
     } else {
       return null;
     }
   };
-
   var onClick = function onClick(event) {
     props.onRowClick({
       originalEvent: event,
@@ -1130,7 +1019,6 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       index: props.index
     });
   };
-
   var onDoubleClick = function onDoubleClick(event) {
     props.onRowDoubleClick({
       originalEvent: event,
@@ -1138,7 +1026,6 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       index: props.index
     });
   };
-
   var onRightClick = function onRightClick(event) {
     props.onRowRightClick({
       originalEvent: event,
@@ -1146,63 +1033,67 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       index: props.index
     });
   };
-
+  var onMouseEnter = function onMouseEnter(event) {
+    props.onRowMouseEnter({
+      originalEvent: event,
+      data: props.rowData,
+      index: props.index
+    });
+  };
+  var onMouseLeave = function onMouseLeave(event) {
+    props.onRowMouseLeave({
+      originalEvent: event,
+      data: props.rowData,
+      index: props.index
+    });
+  };
   var onTouchEnd = function onTouchEnd(event) {
     props.onRowTouchEnd(event);
   };
-
   var onKeyDown = function onKeyDown(event) {
     if (isFocusable() && !props.allowCellSelection) {
       var target = event.target,
-          row = event.currentTarget;
-
+        row = event.currentTarget;
       switch (event.which) {
         //down arrow
         case 40:
           var nextRow = findNextSelectableRow(row);
-
           if (nextRow) {
             changeTabIndex(row, nextRow);
             nextRow.focus();
           }
-
           event.preventDefault();
           break;
-        //up arrow
 
+        //up arrow
         case 38:
           var prevRow = findPrevSelectableRow(row);
-
           if (prevRow) {
             changeTabIndex(row, prevRow);
             prevRow.focus();
           }
-
           event.preventDefault();
           break;
-        //enter
 
+        //enter
         case 13:
           // @deprecated
           if (!DomHandler.isClickable(target)) {
             onClick(event);
             event.preventDefault();
           }
-
           break;
-        //space
 
+        //space
         case 32:
           if (!DomHandler.isClickable(target) && !target.readOnly) {
             onClick(event);
             event.preventDefault();
           }
-
           break;
       }
     }
   };
-
   var onMouseDown = function onMouseDown(event) {
     props.onRowMouseDown({
       originalEvent: event,
@@ -1210,7 +1101,6 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       index: props.index
     });
   };
-
   var onMouseUp = function onMouseUp(event) {
     props.onRowMouseUp({
       originalEvent: event,
@@ -1218,7 +1108,6 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       index: props.index
     });
   };
-
   var onDragStart = function onDragStart(event) {
     props.onRowDragStart({
       originalEvent: event,
@@ -1226,7 +1115,6 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       index: props.index
     });
   };
-
   var onDragOver = function onDragOver(event) {
     props.onRowDragOver({
       originalEvent: event,
@@ -1234,7 +1122,6 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       index: props.index
     });
   };
-
   var onDragLeave = function onDragLeave(event) {
     props.onRowDragLeave({
       originalEvent: event,
@@ -1242,7 +1129,6 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       index: props.index
     });
   };
-
   var onDragEnd = function onDragEnd(event) {
     props.onRowDragEnd({
       originalEvent: event,
@@ -1250,7 +1136,6 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       index: props.index
     });
   };
-
   var onDrop = function onDrop(event) {
     props.onRowDrop({
       originalEvent: event,
@@ -1258,23 +1143,20 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       index: props.index
     });
   };
-
   var onEditChange = function onEditChange(e, isEditing) {
     if (props.onRowEditChange) {
       var editingRows;
       var dataKey = props.dataKey;
       var originalEvent = e.originalEvent,
-          data = e.data,
-          index = e.index,
-          newData = e.newData;
-
+        data = e.data,
+        index = e.index,
+        newData = e.newData;
       if (dataKey) {
         var dataKeyValue = String(ObjectUtils.resolveFieldData(data, dataKey));
         editingRows = props.editingRows ? _objectSpread$6({}, props.editingRows) : {};
-
         if (!isEditing) {
-          delete editingRows[dataKeyValue]; // if the key value was changed, stop editing for the new key value too
-
+          delete editingRows[dataKeyValue];
+          // if the key value was changed, stop editing for the new key value too
           var newDataKeyValue = String(ObjectUtils.resolveFieldData(newData, dataKey));
           delete editingRows[newDataKeyValue];
         } else {
@@ -1287,7 +1169,6 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
           return i !== editingRowIndex;
         });else editingRows.push(data);
       }
-
       props.onRowEditChange({
         originalEvent: originalEvent,
         data: editingRows,
@@ -1297,10 +1178,8 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       setEditingState(isEditing);
     }
   };
-
   var onEditInit = function onEditInit(e) {
     var event = e.originalEvent;
-
     if (props.onRowEditInit) {
       props.onRowEditInit({
         originalEvent: event,
@@ -1308,18 +1187,15 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         index: props.index
       });
     }
-
     onEditChange(e, true);
     event.preventDefault();
   };
-
   var onEditSave = function onEditSave(e) {
     var event = e.originalEvent,
-        newData = e.newData;
+      newData = e.newData;
     var valid = props.rowEditValidator ? props.rowEditValidator(newData, {
       props: props.tableProps
     }) : true;
-
     if (props.onRowEditSave) {
       props.onRowEditSave({
         originalEvent: event,
@@ -1328,21 +1204,16 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         valid: valid
       });
     }
-
     if (valid) {
       if (props.onRowEditComplete) {
         props.onRowEditComplete(e);
       }
-
       onEditChange(e, false);
     }
-
     event.preventDefault();
   };
-
   var onEditCancel = function onEditCancel(e) {
     var event = e.originalEvent;
-
     if (props.onRowEditCancel) {
       props.onRowEditCancel({
         originalEvent: event,
@@ -1350,11 +1221,9 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         index: props.index
       });
     }
-
     onEditChange(e, false);
     event.preventDefault();
   };
-
   var createContent = function createContent() {
     return props.columns.map(function (col, i) {
       if (shouldRenderBodyCell(props.value, col, props.index)) {
@@ -1403,16 +1272,14 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
           virtualScrollerOptions: props.virtualScrollerOptions
         });
       }
-
       return null;
     });
   };
-
   var rowClassName = ObjectUtils.getPropValue(props.rowClassName, props.rowData, {
     props: props.tableProps
   });
   var className = classNames(rowClassName, {
-    'p-highlight': !props.allowCellSelection && props.selected,
+    'p-highlight': !props.allowCellSelection && props.selected || props.contextMenuSelected,
     'p-highlight-contextmenu': props.contextMenuSelected,
     'p-selectable-row': props.allowRowSelection && props.isSelectable({
       data: props.rowData,
@@ -1432,6 +1299,8 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
     style: style,
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     onClick: onClick,
     onDoubleClick: onDoubleClick,
     onContextMenu: onRightClick,
@@ -1453,7 +1322,6 @@ var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
       data: props.rowData
     });
   };
-
   var iconClassName = classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
   var label = props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
   return /*#__PURE__*/React.createElement("button", {
@@ -1470,16 +1338,13 @@ var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
 RowTogglerButton.displayName = 'RowTogglerButton';
 
 var _excluded = ["originalEvent"];
-
 function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState({}),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      rowGroupHeaderStyleObjectState = _React$useState2[0],
-      setRowGroupHeaderStyleObjectState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    rowGroupHeaderStyleObjectState = _React$useState2[0],
+    setRowGroupHeaderStyleObjectState = _React$useState2[1];
   var elementRef = React.useRef(null);
   var refCallback = React.useCallback(function (el) {
     elementRef.current = el;
@@ -1501,53 +1366,41 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
   var isRadioSelectionModeInColumn = props.selectionModeInColumn === 'single';
   var isCheckboxSelectionModeInColumn = props.selectionModeInColumn === 'multiple';
-
   var equals = function equals(data1, data2) {
     if (allowCellSelection()) return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);else return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
   };
-
   var isSelectionEnabled = function isSelectionEnabled() {
     return props.selectionMode || props.selectionModeInColumn !== null || props.columns && props.columns.some(function (col) {
       return col && !!col.props.selectionMode;
     });
   };
-
   var isSingleSelection = function isSingleSelection() {
     return props.selectionMode === 'single' && !isCheckboxSelectionModeInColumn || !isRadioSelectionMode && isRadioSelectionModeInColumn;
   };
-
   var isMultipleSelection = function isMultipleSelection() {
     return props.selectionMode === 'multiple' && !isRadioSelectionModeInColumn || isCheckboxSelectionModeInColumn;
   };
-
   var isRadioOnlySelection = function isRadioOnlySelection() {
     return isRadioSelectionMode && isRadioSelectionModeInColumn;
   };
-
   var isCheckboxOnlySelection = function isCheckboxOnlySelection() {
     return isCheckboxSelectionMode && isCheckboxSelectionModeInColumn;
   };
-
   var isSelected = function isSelected(rowData) {
     if (rowData && props.selection) {
       return props.selection instanceof Array ? findIndex(props.selection, rowData) > -1 : equals(rowData, props.selection);
     }
-
     return false;
   };
-
   var isContextMenuSelected = function isContextMenuSelected(rowData) {
     if (rowData && props.contextMenuSelection) {
       return equals(rowData, props.contextMenuSelection);
     }
-
     return false;
   };
-
   var isSelectable = function isSelectable(options) {
     return props.isDataSelectable ? props.isDataSelectable(options) : true;
   };
-
   var isRowExpanded = function isRowExpanded(rowData) {
     if (rowData && props.expandedRows) {
       if (isSubheaderGrouping && props.expandableRowGroups) {
@@ -1556,10 +1409,8 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         if (props.dataKey) return props.expandedRows ? props.expandedRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;else return findIndex(props.expandedRows, rowData) !== -1;
       }
     }
-
     return false;
   };
-
   var isRowGroupExpanded = function isRowGroupExpanded(rowData) {
     if (props.dataKey === props.groupRowsBy) return Object.keys(props.expandedRows).some(function (data) {
       return ObjectUtils.equals(data, ObjectUtils.resolveFieldData(rowData, props.dataKey));
@@ -1567,80 +1418,62 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       return ObjectUtils.equals(data, rowData, props.groupRowsBy);
     });
   };
-
   var isRowEditing = function isRowEditing(rowData) {
     if (props.editMode === 'row' && rowData && props.editingRows) {
       if (props.dataKey) return props.editingRows ? props.editingRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;else return findIndex(props.editingRows, rowData) !== -1;
     }
-
     return false;
   };
-
   var allowDrag = function allowDrag(event) {
     return props.dragSelection && isMultipleSelection() && !event.originalEvent.shiftKey;
   };
-
   var allowRowDrag = function allowRowDrag(event) {
     return !allowCellSelection() && allowDrag(event) || props.reorderableRows;
   };
-
   var allowCellDrag = function allowCellDrag(event) {
     return allowCellSelection() && allowDrag(event);
   };
-
   var allowSelection = function allowSelection(event) {
     return !DomHandler.isClickable(event.originalEvent.target);
   };
-
   var allowMetaKeySelection = function allowMetaKeySelection(event) {
     return !rowTouched.current && (!props.metaKeySelection || props.metaKeySelection && (event.originalEvent.metaKey || event.originalEvent.ctrlKey));
   };
-
   var allowRangeSelection = function allowRangeSelection(event) {
     return isMultipleSelection() && event.originalEvent.shiftKey && anchorRowIndex.current !== null;
   };
-
   var allowRowSelection = function allowRowSelection() {
     return (props.selectionMode || props.selectionModeInColumn) && !isRadioOnlySelection() && !isCheckboxOnlySelection();
   };
-
   var allowCellSelection = function allowCellSelection() {
     return props.cellSelection && !isRadioSelectionModeInColumn && !isCheckboxSelectionModeInColumn;
   };
-
   var getColumnsLength = function getColumnsLength() {
     return props.columns ? props.columns.length : 0;
   };
-
   var getVirtualScrollerOption = function getVirtualScrollerOption(option, options) {
     options = options || props.virtualScrollerOptions;
     return options ? options[option] : null;
   };
-
   var findIndex = function findIndex(collection, rowData) {
     return (collection || []).findIndex(function (data) {
       return equals(rowData, data);
     });
   };
-
   var rowGroupHeaderStyle = function rowGroupHeaderStyle() {
     if (props.scrollable) {
       return {
         top: rowGroupHeaderStyleObjectState['top']
       };
     }
-
     return null;
   };
-
   var getRowKey = function getRowKey(rowData, index) {
-    return props.dataKey ? ObjectUtils.resolveFieldData(rowData, props.dataKey) + '_' + index : index;
+    return props.dataKey ? ObjectUtils.resolveFieldData(rowData, props.dataKey) : index;
   };
-
   var shouldRenderRowGroupHeader = function shouldRenderRowGroupHeader(value, rowData, i) {
     var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
     var prevRowData = value[i - 1];
-
     if (prevRowData) {
       var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, props.groupRowsBy);
       return currentRowFieldData !== previousRowFieldData;
@@ -1648,14 +1481,12 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       return true;
     }
   };
-
   var shouldRenderRowGroupFooter = function shouldRenderRowGroupFooter(value, rowData, i, expanded) {
     if (props.expandableRowGroups && !expanded) {
       return false;
     } else {
       var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
       var nextRowData = value[i + 1];
-
       if (nextRowData) {
         var nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, props.groupRowsBy);
         return currentRowFieldData !== nextRowFieldData;
@@ -1664,44 +1495,36 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       }
     }
   };
-
   var updateFrozenRowStickyPosition = function updateFrozenRowStickyPosition() {
     elementRef.current.style.top = DomHandler.getOuterHeight(elementRef.current.previousElementSibling) + 'px';
   };
-
   var updateFrozenRowGroupHeaderStickyPosition = function updateFrozenRowGroupHeaderStickyPosition() {
     var tableHeaderHeight = DomHandler.getOuterHeight(elementRef.current.previousElementSibling);
     var top = tableHeaderHeight + 'px';
-
     if (rowGroupHeaderStyleObjectState.top !== top) {
       setRowGroupHeaderStyleObjectState({
         top: top
       });
     }
   };
-
   var updateVirtualScrollerPosition = function updateVirtualScrollerPosition() {
     var tableHeaderHeight = DomHandler.getOuterHeight(elementRef.current.previousElementSibling);
     elementRef.current.style.top = (elementRef.current.style.top || 0) + tableHeaderHeight + 'px';
   };
-
   var onSingleSelection = function onSingleSelection(_ref) {
     var originalEvent = _ref.originalEvent,
-        data = _ref.data,
-        index = _ref.index,
-        toggleable = _ref.toggleable,
-        type = _ref.type;
-
+      data = _ref.data,
+      index = _ref.index,
+      toggleable = _ref.toggleable,
+      type = _ref.type;
     if (!isSelectable({
       data: data,
       index: index
     })) {
       return;
     }
-
     var selected = isSelected(data);
     var selection = props.selection;
-
     if (selected) {
       if (toggleable) {
         selection = null;
@@ -1719,9 +1542,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         type: type
       });
     }
-
     focusOnElement(originalEvent, true);
-
     if (props.onSelectionChange && selection !== props.selection) {
       props.onSelectionChange({
         originalEvent: originalEvent,
@@ -1730,24 +1551,20 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       });
     }
   };
-
   var onMultipleSelection = function onMultipleSelection(_ref2) {
     var originalEvent = _ref2.originalEvent,
-        data = _ref2.data,
-        index = _ref2.index,
-        toggleable = _ref2.toggleable,
-        type = _ref2.type;
-
+      data = _ref2.data,
+      index = _ref2.index,
+      toggleable = _ref2.toggleable,
+      type = _ref2.type;
     if (!isSelectable({
       data: data,
       index: index
     })) {
       return;
     }
-
     var selected = isSelected(data);
     var selection = props.selection || [];
-
     if (selected) {
       if (toggleable) {
         var selectionIndex = findIndex(selection, data);
@@ -1782,9 +1599,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         type: type
       });
     }
-
     focusOnElement(originalEvent, true);
-
     if (props.onSelectionChange && selection !== props.selection) {
       props.onSelectionChange({
         originalEvent: originalEvent,
@@ -1793,12 +1608,10 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       });
     }
   };
-
   var onRangeSelection = function onRangeSelection(event, type) {
     DomHandler.clearSelection();
     rangeRowIndex.current = allowCellSelection() ? event.rowIndex : event.index;
     var selection = selectRange(event);
-
     if (props.onSelectionChange && selection !== props.selection) {
       props.onSelectionChange({
         originalEvent: event.originalEvent,
@@ -1806,15 +1619,12 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         type: type
       });
     }
-
     anchorRowIndex.current = rangeRowIndex.current;
     anchorCellIndex.current = event.cellIndex;
     focusOnElement(event.originalEvent, false);
   };
-
   var selectRange = function selectRange(event) {
     var rangeStart, rangeEnd;
-
     if (rangeRowIndex.current > anchorRowIndex.current) {
       rangeStart = anchorRowIndex.current;
       rangeEnd = rangeRowIndex.current;
@@ -1824,29 +1634,23 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     } else {
       rangeStart = rangeEnd = rangeRowIndex.current;
     }
-
     if (props.paginator) {
       rangeStart = Math.max(rangeStart - props.first, 0);
       rangeEnd -= props.first;
     }
-
     return allowCellSelection() ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
   };
-
   var selectRangeOnRow = function selectRangeOnRow(event, rowRangeStart, rowRangeEnd) {
     var value = props.value;
     var selection = [];
-
     for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
       var rangeRowData = value[i];
-
       if (!isSelectable({
         data: rangeRowData,
         index: i
       })) {
         continue;
       }
-
       selection.push(rangeRowData);
       onSelect({
         originalEvent: event.originalEvent,
@@ -1854,15 +1658,12 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         type: 'row'
       });
     }
-
     return selection;
   };
-
   var selectRangeOnCell = function selectRangeOnCell(event, rowRangeStart, rowRangeEnd) {
     var cellRangeStart,
-        cellRangeEnd,
-        cellIndex = event.cellIndex;
-
+      cellRangeEnd,
+      cellIndex = event.cellIndex;
     if (cellIndex > anchorCellIndex.current) {
       cellRangeStart = anchorCellIndex.current;
       cellRangeEnd = cellIndex;
@@ -1872,20 +1673,15 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     } else {
       cellRangeStart = cellRangeEnd = cellIndex;
     }
-
     var value = props.value;
     var selection = [];
-
     for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
       var rowData = value[i];
       var columns = props.columns;
       var rowIndex = props.paginator ? i + props.first : i;
-
       for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
         var field = columns[j].props.field;
-
         var _value = ObjectUtils.resolveFieldData(rowData, field);
-
         var rangeRowData = {
           value: _value,
           field: field,
@@ -1894,14 +1690,12 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
           cellIndex: j,
           selected: true
         };
-
         if (!isSelectable({
           data: rangeRowData,
           index: i
         })) {
           continue;
         }
-
         selection.push(rangeRowData);
         onSelect({
           originalEvent: event.originalEvent,
@@ -1910,10 +1704,8 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         });
       }
     }
-
     return selection;
   };
-
   var onSelect = function onSelect(event) {
     if (allowCellSelection()) props.onCellSelect && props.onCellSelect(_objectSpread$5(_objectSpread$5({
       originalEvent: event.originalEvent
@@ -1921,7 +1713,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       type: event.type
     }));else props.onRowSelect && props.onRowSelect(event);
   };
-
   var onUnselect = function onUnselect(event) {
     if (allowCellSelection()) props.onCellUnselect && props.onCellUnselect(_objectSpread$5(_objectSpread$5({
       originalEvent: event.originalEvent
@@ -1929,7 +1720,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       type: event.type
     }));else props.onRowUnselect && props.onRowUnselect(event);
   };
-
   var enableDragSelection = function enableDragSelection(event) {
     if (props.dragSelection && !dragSelectionHelper.current) {
       dragSelectionHelper.current = document.createElement('div');
@@ -1943,10 +1733,8 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       bindDragSelectionEvents();
     }
   };
-
   var focusOnElement = function focusOnElement(event, isFocused) {
     var target = event.currentTarget;
-
     if (!allowCellSelection() && props.selectionAutoFocus) {
       if (isCheckboxSelectionModeInColumn) {
         var checkbox = DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
@@ -1956,32 +1744,25 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         radio && radio.focus();
       }
     }
-
     !isFocused && target && target.focus();
   };
-
   var changeTabIndex = function changeTabIndex(event, type) {
     var target = event.currentTarget;
     var isSelectable = DomHandler.hasClass(target, type === 'cell' ? 'p-selectable-cell' : 'p-selectable-row');
-
     if (isSelectable) {
       var selector = type === 'cell' ? 'tr > td' : 'tr';
       var tabbableEl = DomHandler.findSingle(elementRef.current, "".concat(selector, "[tabindex=\"").concat(props.tabIndex, "\"]"));
-
       if (tabbableEl && target) {
         tabbableEl.tabIndex = -1;
         target.tabIndex = props.tabIndex;
       }
     }
   };
-
   var onRowClick = function onRowClick(event) {
     if (allowCellSelection() || !allowSelection(event)) {
       return;
     }
-
     props.onRowClick && props.onRowClick(event);
-
     if (allowRowSelection()) {
       if (allowRangeSelection(event)) {
         onRangeSelection(event, 'row');
@@ -1990,7 +1771,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         anchorRowIndex.current = event.index;
         rangeRowIndex.current = event.index;
         anchorRowFirst.current = props.first;
-
         if (isSingleSelection()) {
           onSingleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, {
             toggleable: toggleable,
@@ -2003,57 +1783,51 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
           }));
         }
       }
-
       changeTabIndex(event.originalEvent, 'row');
     } else {
       focusOnElement(event.originalEvent);
     }
-
     rowTouched.current = false;
   };
-
   var onRowDoubleClick = function onRowDoubleClick(e) {
     var event = e.originalEvent;
-
     if (DomHandler.isClickable(event.target)) {
       return;
     }
-
     if (props.onRowDoubleClick) {
       props.onRowDoubleClick(e);
     }
   };
-
   var onRowRightClick = function onRowRightClick(event) {
     if (props.onContextMenu || props.onContextMenuSelectionChange) {
       DomHandler.clearSelection();
-
       if (props.onContextMenuSelectionChange) {
         props.onContextMenuSelectionChange({
           originalEvent: event.originalEvent,
           value: event.data
         });
       }
-
       if (props.onContextMenu) {
         props.onContextMenu({
           originalEvent: event.originalEvent,
           data: event.data
         });
       }
-
       event.originalEvent.preventDefault();
     }
   };
-
+  var onRowMouseEnter = function onRowMouseEnter(event) {
+    props.onRowMouseEnter && props.onRowMouseEnter(event);
+  };
+  var onRowMouseLeave = function onRowMouseLeave(event) {
+    props.onRowMouseLeave && props.onRowMouseLeave(event);
+  };
   var onRowTouchEnd = function onRowTouchEnd() {
     rowTouched.current = true;
   };
-
   var onRowMouseDown = function onRowMouseDown(e) {
     var event = e.originalEvent;
     if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;else event.currentTarget.draggable = false;
-
     if (allowRowDrag(e)) {
       enableDragSelection(event);
       anchorRowIndex.current = e.index;
@@ -2061,27 +1835,21 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       anchorRowFirst.current = props.first;
     }
   };
-
   var onRowMouseUp = function onRowMouseUp(event) {
     var isSameRow = event.index === anchorRowIndex.current;
-
     if (allowRowDrag(event) && !isSameRow) {
       onRangeSelection(event, 'row');
     }
   };
-
   var onRowToggle = function onRowToggle(event) {
     var expandedRows;
     var dataKey = props.dataKey;
     var hasDataKey = props.groupRowsBy ? dataKey === props.groupRowsBy : !!dataKey;
-
     if (hasDataKey) {
       var dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, dataKey));
       expandedRows = props.expandedRows ? _objectSpread$5({}, props.expandedRows) : {};
-
       if (expandedRows[dataKeyValue] != null) {
         delete expandedRows[dataKeyValue];
-
         if (props.onRowCollapse) {
           props.onRowCollapse({
             originalEvent: event,
@@ -2090,7 +1858,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         }
       } else {
         expandedRows[dataKeyValue] = true;
-
         if (props.onRowExpand) {
           props.onRowExpand({
             originalEvent: event,
@@ -2101,12 +1868,10 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     } else {
       var expandedRowIndex = findIndex(props.expandedRows, event.data);
       expandedRows = props.expandedRows ? _toConsumableArray(props.expandedRows) : [];
-
       if (expandedRowIndex !== -1) {
         expandedRows = expandedRows.filter(function (_, i) {
           return i !== expandedRowIndex;
         });
-
         if (props.onRowCollapse) {
           props.onRowCollapse({
             originalEvent: event,
@@ -2115,7 +1880,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         }
       } else {
         expandedRows.push(event.data);
-
         if (props.onRowExpand) {
           props.onRowExpand({
             originalEvent: event,
@@ -2124,18 +1888,15 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         }
       }
     }
-
     if (props.onRowToggle) {
       props.onRowToggle({
         data: expandedRows
       });
     }
   };
-
   var onRowDragStart = function onRowDragStart(e) {
     var event = e.originalEvent,
-        index = e.index;
-
+      index = e.index;
     if (allowRowDrag(event)) {
       rowDragging.current = true;
       draggedRowIndex.current = index;
@@ -2145,15 +1906,13 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 
   var onRowDragOver = function onRowDragOver(e) {
     var event = e.originalEvent,
-        index = e.index;
-
+      index = e.index;
     if (rowDragging.current && draggedRowIndex.current !== index) {
       var rowElement = event.currentTarget;
       var rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
       var pageY = event.pageY + window.scrollY;
       var rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
       var prevRowElement = rowElement.previousElementSibling;
-
       if (pageY < rowMidY) {
         DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
         droppedRowIndex.current = index;
@@ -2164,23 +1923,18 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
       }
     }
-
     event.preventDefault();
   };
-
   var onRowDragLeave = function onRowDragLeave(e) {
     var event = e.originalEvent;
     var rowElement = event.currentTarget;
     var prevRowElement = rowElement.previousElementSibling;
-
     if (prevRowElement) {
       DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
     }
-
     DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
     DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
   };
-
   var onRowDragEnd = function onRowDragEnd(e) {
     var event = e.originalEvent;
     rowDragging.current = false;
@@ -2188,51 +1942,43 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     droppedRowIndex.current = null;
     event.currentTarget.draggable = false;
   };
-
   var onRowDrop = function onRowDrop(e) {
     var event = e.originalEvent;
-
     if (droppedRowIndex.current != null) {
       var dropIndex = draggedRowIndex.current > droppedRowIndex.current ? droppedRowIndex.current : droppedRowIndex.current === 0 ? 0 : droppedRowIndex.current - 1;
-
-      var val = _toConsumableArray(props.value);
-
+      var val = _toConsumableArray(props.tableProps.value);
       ObjectUtils.reorderArray(val, draggedRowIndex.current, dropIndex);
-
       if (props.onRowReorder) {
         props.onRowReorder({
           originalEvent: event,
           value: val,
           dragIndex: draggedRowIndex.current,
-          dropIndex: droppedRowIndex.current
+          dropIndex: dropIndex
         });
       }
-    } //cleanup
-
+    }
 
+    //cleanup
     onRowDragLeave(e);
     onRowDragEnd(e);
     event.preventDefault();
   };
-
   var onRadioChange = function onRadioChange(event) {
     onSingleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, {
       toggleable: true,
       type: 'radio'
     }));
   };
-
   var onCheckboxChange = function onCheckboxChange(event) {
     onMultipleSelection(_objectSpread$5(_objectSpread$5({}, event), {}, {
       toggleable: true,
       type: 'checkbox'
     }));
   };
-
   var onDragSelectionMouseMove = function onDragSelectionMouseMove(event) {
     var _initialDragPosition$ = initialDragPosition.current,
-        x = _initialDragPosition$.x,
-        y = _initialDragPosition$.y;
+      x = _initialDragPosition$.x,
+      y = _initialDragPosition$.y;
     var dx = event.clientX - x;
     var dy = event.clientY - y;
     if (dy < 0) dragSelectionHelper.current.style.top = "".concat(event.pageY + 5, "px");
@@ -2241,38 +1987,30 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     dragSelectionHelper.current.style.width = "".concat(Math.abs(dx), "px");
     event.preventDefault();
   };
-
   var onDragSelectionMouseUp = function onDragSelectionMouseUp() {
     if (dragSelectionHelper.current) {
       dragSelectionHelper.current.remove();
       dragSelectionHelper.current = null;
     }
-
     document.removeEventListener('mousemove', onDragSelectionMouseMove);
     document.removeEventListener('mouseup', onDragSelectionMouseUp);
   };
-
   var onCellClick = function onCellClick(event) {
     if (!allowSelection(event)) {
       return;
     }
-
     props.onCellClick && props.onCellClick(event);
-
     if (allowCellSelection()) {
       if (allowRangeSelection(event)) {
         onRangeSelection(event, 'cell');
       } else {
         var toggleable = allowMetaKeySelection(event);
-
         var originalEvent = event.originalEvent,
-            data = _objectWithoutProperties(event, _excluded);
-
+          data = _objectWithoutProperties(event, _excluded);
         anchorRowIndex.current = event.rowIndex;
         rangeRowIndex.current = event.rowIndex;
         anchorRowFirst.current = props.first;
         anchorCellIndex.current = event.cellIndex;
-
         if (isSingleSelection()) {
           onSingleSelection({
             originalEvent: originalEvent,
@@ -2291,13 +2029,10 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
           });
         }
       }
-
       changeTabIndex(event.originalEvent, 'cell');
     }
-
     rowTouched.current = false;
   };
-
   var onCellMouseDown = function onCellMouseDown(event) {
     if (allowCellDrag(event)) {
       enableDragSelection(event.originalEvent);
@@ -2307,30 +2042,24 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       anchorCellIndex.current = event.cellIndex;
     }
   };
-
   var onCellMouseUp = function onCellMouseUp(event) {
     var isSameCell = event.rowIndex === anchorRowIndex.current && event.cellIndex === anchorCellIndex.current;
-
     if (allowCellDrag(event) && !isSameCell) {
       onRangeSelection(event, 'cell');
     }
   };
-
   var bindDragSelectionEvents = function bindDragSelectionEvents() {
     document.addEventListener('mousemove', onDragSelectionMouseMove);
     document.addEventListener('mouseup', onDragSelectionMouseUp);
     document.body.appendChild(dragSelectionHelper.current);
   };
-
   var unbindDragSelectionEvents = function unbindDragSelectionEvents() {
     onDragSelectionMouseUp();
   };
-
   React.useEffect(function () {
     if (props.frozenRow) {
       updateFrozenRowStickyPosition();
     }
-
     if (props.scrollable && props.rowGroupMode === 'subheader') {
       updateFrozenRowGroupHeaderStickyPosition();
     }
@@ -2355,16 +2084,13 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       unbindDragSelectionEvents();
     }
   });
-
   var createEmptyContent = function createEmptyContent() {
     if (!props.loading) {
       var colSpan = getColumnsLength();
-
       var _content = ObjectUtils.getJSXElement(props.emptyMessage, {
         props: props.tableProps,
         frozen: props.frozenRow
       }) || localeOption('emptyMessage');
-
       return /*#__PURE__*/React.createElement("tr", {
         className: "p-datatable-emptymessage",
         role: "row"
@@ -2373,12 +2099,11 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         role: "cell"
       }, _content));
     }
-
     return null;
   };
-
   var createGroupHeader = function createGroupHeader(rowData, index, expanded, colSpan) {
     if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, index - props.first)) {
+      var _options;
       var style = rowGroupHeaderStyle();
       var toggler = props.expandableRowGroups && /*#__PURE__*/React.createElement(RowTogglerButton, {
         onClick: onRowToggle,
@@ -2387,35 +2112,33 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         expandedRowIcon: props.expandedRowIcon,
         collapsedRowIcon: props.collapsedRowIcon
       });
+      var options = (_options = {
+        index: index
+      }, _defineProperty(_options, "index", index), _defineProperty(_options, "props", props.tableProps), _defineProperty(_options, "customRendering", false), _options);
+      var _content2 = ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
 
-      var _content2 = ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, {
-        index: index,
-        props: props.tableProps
-      });
-
+      // check if the user wants complete control of the rendering
+      if (!options.customRendering) {
+        _content2 = /*#__PURE__*/React.createElement("td", {
+          colSpan: colSpan
+        }, toggler, /*#__PURE__*/React.createElement("span", {
+          className: "p-rowgroup-header-name"
+        }, _content2));
+      }
       return /*#__PURE__*/React.createElement("tr", {
         className: "p-rowgroup-header",
         style: style,
         role: "row"
-      }, /*#__PURE__*/React.createElement("td", {
-        colSpan: colSpan
-      }, toggler, /*#__PURE__*/React.createElement("span", {
-        className: "p-rowgroup-header-name"
-      }, _content2)));
+      }, _content2);
     }
-
     return null;
   };
-
   var createRow = function createRow(rowData, index, expanded) {
     if (!props.expandableRowGroups || expanded) {
       var selected = isSelectionEnabled() ? isSelected(rowData) : false;
       var contextMenuSelected = isContextMenuSelected(rowData);
-
       var _allowRowSelection = allowRowSelection();
-
       var _allowCellSelection = allowCellSelection();
-
       var editing = isRowEditing(rowData);
       return /*#__PURE__*/React.createElement(BodyRow, {
         tableProps: props.tableProps,
@@ -2429,6 +2152,8 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         onRowClick: onRowClick,
         onRowDoubleClick: onRowDoubleClick,
         onRowRightClick: onRowRightClick,
+        onRowMouseEnter: onRowMouseEnter,
+        onRowMouseLeave: onRowMouseLeave,
         tabIndex: props.tabIndex,
         isSelectable: isSelectable,
         onRowTouchEnd: onRowTouchEnd,
@@ -2479,7 +2204,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       });
     }
   };
-
   var createExpansion = function createExpansion(rowData, index, expanded, colSpan) {
     if (expanded && !(isSubheaderGrouping && props.expandableRowGroups)) {
       var id = "".concat(props.tableSelector, "_content_").concat(index, "_expanded");
@@ -2487,27 +2211,23 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         index: index,
         customRendering: false
       };
+      var _content3 = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
 
-      var _content3 = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options); // check if the user wants complete control of the rendering
-
-
+      // check if the user wants complete control of the rendering
       if (!options.customRendering) {
         _content3 = /*#__PURE__*/React.createElement("td", {
           role: "cell",
           colSpan: colSpan
         }, _content3);
       }
-
       return /*#__PURE__*/React.createElement("tr", {
         id: id,
         className: "p-datatable-row-expansion",
         role: "row"
       }, _content3);
     }
-
     return null;
   };
-
   var createGroupFooter = function createGroupFooter(rowData, index, expanded, colSpan) {
     if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, index - props.first, expanded)) {
       var _content4 = ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
@@ -2515,16 +2235,13 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         colSpan: colSpan,
         props: props.tableProps
       });
-
       return /*#__PURE__*/React.createElement("tr", {
         className: "p-rowgroup-footer",
         role: "row"
       }, _content4);
     }
-
     return null;
   };
-
   var createContent = function createContent() {
     return props.value.map(function (rowData, i) {
       var index = getVirtualScrollerOption('getItemOptions') ? getVirtualScrollerOption('getItemOptions')(i).index : props.first + i;
@@ -2540,7 +2257,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       }, groupHeader, row, expansion, groupFooter);
     });
   };
-
   var className = classNames('p-datatable-tbody', props.className);
   var content = props.empty ? createEmptyContent() : createContent();
   return /*#__PURE__*/React.createElement("tbody", {
@@ -2551,57 +2267,44 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 TableBody.displayName = 'TableBody';
 
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FooterCell = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState({}),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      styleObjectState = _React$useState2[0],
-      setStyleObjectState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    styleObjectState = _React$useState2[0],
+    setStyleObjectState = _React$useState2[1];
   var elementRef = React.useRef(null);
-
   var getColumnProp = function getColumnProp(prop) {
     return props.column.props[prop];
   };
-
   var getStyle = function getStyle() {
     var footerStyle = getColumnProp('footerStyle');
     var columnStyle = getColumnProp('style');
     return getColumnProp('frozen') ? Object.assign({}, columnStyle, footerStyle, styleObjectState) : Object.assign({}, columnStyle, footerStyle);
   };
-
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
       var styleObject = _objectSpread$4({}, styleObjectState);
-
       var _align = getColumnProp('alignFrozen');
-
       if (_align === 'right') {
         var right = 0;
         var next = elementRef.current.nextElementSibling;
-
         if (next) {
           right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
         }
-
         styleObject['right'] = right + 'px';
       } else {
         var left = 0;
         var prev = elementRef.current.previousElementSibling;
-
         if (prev) {
           left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
         }
-
         styleObject['left'] = left + 'px';
       }
-
       var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
       !isSameStyle && setStyleObjectState(styleObject);
     }
   };
-
   React.useEffect(function () {
     if (getColumnProp('frozen')) {
       updateStickyPosition();
@@ -2634,12 +2337,10 @@ var TableFooter = /*#__PURE__*/React.memo(function (props) {
       return col && col.props.footer;
     }) : false;
   };
-
   var createGroupFooterCells = function createGroupFooterCells(row) {
     var columns = React.Children.toArray(row.props.children);
     return createFooterCells(columns);
   };
-
   var createFooterCells = function createFooterCells(columns) {
     return React.Children.map(columns, function (col, i) {
       var isVisible = col ? !col.props.hidden : true;
@@ -2651,7 +2352,6 @@ var TableFooter = /*#__PURE__*/React.memo(function (props) {
       });
     });
   };
-
   var createContent = function createContent() {
     if (props.footerColumnGroup) {
       var rows = React.Children.toArray(props.footerColumnGroup.props.children);
@@ -2662,85 +2362,69 @@ var TableFooter = /*#__PURE__*/React.memo(function (props) {
         }, createGroupFooterCells(row));
       });
     }
-
     return /*#__PURE__*/React.createElement("tr", {
       role: "row"
     }, createFooterCells(props.columns));
   };
-
   if (hasFooter()) {
     var content = createContent();
     return /*#__PURE__*/React.createElement("tfoot", {
       className: "p-datatable-tfoot"
     }, content);
   }
-
   return null;
 });
 TableFooter.displayName = 'TableFooter';
 
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      overlayVisibleState = _React$useState2[0],
-      setOverlayVisibleState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    overlayVisibleState = _React$useState2[0],
+    setOverlayVisibleState = _React$useState2[1];
   var overlayRef = React.useRef(null);
   var iconRef = React.useRef(null);
   var selfClick = React.useRef(false);
   var overlayEventListener = React.useRef(null);
-
   var getColumnProp = function getColumnProp(prop) {
     return props.column.props[prop];
   };
-
   var field = getColumnProp('filterField') || getColumnProp('field');
   var filterModel = props.filters[field];
   var filterStoreModel = props.filtersStore && props.filtersStore[field];
-
   var _useOverlayListener = useOverlayListener({
-    target: iconRef,
-    overlay: overlayRef,
-    listener: function listener(event, _ref) {
-      var type = _ref.type,
+      target: iconRef,
+      overlay: overlayRef,
+      listener: function listener(event, _ref) {
+        var type = _ref.type,
           valid = _ref.valid;
-
-      if (valid) {
-        type === 'outside' ? !selfClick.current && !isTargetClicked(event.target) && hide() : hide();
-      }
-
-      selfClick.current = false;
-    },
-    when: overlayVisibleState
-  }),
-      _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
-      bindOverlayListener = _useOverlayListener2[0],
-      unbindOverlayListener = _useOverlayListener2[1];
-
+        if (valid) {
+          type === 'outside' ? !selfClick.current && !isTargetClicked(event.target) && hide() : hide();
+        }
+        selfClick.current = false;
+      },
+      when: overlayVisibleState
+    }),
+    _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
+    bindOverlayListener = _useOverlayListener2[0],
+    unbindOverlayListener = _useOverlayListener2[1];
   var hasFilter = function hasFilter() {
     if (!filterStoreModel || !filterModel) return false;
     return filterStoreModel.operator ? !isFilterBlank(filterModel.constraints[0].value) : !isFilterBlank(filterModel.value);
   };
-
   var hasRowFilter = function hasRowFilter() {
     return filterModel && !isFilterBlank(filterModel.value);
   };
-
   var isFilterBlank = function isFilterBlank(filter) {
     return ObjectUtils.isEmpty(filter);
   };
-
   var isRowMatchModeSelected = function isRowMatchModeSelected(matchMode) {
     return filterModel && filterModel.matchMode === matchMode;
   };
-
   var showMenuButton = function showMenuButton() {
     return getColumnProp('showFilterMenu') && (props.display === 'row' ? getColumnProp('dataType') !== 'boolean' : true);
   };
-
   var matchModes = function matchModes() {
     return getColumnProp('filterMatchModeOptions') || PrimeReact.filterMatchModeOptions[findDataType()].map(function (key) {
       return {
@@ -2749,31 +2433,24 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       };
     });
   };
-
   var isShowMatchModes = function isShowMatchModes() {
     return getColumnProp('dataType') !== 'boolean' && getColumnProp('showFilterMatchModes') && matchModes() && getColumnProp('showFilterMenuOptions');
   };
-
   var isShowOperator = function isShowOperator() {
     return getColumnProp('showFilterOperator') && filterModel && filterModel.operator && getColumnProp('showFilterMenuOptions');
   };
-
   var showRemoveIcon = function showRemoveIcon() {
     return fieldConstraints().length > 1;
   };
-
   var isShowAddConstraint = function isShowAddConstraint() {
     return getColumnProp('showAddButton') && filterModel && filterModel.operator && fieldConstraints() && fieldConstraints().length < getColumnProp('maxConstraints') && getColumnProp('showFilterMenuOptions');
   };
-
   var isOutsideClicked = function isOutsideClicked(target) {
     return !isTargetClicked(target) && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
   };
-
   var isTargetClicked = function isTargetClicked(target) {
     return iconRef.current && (iconRef.current.isSameNode(target) || iconRef.current.contains(target));
   };
-
   var getDefaultConstraint = function getDefaultConstraint() {
     if (filterStoreModel) {
       if (filterStoreModel.operator) {
@@ -2788,17 +2465,14 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       }
     }
   };
-
   var findDataType = function findDataType() {
     var dataType = getColumnProp('dataType');
     var matchMode = getColumnProp('filterMatchMode');
-
     var hasMatchMode = function hasMatchMode(key) {
       return PrimeReact.filterMatchModeOptions[key].some(function (mode) {
         return mode === matchMode;
       });
     };
-
     if (matchMode === 'custom' && !hasMatchMode(dataType)) {
       PrimeReact.filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM);
       return dataType;
@@ -2807,16 +2481,12 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         return hasMatchMode(key);
       }) || dataType;
     }
-
     return dataType;
   };
-
   var clearFilter = function clearFilter() {
     var filterClearCallback = getColumnProp('onFilterClear');
     var defaultConstraint = getDefaultConstraint();
-
     var filters = _objectSpread$3({}, props.filters);
-
     if (filters[field].operator) {
       filters[field].constraints.splice(1);
       filters[field].operator = defaultConstraint.operator;
@@ -2828,13 +2498,11 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       filters[field].value = null;
       filters[field].matchMode = defaultConstraint.matchMode;
     }
-
     filterClearCallback && filterClearCallback();
     props.onFilterChange(filters);
     props.onFilterApply();
     hide();
   };
-
   var applyFilter = function applyFilter() {
     var filterApplyClickCallback = getColumnProp('onFilterApplyClick');
     filterApplyClickCallback && filterApplyClickCallback({
@@ -2844,20 +2512,17 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     props.onFilterApply();
     hide();
   };
-
   var toggleMenu = function toggleMenu() {
     setOverlayVisibleState(function (prevVisible) {
       return !prevVisible;
     });
   };
-
   var onToggleButtonKeyDown = function onToggleButtonKeyDown(event) {
     switch (event.key) {
       case 'Escape':
       case 'Tab':
         hide();
         break;
-
       case 'ArrowDown':
         if (overlayVisibleState) {
           var focusable = DomHandler.getFirstFocusableElement(overlayRef.current);
@@ -2867,41 +2532,38 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
           setOverlayVisibleState(true);
           event.preventDefault();
         }
-
         break;
     }
   };
-
   var onContentKeyDown = function onContentKeyDown(event) {
     if (event.key === 'Escape') {
       hide();
       iconRef.current && iconRef.current.focus();
     }
   };
-
   var onInputChange = function onInputChange(event, index) {
     var filters = _objectSpread$3({}, props.filters);
-
     var value = event.target.value;
-
     if (props.display === 'menu') {
       filters[field].constraints[index].value = value;
     } else {
       filters[field].value = value;
     }
-
     props.onFilterChange(filters);
-
     if (!getColumnProp('showApplyButton') || props.display === 'row') {
       props.onFilterApply();
     }
   };
-
+  var onInputKeydown = function onInputKeydown(event, _index) {
+    if (event.key === 'Enter') {
+      if (!getColumnProp('showApplyButton') || props.display === 'menu') {
+        applyFilter();
+      }
+    }
+  };
   var onRowMatchModeChange = function onRowMatchModeChange(matchMode) {
     var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
-
     var filters = _objectSpread$3({}, props.filters);
-
     filters[field].matchMode = matchMode;
     filterMatchModeChangeCallback && filterMatchModeChangeCallback({
       field: field,
@@ -2911,65 +2573,50 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     props.onFilterApply();
     hide();
   };
-
   var onRowMatchModeKeyDown = function onRowMatchModeKeyDown(event, matchMode, clear) {
     var item = event.target;
-
     switch (event.key) {
       case 'ArrowDown':
         var nextItem = findNextItem(item);
-
         if (nextItem) {
           item.removeAttribute('tabindex');
           nextItem.tabIndex = 0;
           nextItem.focus();
         }
-
         event.preventDefault();
         break;
-
       case 'ArrowUp':
         var prevItem = findPrevItem(item);
-
         if (prevItem) {
           item.removeAttribute('tabindex');
           prevItem.tabIndex = 0;
           prevItem.focus();
         }
-
         event.preventDefault();
         break;
-
       case 'Enter':
         clear ? clearFilter() : onRowMatchModeChange(matchMode.value);
         event.preventDefault();
         break;
     }
   };
-
   var onOperatorChange = function onOperatorChange(e) {
     var filterOperationChangeCallback = getColumnProp('onFilterOperatorChange');
     var value = e.value;
-
     var filters = _objectSpread$3({}, props.filters);
-
     filters[field].operator = value;
     props.onFilterChange(filters);
     filterOperationChangeCallback && filterOperationChangeCallback({
       field: field,
       operator: value
     });
-
     if (!getColumnProp('showApplyButton')) {
       props.onFilterApply();
     }
   };
-
   var onMenuMatchModeChange = function onMenuMatchModeChange(value, index) {
     var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
-
     var filters = _objectSpread$3({}, props.filters);
-
     filters[field].constraints[index].matchMode = value;
     props.onFilterChange(filters);
     filterMatchModeChangeCallback && filterMatchModeChangeCallback({
@@ -2977,18 +2624,14 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       matchMode: value,
       index: index
     });
-
     if (!getColumnProp('showApplyButton')) {
       props.onFilterApply();
     }
   };
-
   var addConstraint = function addConstraint() {
     var filterConstraintAddCallback = getColumnProp('onFilterConstraintAdd');
     var defaultConstraint = getDefaultConstraint();
-
     var filters = _objectSpread$3({}, props.filters);
-
     var newConstraint = {
       value: null,
       matchMode: defaultConstraint.matchMode
@@ -2999,43 +2642,34 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       constraint: newConstraint
     });
     props.onFilterChange(filters);
-
     if (!getColumnProp('showApplyButton')) {
       props.onFilterApply();
     }
   };
-
   var removeConstraint = function removeConstraint(index) {
     var filterConstraintRemoveCallback = getColumnProp('onFilterConstraintRemove');
-
     var filters = _objectSpread$3({}, props.filters);
-
     var removedConstraint = filters[field].constraints.splice(index, 1);
     filterConstraintRemoveCallback && filterConstraintRemoveCallback({
       field: field,
       constraint: removedConstraint
     });
     props.onFilterChange(filters);
-
     if (!getColumnProp('showApplyButton')) {
       props.onFilterApply();
     }
   };
-
   var findNextItem = function findNextItem(item) {
     var nextItem = item.nextElementSibling;
     return nextItem ? DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? findNextItem(nextItem) : nextItem : item.parentElement.firstElementChild;
   };
-
   var findPrevItem = function findPrevItem(item) {
     var prevItem = item.previousElementSibling;
     return prevItem ? DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? findPrevItem(prevItem) : prevItem : item.parentElement.lastElementChild;
   };
-
   var hide = function hide() {
     setOverlayVisibleState(false);
   };
-
   var onContentClick = function onContentClick(event) {
     selfClick.current = true;
     OverlayService.emit('overlay-click', {
@@ -3043,51 +2677,40 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       target: overlayRef.current
     });
   };
-
   var onContentMouseDown = function onContentMouseDown() {
     selfClick.current = true;
   };
-
   var onOverlayEnter = function onOverlayEnter() {
     ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
     DomHandler.alignOverlay(overlayRef.current, iconRef.current, PrimeReact.appendTo, false);
-
     overlayEventListener.current = function (e) {
       if (!isOutsideClicked(e.target)) {
         selfClick.current = true;
       }
     };
-
     OverlayService.on('overlay-click', overlayEventListener.current);
   };
-
   var onOverlayEntered = function onOverlayEntered() {
     bindOverlayListener();
   };
-
   var onOverlayExit = function onOverlayExit() {
     onOverlayHide();
   };
-
   var onOverlayExited = function onOverlayExited() {
     ZIndexUtils.clear(overlayRef.current);
   };
-
   var onOverlayHide = function onOverlayHide() {
     unbindOverlayListener();
     OverlayService.off('overlay-click', overlayEventListener.current);
     overlayEventListener.current = null;
     selfClick.current = false;
   };
-
   var fieldConstraints = function fieldConstraints() {
     return filterModel ? filterModel.constraints || [filterModel] : [];
   };
-
   var operator = function operator() {
     return filterModel.operator;
   };
-
   var operatorOptions = function operatorOptions() {
     return [{
       label: localeOption('matchAll'),
@@ -3097,50 +2720,38 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       value: FilterOperator.OR
     }];
   };
-
   var filterLabel = function filterLabel() {
     return localeOption('filter');
   };
-
   var noFilterLabel = function noFilterLabel() {
     return localeOption('noFilter');
   };
-
   var removeRuleButtonLabel = function removeRuleButtonLabel() {
     return localeOption('removeRule');
   };
-
   var addRuleButtonLabel = function addRuleButtonLabel() {
     return localeOption('addRule');
   };
-
   var clearButtonLabel = function clearButtonLabel() {
     return localeOption('clear');
   };
-
   var applyButtonLabel = function applyButtonLabel() {
     return localeOption('apply');
   };
-
   var filterCallback = function filterCallback(value) {
     var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
     var filters = _objectSpread$3({}, props.filters);
-
     var meta = filters[field];
     props.display === 'menu' && meta && meta.operator ? filters[field].constraints[index].value = value : filters[field].value = value;
     props.onFilterChange(filters);
   };
-
   var filterApplyCallback = function filterApplyCallback() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     args && filterCallback(args[0], args[1]);
     props.onFilterApply();
   };
-
   useUpdateEffect(function () {
     if (props.display === 'menu' && overlayVisibleState) {
       DomHandler.alignOverlay(overlayRef.current, iconRef.current, PrimeReact.appendTo, false);
@@ -3151,13 +2762,11 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       OverlayService.off('overlay-click', overlayEventListener.current);
       overlayEventListener.current = null;
     }
-
     if (overlayRef.current) {
       ZIndexUtils.clear(overlayRef.current);
       onOverlayHide();
     }
   });
-
   var createFilterElement = function createFilterElement(model, index) {
     var value = model ? model.value : null;
     return getColumnProp('filterElement') ? ObjectUtils.getJSXElement(getColumnProp('filterElement'), {
@@ -3173,12 +2782,14 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       onChange: function onChange(e) {
         return onInputChange(e, index);
       },
+      onKeyDown: function onKeyDown(e) {
+        return onInputKeydown(e);
+      },
       className: "p-column-filter",
       placeholder: getColumnProp('filterPlaceholder'),
       maxLength: getColumnProp('filterMaxLength')
     });
   };
-
   var createRowFilterElement = function createRowFilterElement() {
     if (props.display === 'row') {
       var content = createFilterElement(filterModel, 0);
@@ -3186,21 +2797,17 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         className: "p-fluid p-column-filter-element"
       }, content);
     }
-
     return null;
   };
-
   var createMenuFilterElement = function createMenuFilterElement(fieldConstraint, index) {
     return props.display === 'menu' ? createFilterElement(fieldConstraint, index) : null;
   };
-
   var createMenuButton = function createMenuButton() {
     if (showMenuButton()) {
       var _className = classNames('p-column-filter-menu-button p-link', {
         'p-column-filter-menu-button-open': overlayVisibleState,
         'p-column-filter-menu-button-active': hasFilter()
       });
-
       var label = filterLabel();
       return /*#__PURE__*/React.createElement("button", {
         ref: iconRef,
@@ -3216,16 +2823,13 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         "aria-hidden": "true"
       }), /*#__PURE__*/React.createElement(Ripple, null));
     }
-
     return null;
   };
-
   var createClearButton = function createClearButton() {
     if (getColumnProp('showClearButton') && props.display === 'row') {
       var _className2 = classNames('p-column-filter-clear-button p-link', {
         'p-hidden-space': !hasRowFilter()
       });
-
       var clearLabel = clearButtonLabel();
       return /*#__PURE__*/React.createElement("button", {
         className: _className2,
@@ -3237,21 +2841,17 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         "aria-hidden": "true"
       }), /*#__PURE__*/React.createElement(Ripple, null));
     }
-
     return null;
   };
-
   var createRowItems = function createRowItems() {
     if (isShowMatchModes()) {
       var _matchModes = matchModes();
-
       var _noFilterLabel = noFilterLabel();
-
       return /*#__PURE__*/React.createElement("ul", {
         className: "p-column-filter-row-items"
       }, _matchModes.map(function (matchMode, i) {
         var value = matchMode.value,
-            label = matchMode.label;
+          label = matchMode.label;
         var className = classNames('p-column-filter-row-item', {
           'p-highlight': isRowMatchModeSelected(value)
         });
@@ -3277,10 +2877,8 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         }
       }, _noFilterLabel));
     }
-
     return null;
   };
-
   var createOperator = function createOperator() {
     if (isShowOperator()) {
       var options = operatorOptions();
@@ -3294,10 +2892,8 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         className: "p-column-filter-operator-dropdown"
       }));
     }
-
     return null;
   };
-
   var createMatchModeDropdown = function createMatchModeDropdown(constraint, index) {
     if (isShowMatchModes()) {
       var options = matchModes();
@@ -3310,10 +2906,8 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         className: "p-column-filter-matchmode-dropdown"
       });
     }
-
     return null;
   };
-
   var createRemoveButton = function createRemoveButton(index) {
     if (showRemoveIcon()) {
       var removeRuleLabel = removeRuleButtonLabel();
@@ -3327,13 +2921,10 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         label: removeRuleLabel
       });
     }
-
     return null;
   };
-
   var createConstraints = function createConstraints() {
     var _fieldConstraints = fieldConstraints();
-
     return /*#__PURE__*/React.createElement("div", {
       className: "p-column-filter-constraints"
     }, _fieldConstraints.map(function (fieldConstraint, i) {
@@ -3346,7 +2937,6 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       }, matchModeDropdown, menuFilterElement, /*#__PURE__*/React.createElement("div", null, removeButton));
     }));
   };
-
   var createAddRule = function createAddRule() {
     if (isShowAddConstraint()) {
       var addRuleLabel = addRuleButtonLabel();
@@ -3360,10 +2950,8 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         onClick: addConstraint
       }));
     }
-
     return null;
   };
-
   var createFilterClearButton = function createFilterClearButton() {
     if (getColumnProp('showClearButton')) {
       if (!getColumnProp('filterClear')) {
@@ -3375,17 +2963,14 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
           label: clearLabel
         });
       }
-
       return ObjectUtils.getJSXElement(getColumnProp('filterClear'), {
         field: field,
         filterModel: filterModel,
         filterClearCallback: clearFilter
       });
     }
-
     return null;
   };
-
   var createFilterApplyButton = function createFilterApplyButton() {
     if (getColumnProp('showApplyButton')) {
       if (!getColumnProp('filterApply')) {
@@ -3397,17 +2982,14 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
           label: applyLabel
         });
       }
-
       return ObjectUtils.getJSXElement(getColumnProp('filterApply'), {
         field: field,
         filterModel: filterModel,
         filterApplyCallback: applyFilter
       });
     }
-
     return null;
   };
-
   var createButtonBar = function createButtonBar() {
     var clearButton = createFilterClearButton();
     var applyButton = createFilterApplyButton();
@@ -3415,7 +2997,6 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       className: "p-column-filter-buttonbar"
     }, clearButton, applyButton);
   };
-
   var createItems = function createItems() {
     var operator = createOperator();
     var constraints = createConstraints();
@@ -3423,7 +3004,6 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     var buttonBar = createButtonBar();
     return /*#__PURE__*/React.createElement(React.Fragment, null, operator, constraints, addRule, buttonBar);
   };
-
   var createOverlay = function createOverlay() {
     var style = getColumnProp('filterMenuStyle');
     var className = classNames('p-column-filter-overlay p-component p-fluid', getColumnProp('filterMenuClassName'), {
@@ -3464,7 +3044,6 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       onMouseDown: onContentMouseDown
     }, filterHeader, items, filterFooter)));
   };
-
   var className = classNames('p-column-filter p-fluid', {
     'p-column-filter-row': props.display === 'row',
     'p-column-filter-menu': props.display === 'menu'
@@ -3481,18 +3060,15 @@ ColumnFilter.displayName = 'ColumnFilter';
 
 var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focusedState = _React$useState2[0],
-      setFocusedState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedState = _React$useState2[0],
+    setFocusedState = _React$useState2[1];
   var onFocus = function onFocus() {
     setFocusedState(true);
   };
-
   var onBlur = function onBlur() {
     setFocusedState(false);
   };
-
   var onClick = function onClick(event) {
     if (!props.disabled) {
       setFocusedState(true);
@@ -3502,14 +3078,13 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
       });
     }
   };
-
   var onKeyDown = function onKeyDown(event) {
-    if (event.code === 'Space') {
+    if (event.code === 'Space' || event.key === ' ') {
+      // event.key is for Android support
       onClick(event);
       event.preventDefault();
     }
   };
-
   var boxClassName = classNames('p-checkbox-box p-component', {
     'p-highlight': props.checked,
     'p-disabled': props.disabled,
@@ -3537,130 +3112,102 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
 HeaderCheckbox.displayName = 'HeaderCheckbox';
 
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HeaderCell = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState({}),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      styleObjectState = _React$useState2[0],
-      setStyleObjectState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    styleObjectState = _React$useState2[0],
+    setStyleObjectState = _React$useState2[1];
   var elementRef = React.useRef(null);
   var prevColumn = usePrevious(props.column);
-
   var isBadgeVisible = function isBadgeVisible() {
     return props.multiSortMeta && props.multiSortMeta.length > 1;
   };
-
   var isSortableDisabled = function isSortableDisabled() {
     return !getColumnProp('sortable') || getColumnProp('sortable') && (props.allSortableDisabled || getColumnProp('sortableDisabled'));
   };
-
   var getColumnProp = function getColumnProp() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     return props.column ? typeof args[0] === 'string' ? props.column.props[args[0]] : (args[0] || props.column).props[args[1]] : null;
   };
-
   var getStyle = function getStyle() {
     var headerStyle = getColumnProp('headerStyle');
     var columnStyle = getColumnProp('style');
     return getColumnProp('frozen') ? Object.assign({}, columnStyle, headerStyle, styleObjectState) : Object.assign({}, columnStyle, headerStyle);
   };
-
   var getMultiSortMetaIndex = function getMultiSortMetaIndex() {
     return props.multiSortMeta.findIndex(function (meta) {
       return meta.field === getColumnProp('field') || meta.field === getColumnProp('sortField');
     });
   };
-
   var getSortMeta = function getSortMeta() {
     var sorted = false;
     var sortOrder = 0;
     var metaIndex = -1;
-
     if (props.sortMode === 'single') {
       sorted = props.sortField && (props.sortField === getColumnProp('field') || props.sortField === getColumnProp('sortField'));
       sortOrder = sorted ? props.sortOrder : 0;
     } else if (props.sortMode === 'multiple') {
       metaIndex = getMultiSortMetaIndex();
-
       if (metaIndex > -1) {
         sorted = true;
         sortOrder = props.multiSortMeta[metaIndex].order;
       }
     }
-
     return {
       sorted: sorted,
       sortOrder: sortOrder,
       metaIndex: metaIndex
     };
   };
-
   var getAriaSort = function getAriaSort(_ref) {
     var sorted = _ref.sorted,
-        sortOrder = _ref.sortOrder;
-
+      sortOrder = _ref.sortOrder;
     if (getColumnProp('sortable')) {
       var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
       if (sortIcon === 'pi-sort-amount-down') return 'descending';else if (sortIcon === 'pi-sort-amount-up-alt') return 'ascending';else return 'none';
     }
-
     return null;
   };
-
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
       var styleObject = _objectSpread$2({}, styleObjectState);
-
       var align = getColumnProp('alignFrozen');
-
       if (align === 'right') {
         var right = 0;
         var next = elementRef.current.nextElementSibling;
-
         if (next) {
           right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
         }
-
         styleObject['right'] = right + 'px';
       } else {
         var left = 0;
         var prev = elementRef.current.previousElementSibling;
-
         if (prev) {
           left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
         }
-
         styleObject['left'] = left + 'px';
       }
-
       var filterRow = elementRef.current.parentElement.nextElementSibling;
-
       if (filterRow) {
         var index = DomHandler.index(elementRef.current);
         filterRow.children[index].style.left = styleObject['left'];
         filterRow.children[index].style.right = styleObject['right'];
       }
-
       var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
       !isSameStyle && setStyleObjectState(styleObject);
     }
   };
-
   var updateSortableDisabled = function updateSortableDisabled(prevColumn) {
     if (getColumnProp(prevColumn, 'sortableDisabled') !== getColumnProp('sortableDisabled') || getColumnProp(prevColumn, 'sortable') !== getColumnProp('sortable')) {
       props.onSortableChange();
     }
   };
-
   var onClick = function onClick(event) {
     if (!isSortableDisabled()) {
       var targetNode = event.target;
-
       if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') || DomHandler.hasClass(targetNode, 'p-column-header-content') || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
         DomHandler.clearSelection();
         props.onSortChange({
@@ -3671,56 +3218,48 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       }
     }
   };
-
   var onMouseDown = function onMouseDown(event) {
     props.onColumnMouseDown({
       originalEvent: event,
       column: props.column
     });
   };
-
   var onKeyDown = function onKeyDown(event) {
     if (event.key === 'Enter' && event.currentTarget === elementRef.current && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
       onClick(event);
       event.preventDefault();
     }
   };
-
   var onDragStart = function onDragStart(event) {
     props.onColumnDragStart({
       originalEvent: event,
       column: props.column
     });
   };
-
   var onDragOver = function onDragOver(event) {
     props.onColumnDragOver({
       originalEvent: event,
       column: props.column
     });
   };
-
   var onDragLeave = function onDragLeave(event) {
     props.onColumnDragLeave({
       originalEvent: event,
       column: props.column
     });
   };
-
   var onDrop = function onDrop(event) {
     props.onColumnDrop({
       originalEvent: event,
       column: props.column
     });
   };
-
   var onResizerMouseDown = function onResizerMouseDown(event) {
     props.onColumnResizeStart({
       originalEvent: event,
       column: props.column
     });
   };
-
   var onResizerClick = function onResizerClick(event) {
     if (props.onColumnResizerClick) {
       props.onColumnResizerClick({
@@ -3731,7 +3270,6 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       event.preventDefault();
     }
   };
-
   var onResizerDoubleClick = function onResizerDoubleClick(event) {
     if (props.onColumnResizerDoubleClick) {
       props.onColumnResizerDoubleClick({
@@ -3742,15 +3280,12 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       event.preventDefault();
     }
   };
-
   React.useEffect(function () {
     if (getColumnProp('frozen')) {
       updateStickyPosition();
     }
-
     updateSortableDisabled(prevColumn);
   });
-
   var createResizer = function createResizer() {
     if (props.resizableColumns && !getColumnProp('frozen')) {
       return /*#__PURE__*/React.createElement("span", {
@@ -3760,10 +3295,8 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
         onDoubleClick: onResizerDoubleClick
       });
     }
-
     return null;
   };
-
   var createTitle = function createTitle() {
     var title = ObjectUtils.getJSXElement(getColumnProp('header'), {
       props: props.tableProps
@@ -3772,11 +3305,9 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       className: "p-column-title"
     }, title);
   };
-
   var createSortIcon = function createSortIcon(_ref2) {
     var sorted = _ref2.sorted,
-        sortOrder = _ref2.sortOrder;
-
+      sortOrder = _ref2.sortOrder;
     if (getColumnProp('sortable')) {
       var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
       var className = classNames('p-sortable-column-icon pi pi-fw', sortIcon);
@@ -3784,23 +3315,18 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
         className: className
       });
     }
-
     return null;
   };
-
   var createBadge = function createBadge(_ref3) {
     var metaIndex = _ref3.metaIndex;
-
     if (metaIndex !== -1 && isBadgeVisible()) {
       var value = props.groupRowsBy && props.groupRowsBy === props.groupRowSortField ? metaIndex : metaIndex + 1;
       return /*#__PURE__*/React.createElement("span", {
         className: "p-sortable-column-badge"
       }, value);
     }
-
     return null;
   };
-
   var createCheckbox = function createCheckbox() {
     if (props.showSelectAll && getColumnProp('selectionMode') === 'multiple' && props.filterDisplay !== 'row') {
       var allRowsSelected = props.allRowsSelected(props.value);
@@ -3810,10 +3336,8 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
         disabled: props.empty
       });
     }
-
     return null;
   };
-
   var createFilter = function createFilter() {
     if (props.filterDisplay === 'menu' && getColumnProp('filter')) {
       return /*#__PURE__*/React.createElement(ColumnFilter, {
@@ -3825,10 +3349,8 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
         filtersStore: props.filtersStore
       });
     }
-
     return null;
   };
-
   var createHeader = function createHeader(sortMeta) {
     var title = createTitle();
     var sortIcon = createSortIcon(sortMeta);
@@ -3839,10 +3361,8 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       className: "p-column-header-content"
     }, title, sortIcon, badge, checkbox, filter);
   };
-
   var createElement = function createElement() {
     var _isSortableDisabled = isSortableDisabled();
-
     var sortMeta = getSortMeta();
     var style = getStyle();
     var align = getColumnProp('alignHeader') || getColumnProp('align');
@@ -3886,34 +3406,28 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       content: headerTooltip
     }, headerTooltipOptions)));
   };
-
   var element = createElement();
   return element;
 });
 HeaderCell.displayName = 'HeaderCell';
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TableHeader = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      sortableDisabledFieldsState = _React$useState2[0],
-      setSortableDisabledFieldsState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    sortableDisabledFieldsState = _React$useState2[0],
+    setSortableDisabledFieldsState = _React$useState2[1];
   var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      allSortableDisabledState = _React$useState4[0],
-      setAllSortableDisabledState = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    allSortableDisabledState = _React$useState4[0],
+    setAllSortableDisabledState = _React$useState4[1];
   var isSingleSort = props.sortMode === 'single';
   var isMultipleSort = props.sortMode === 'multiple';
   var isAllSortableDisabled = isSingleSort && allSortableDisabledState;
-
   var isColumnSorted = function isColumnSorted(column) {
     return props.sortField !== null ? column.props.field === props.sortField || column.props.sortField === props.sortField : false;
   };
-
   var updateSortableDisabled = function updateSortableDisabled() {
     if (isSingleSort || isMultipleSort && props.onSortChange) {
       var sortableDisabledFields = [];
@@ -3921,7 +3435,6 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
       props.columns.forEach(function (column) {
         if (column.props.sortableDisabled) {
           sortableDisabledFields.push(column.props.sortField || column.props.field);
-
           if (!allSortableDisabled && isColumnSorted(column)) {
             allSortableDisabled = true;
           }
@@ -3931,24 +3444,19 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
       setAllSortableDisabledState(allSortableDisabled);
     }
   };
-
   var onSortableChange = function onSortableChange() {
     updateSortableDisabled();
   };
-
   var onCheckboxChange = function onCheckboxChange(e) {
     props.onColumnCheckboxChange(e, props.value);
   };
-
   useMountEffect(function () {
     updateSortableDisabled();
   });
-
   var createGroupHeaderCells = function createGroupHeaderCells(row) {
     var columns = React.Children.toArray(row.props.children);
     return createHeaderCells(columns);
   };
-
   var createHeaderCells = function createHeaderCells(columns) {
     return React.Children.map(columns, function (col, i) {
       var isVisible = col ? !col.props.hidden : true;
@@ -3991,7 +3499,6 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
       });
     });
   };
-
   var createCheckbox = function createCheckbox(selectionMode) {
     if (props.showSelectAll && selectionMode === 'multiple') {
       var allRowsSelected = props.allRowsSelected(props.value);
@@ -4001,10 +3508,8 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
         disabled: props.empty
       });
     }
-
     return null;
   };
-
   var createFilter = function createFilter(column, filter) {
     if (filter) {
       return /*#__PURE__*/React.createElement(ColumnFilter, {
@@ -4016,28 +3521,23 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
         onFilterApply: props.onFilterApply
       });
     }
-
     return null;
   };
-
   var createFilterCells = function createFilterCells() {
     return React.Children.map(props.columns, function (col, i) {
       var isVisible = !col.props.hidden;
-
       if (isVisible) {
         var _col$props = col.props,
-            filterHeaderStyle = _col$props.filterHeaderStyle,
-            style = _col$props.style,
-            filterHeaderClassName = _col$props.filterHeaderClassName,
-            className = _col$props.className,
-            frozen = _col$props.frozen,
-            columnKey = _col$props.columnKey,
-            field = _col$props.field,
-            selectionMode = _col$props.selectionMode,
-            filter = _col$props.filter;
-
+          filterHeaderStyle = _col$props.filterHeaderStyle,
+          style = _col$props.style,
+          filterHeaderClassName = _col$props.filterHeaderClassName,
+          className = _col$props.className,
+          frozen = _col$props.frozen,
+          columnKey = _col$props.columnKey,
+          field = _col$props.field,
+          selectionMode = _col$props.selectionMode,
+          filter = _col$props.filter;
         var colStyle = _objectSpread$1(_objectSpread$1({}, filterHeaderStyle || {}), style || {});
-
         var colClassName = classNames('p-filter-column', filterHeaderClassName, className, {
           'p-frozen-column': frozen
         });
@@ -4050,11 +3550,9 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
           className: colClassName
         }, checkbox, filterRow);
       }
-
       return null;
     });
   };
-
   var createContent = function createContent() {
     if (props.headerColumnGroup) {
       var rows = React.Children.toArray(props.headerColumnGroup.props.children);
@@ -4074,7 +3572,6 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, headerRow, filterRow);
     }
   };
-
   var content = createContent();
   return /*#__PURE__*/React.createElement("thead", {
     className: "p-datatable-thead"
@@ -4083,69 +3580,56 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
 TableHeader.displayName = 'TableHeader';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(props.first),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      firstState = _React$useState2[0],
-      setFirstState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    firstState = _React$useState2[0],
+    setFirstState = _React$useState2[1];
   var _React$useState3 = React.useState(props.rows),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      rowsState = _React$useState4[0],
-      setRowsState = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    rowsState = _React$useState4[0],
+    setRowsState = _React$useState4[1];
   var _React$useState5 = React.useState(props.sortField),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      sortFieldState = _React$useState6[0],
-      setSortFieldState = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    sortFieldState = _React$useState6[0],
+    setSortFieldState = _React$useState6[1];
   var _React$useState7 = React.useState(props.sortOrder),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      sortOrderState = _React$useState8[0],
-      setSortOrderState = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    sortOrderState = _React$useState8[0],
+    setSortOrderState = _React$useState8[1];
   var _React$useState9 = React.useState(props.multiSortMeta),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      multiSortMetaState = _React$useState10[0],
-      setMultiSortMetaState = _React$useState10[1];
-
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    multiSortMetaState = _React$useState10[0],
+    setMultiSortMetaState = _React$useState10[1];
   var _React$useState11 = React.useState(props.filters),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      filtersState = _React$useState12[0],
-      setFiltersState = _React$useState12[1];
-
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    filtersState = _React$useState12[0],
+    setFiltersState = _React$useState12[1];
   var _React$useState13 = React.useState([]),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      columnOrderState = _React$useState14[0],
-      setColumnOrderState = _React$useState14[1];
-
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    columnOrderState = _React$useState14[0],
+    setColumnOrderState = _React$useState14[1];
   var _React$useState15 = React.useState(null),
-      _React$useState16 = _slicedToArray(_React$useState15, 2),
-      groupRowsSortMetaState = _React$useState16[0],
-      setGroupRowsSortMetaState = _React$useState16[1];
-
+    _React$useState16 = _slicedToArray(_React$useState15, 2),
+    groupRowsSortMetaState = _React$useState16[0],
+    setGroupRowsSortMetaState = _React$useState16[1];
   var _React$useState17 = React.useState({}),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      editingMetaState = _React$useState18[0],
-      setEditingMetaState = _React$useState18[1];
-
+    _React$useState18 = _slicedToArray(_React$useState17, 2),
+    editingMetaState = _React$useState18[0],
+    setEditingMetaState = _React$useState18[1];
   var _React$useState19 = React.useState(null),
-      _React$useState20 = _slicedToArray(_React$useState19, 2),
-      attributeSelectorState = _React$useState20[0],
-      setAttributeSelectorState = _React$useState20[1];
-
+    _React$useState20 = _slicedToArray(_React$useState19, 2),
+    attributeSelectorState = _React$useState20[0],
+    setAttributeSelectorState = _React$useState20[1];
   var _React$useState21 = React.useState(props.rows),
-      _React$useState22 = _slicedToArray(_React$useState21, 2),
-      d_rowsState = _React$useState22[0],
-      setD_rowsState = _React$useState22[1];
-
+    _React$useState22 = _slicedToArray(_React$useState21, 2),
+    d_rowsState = _React$useState22[0],
+    setD_rowsState = _React$useState22[1];
   var _React$useState23 = React.useState({}),
-      _React$useState24 = _slicedToArray(_React$useState23, 2),
-      d_filtersState = _React$useState24[0],
-      setD_filtersState = _React$useState24[1];
-
+    _React$useState24 = _slicedToArray(_React$useState23, 2),
+    d_filtersState = _React$useState24[0],
+    setD_filtersState = _React$useState24[1];
   var elementRef = React.useRef(null);
   var tableRef = React.useRef(null);
   var wrapperRef = React.useRef(null);
@@ -4172,92 +3656,74 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var columnSortFunction = React.useRef(null);
   var columnField = React.useRef(null);
   var filterTimeout = React.useRef(null);
-
   if (props.rows !== d_rowsState && !props.onPage) {
     setRowsState(props.rows);
     setD_rowsState(props.rows);
   }
-
   var _useEventListener = useEventListener({
-    type: 'mousemove',
-    listener: function listener(event) {
-      if (columnResizing.current) {
-        onColumnResize(event);
+      type: 'mousemove',
+      listener: function listener(event) {
+        if (columnResizing.current) {
+          onColumnResize(event);
+        }
       }
-    }
-  }),
-      _useEventListener2 = _slicedToArray(_useEventListener, 2),
-      bindDocumentMouseMoveListener = _useEventListener2[0],
-      unbindDocumentMouseMoveListener = _useEventListener2[1];
-
+    }),
+    _useEventListener2 = _slicedToArray(_useEventListener, 2),
+    bindDocumentMouseMoveListener = _useEventListener2[0],
+    unbindDocumentMouseMoveListener = _useEventListener2[1];
   var _useEventListener3 = useEventListener({
-    type: 'mouseup',
-    listener: function listener() {
-      if (columnResizing.current) {
-        columnResizing.current = false;
-        onColumnResizeEnd();
+      type: 'mouseup',
+      listener: function listener() {
+        if (columnResizing.current) {
+          columnResizing.current = false;
+          onColumnResizeEnd();
+        }
       }
-    }
-  }),
-      _useEventListener4 = _slicedToArray(_useEventListener3, 2),
-      bindDocumentMouseUpListener = _useEventListener4[0],
-      unbindDocumentMouseUpListener = _useEventListener4[1];
-
+    }),
+    _useEventListener4 = _slicedToArray(_useEventListener3, 2),
+    bindDocumentMouseUpListener = _useEventListener4[0],
+    unbindDocumentMouseUpListener = _useEventListener4[1];
   var isCustomStateStorage = function isCustomStateStorage() {
     return props.stateStorage === 'custom';
   };
-
   var isStateful = function isStateful() {
     return props.stateKey != null || isCustomStateStorage();
   };
-
   var isVirtualScrollerDisabled = function isVirtualScrollerDisabled() {
     return ObjectUtils.isEmpty(props.virtualScrollerOptions) || !props.scrollable;
   };
-
   var isEquals = function isEquals(data1, data2) {
     return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
   };
-
   var hasFilter = function hasFilter() {
     return ObjectUtils.isNotEmpty(getFilters()) || props.globalFilter;
   };
-
   var getFirst = function getFirst() {
     return props.onPage ? props.first : firstState;
   };
-
   var getRows = function getRows() {
     return props.onPage ? props.rows : rowsState;
   };
-
   var getSortField = function getSortField() {
     return props.onSort ? props.sortField : sortFieldState;
   };
-
   var getSortOrder = function getSortOrder() {
     return props.onSort ? props.sortOrder : sortOrderState;
   };
-
   var getMultiSortMeta = function getMultiSortMeta() {
     return (props.onSort ? props.multiSortMeta : multiSortMetaState) || [];
   };
-
   var getFilters = function getFilters() {
     return props.onFilter ? props.filters : filtersState;
   };
-
   var getColumnProp = function getColumnProp(col, prop) {
     return col.props[prop];
   };
-
   var getColumns = function getColumns(ignoreReorderable) {
     var columns = React.Children.toArray(props.children);
-
     if (!columns) {
       return null;
     }
-
     if (!ignoreReorderable && props.reorderableColumns && columnOrderState) {
       var orderedColumns = columnOrderState.reduce(function (arr, columnKey) {
         var column = findColumnByKey(columns, columnKey);
@@ -4268,95 +3734,72 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return orderedColumns.indexOf(col) < 0;
       })));
     }
-
     return columns;
   };
-
   var getStorage = function getStorage() {
     switch (props.stateStorage) {
       case 'local':
         return window.localStorage;
-
       case 'session':
         return window.sessionStorage;
-
       case 'custom':
         return null;
-
       default:
         throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
     }
   };
-
   var saveState = function saveState() {
     var state = {};
-
     if (props.paginator) {
       state.first = getFirst();
       state.rows = getRows();
     }
-
     var sortField = getSortField();
-
     if (sortField) {
       state.sortField = sortField;
       state.sortOrder = getSortOrder();
     }
-
     var multiSortMeta = getMultiSortMeta();
-
     if (multiSortMeta) {
       state.multiSortMeta = multiSortMeta;
     }
-
     if (hasFilter()) {
       state.filters = getFilters();
     }
-
     if (props.resizableColumns) {
       saveColumnWidths(state);
     }
-
     if (props.reorderableColumns) {
       state.columnOrder = columnOrderState;
     }
-
     if (props.expandedRows) {
       state.expandedRows = props.expandedRows;
     }
-
     if (props.selection && props.onSelectionChange) {
       state.selection = props.selection;
     }
-
     if (isCustomStateStorage()) {
       if (props.customSaveState) {
         props.customSaveState(state);
       }
     } else {
       var storage = getStorage();
-
       if (ObjectUtils.isNotEmpty(state)) {
         storage.setItem(props.stateKey, JSON.stringify(state));
       }
     }
-
     if (props.onStateSave) {
       props.onStateSave(state);
     }
   };
-
   var clearState = function clearState() {
     var storage = getStorage();
-
     if (storage && props.stateKey) {
       storage.removeItem(props.stateKey);
     }
   };
-
   var restoreState = function restoreState() {
     var restoredState = {};
-
     if (isCustomStateStorage()) {
       if (props.customRestoreState) {
         restoredState = props.customRestoreState();
@@ -4365,26 +3808,20 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var storage = getStorage();
       var stateString = storage.getItem(props.stateKey);
       var dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
-
       var reviver = function reviver(key, value) {
         return typeof value === 'string' && dateFormat.test(value) ? new Date(value) : value;
       };
-
       if (stateString) {
         restoredState = JSON.parse(stateString, reviver);
       }
     }
-
     _restoreState(restoredState);
   };
-
   var restoreTableState = function restoreTableState(restoredState) {
     _restoreState(restoredState);
   };
-
   var _restoreState = function _restoreState() {
     var restoredState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
     if (ObjectUtils.isNotEmpty(restoredState)) {
       if (props.paginator) {
         if (props.onPage) {
@@ -4399,14 +3836,12 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
               pageCount: pageCount
             };
           };
-
           props.onPage(createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
         } else {
           setFirstState(restoredState.first);
           setRowsState(restoredState.rows);
         }
       }
-
       if (restoredState.sortField) {
         if (props.onSort) {
           props.onSort(createEvent({
@@ -4418,7 +3853,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
           setSortOrderState(restoredState.sortOrder);
         }
       }
-
       if (restoredState.multiSortMeta) {
         if (props.onSort) {
           props.onSort(createEvent({
@@ -4428,10 +3862,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
           setMultiSortMetaState(restoredState.multiSortMeta);
         }
       }
-
       if (restoredState.filters) {
         setD_filtersState(cloneFilters(restoredState.filters));
-
         if (props.onFilter) {
           props.onFilter(createEvent({
             filters: restoredState.filters
@@ -4440,35 +3872,29 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
           setFiltersState(cloneFilters(restoredState.filters));
         }
       }
-
       if (props.resizableColumns) {
         columnWidthsState.current = restoredState.columnWidths;
         tableWidthState.current = restoredState.tableWidth;
         restoreColumnWidths();
       }
-
       if (props.reorderableColumns) {
         setColumnOrderState(restoredState.columnOrder);
       }
-
       if (restoredState.expandedRows && props.onRowToggle) {
         props.onRowToggle({
           data: restoredState.expandedRows
         });
       }
-
       if (restoredState.selection && props.onSelectionChange) {
         props.onSelectionChange({
           value: restoredState.selection
         });
       }
-
       if (props.onStateRestore) {
         props.onStateRestore(restoredState);
       }
     }
   };
-
   var saveColumnWidths = function saveColumnWidths(state) {
     var widths = [];
     var headers = DomHandler.find(elementRef.current, '.p-datatable-thead > tr > th');
@@ -4476,22 +3902,18 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return widths.push(DomHandler.getOuterWidth(header));
     });
     state.columnWidths = widths.join(',');
-
     if (props.columnResizeMode === 'expand') {
       state.tableWidth = DomHandler.getOuterWidth(tableRef.current) + 'px';
     }
   };
-
   var restoreColumnWidths = function restoreColumnWidths() {
     if (columnWidthsState.current) {
       var widths = columnWidthsState.current.split(',');
-
       if (props.columnResizeMode === 'expand' && tableWidthState.current) {
         tableRef.current.style.width = tableWidthState.current;
         tableRef.current.style.minWidth = tableWidthState.current;
         elementRef.current.style.width = tableWidthState.current;
       }
-
       if (ObjectUtils.isNotEmpty(widths)) {
         createStyleElement();
         var innerHTML = '';
@@ -4503,26 +3925,21 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
   };
-
   var findParentHeader = function findParentHeader(element) {
     if (element.nodeName === 'TH') {
       return element;
     } else {
       var parent = element.parentElement;
-
       while (parent.nodeName !== 'TH') {
         parent = parent.parentElement;
         if (!parent) break;
       }
-
       return parent;
     }
   };
-
   var getGroupRowSortField = function getGroupRowSortField() {
     return props.sortMode === 'single' ? props.sortField : groupRowsSortMetaState ? groupRowsSortMetaState.field : null;
   };
-
   var getSelectableData = function getSelectableData(val) {
     if (props.showSelectionElement || props.isDataSelectable) {
       return val.filter(function (data, index) {
@@ -4538,17 +3955,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return isSelectable;
       });
     }
-
     return val;
   };
-
   var allRowsSelected = function allRowsSelected(processedData) {
     if (props.onSelectAllChange) {
       return props.selectAll;
     } else {
       var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
-
-      var val = props.frozenValue ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
+      var val = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
       var selectableVal = getSelectableData(val);
       return selectableVal && props.selection && selectableVal.every(function (sv) {
         return props.selection.some(function (s) {
@@ -4557,7 +3971,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
     }
   };
-
   var getSelectionModeInColumn = function getSelectionModeInColumn(columns) {
     if (columns) {
       var col = columns.find(function (c) {
@@ -4565,31 +3978,24 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
       return col ? col.props.selectionMode : null;
     }
-
     return null;
   };
-
   var findColumnByKey = function findColumnByKey(columns, key) {
     return ObjectUtils.isNotEmpty(columns) ? columns.find(function (col) {
       return col.props.columnKey === key || col.props.field === key;
     }) : null;
   };
-
   var getTotalRecords = function getTotalRecords(data) {
     return props.lazy ? props.totalRecords : data ? data.length : 0;
   };
-
   var onEditingMetaChange = function onEditingMetaChange(e) {
     var rowData = e.rowData,
-        field = e.field,
-        editingKey = e.editingKey;
-        e.rowIndex;
-        var editing = e.editing;
-
+      field = e.field,
+      editingKey = e.editingKey;
+      e.rowIndex;
+      var editing = e.editing;
     var editingMeta = _objectSpread({}, editingMetaState);
-
     var meta = editingMeta[editingKey];
-
     if (editing) {
       !meta && (meta = editingMeta[editingKey] = {
         data: _objectSpread({}, rowData),
@@ -4602,19 +4008,16 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
       !fields.length ? delete editingMeta[editingKey] : meta['fields'] = fields;
     }
-
     setEditingMetaState(editingMeta);
   };
-
   var clearEditingMetaData = function clearEditingMetaData() {
     if (props.editMode && ObjectUtils.isNotEmpty(editingMetaState)) {
       setEditingMetaState({});
     }
   };
-
   var onColumnResizeStart = function onColumnResizeStart(e) {
     var event = e.originalEvent,
-        column = e.column;
+      column = e.column;
     var containerLeft = DomHandler.getOffset(elementRef.current).left;
     resizeColumn.current = column;
     resizeColumnElement.current = event.currentTarget.parentElement;
@@ -4622,7 +4025,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     lastResizeHelperX.current = event.pageX - containerLeft + elementRef.current.scrollLeft;
     bindColumnResizeEvents();
   };
-
   var onColumnResize = function onColumnResize(event) {
     var containerLeft = DomHandler.getOffset(elementRef.current).left;
     DomHandler.addClass(elementRef.current, 'p-unselectable-text');
@@ -4631,42 +4033,33 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     resizeHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
     resizeHelperRef.current.style.display = 'block';
   };
-
   var onColumnResizeEnd = function onColumnResizeEnd() {
     var delta = resizeHelperRef.current.offsetLeft - lastResizeHelperX.current;
     var columnWidth = resizeColumnElement.current.offsetWidth;
     var newColumnWidth = columnWidth + delta;
     var minWidth = resizeColumnElement.current.style.minWidth || 15;
-
     if (columnWidth + delta > parseInt(minWidth, 10)) {
       if (props.columnResizeMode === 'fit') {
         var nextColumn = resizeColumnElement.current.nextElementSibling;
         var nextColumnWidth = nextColumn.offsetWidth - delta;
-
         if (newColumnWidth > 15 && nextColumnWidth > 15) {
           resizeTableCells(newColumnWidth, nextColumnWidth);
         }
       } else if (props.columnResizeMode === 'expand') {
         var tableWidth = tableRef.current.offsetWidth + delta + 'px';
-
         var updateTableWidth = function updateTableWidth(el) {
           !!el && (el.style.width = el.style.minWidth = tableWidth);
         };
-
         updateTableWidth(tableRef.current);
-
         if (!isVirtualScrollerDisabled()) {
           updateTableWidth(bodyRef.current);
           updateTableWidth(frozenBodyRef.current);
-
           if (wrapperRef.current) {
             updateTableWidth(DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller-content'));
           }
         }
-
         resizeTableCells(newColumnWidth);
       }
-
       if (props.onColumnResizeEnd) {
         props.onColumnResizeEnd({
           element: resizeColumnElement.current,
@@ -4674,19 +4067,16 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
           delta: delta
         });
       }
-
       if (isStateful()) {
         saveState();
       }
     }
-
     resizeHelperRef.current.style.display = 'none';
     resizeColumn.current = null;
     resizeColumnElement.current = null;
     DomHandler.removeClass(elementRef.current, 'p-unselectable-text');
     unbindColumnResizeEvents();
   };
-
   var resizeTableCells = function resizeTableCells(newColumnWidth, nextColumnWidth) {
     var widths = [];
     var colIndex = DomHandler.index(resizeColumnElement.current);
@@ -4704,44 +4094,36 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     styleElement.current.innerHTML = innerHTML;
   };
-
   var bindColumnResizeEvents = function bindColumnResizeEvents() {
     bindDocumentMouseMoveListener();
     bindDocumentMouseUpListener();
   };
-
   var unbindColumnResizeEvents = function unbindColumnResizeEvents() {
     unbindDocumentMouseMoveListener();
     unbindDocumentMouseUpListener();
   };
-
   var onColumnHeaderMouseDown = function onColumnHeaderMouseDown(e) {
     DomHandler.clearSelection();
     var event = e.originalEvent,
-        column = e.column;
-
+      column = e.column;
     if (props.reorderableColumns && getColumnProp(column, 'reorderable') !== false && !getColumnProp(column, 'frozen')) {
       if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true;
     }
   };
-
   var onColumnHeaderCheckboxChange = function onColumnHeaderCheckboxChange(e, processedData) {
     if (props.onSelectAllChange) {
       props.onSelectAllChange(e);
     } else {
       var originalEvent = e.originalEvent,
-          checked = e.checked;
-
+        checked = e.checked;
       var _data2 = props.selectionPageOnly ? dataToRender(processedData) : processedData;
-
       var selection = props.selectionPageOnly && props.selection ? props.selection.filter(function (s) {
         return !_data2.some(function (d) {
           return isEquals(s, d);
         });
       }) : [];
-
       if (checked) {
-        selection = props.frozenValue ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
+        selection = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
         selection = getSelectableData(selection);
         props.onAllRowsSelect && props.onAllRowsSelect({
           originalEvent: originalEvent,
@@ -4755,7 +4137,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
           type: 'all'
         });
       }
-
       if (props.onSelectionChange) {
         props.onSelectionChange({
           originalEvent: originalEvent,
@@ -4765,16 +4146,13 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
   };
-
   var onColumnHeaderDragStart = function onColumnHeaderDragStart(e) {
     var event = e.originalEvent,
-        column = e.column;
-
+      column = e.column;
     if (columnResizing.current) {
       event.preventDefault();
       return;
     }
-
     if (!props.reorderableColumns) return;
     colReorderIconWidth.current = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
     colReorderIconHeight.current = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
@@ -4785,12 +4163,10 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var onColumnHeaderDragOver = function onColumnHeaderDragOver(e) {
     var event = e.originalEvent,
-        column = e.column;
+      column = e.column;
     var dropHeader = findParentHeader(event.currentTarget);
-
     if (props.reorderableColumns && draggedColumnElement.current && dropHeader && !getColumnProp(column, 'frozen')) {
       event.preventDefault();
-
       if (draggedColumnElement.current !== dropHeader) {
         var containerOffset = DomHandler.getOffset(elementRef.current);
         var dropHeaderOffset = DomHandler.getOffset(dropHeader);
@@ -4798,7 +4174,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
         reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (colReorderIconHeight.current - 1) + 'px';
         reorderIndicatorDownRef.current.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
-
         if (event.pageX > columnCenter) {
           reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
           reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
@@ -4808,69 +4183,53 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
           reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
           dropPosition.current = -1;
         }
-
         reorderIndicatorUpRef.current.style.display = 'block';
         reorderIndicatorDownRef.current.style.display = 'block';
       }
     }
   };
-
   var onColumnHeaderDragLeave = function onColumnHeaderDragLeave(e) {
     var event = e.originalEvent;
-
     if (props.reorderableColumns && draggedColumnElement.current) {
       event.preventDefault();
       reorderIndicatorUpRef.current.style.display = 'none';
       reorderIndicatorDownRef.current.style.display = 'none';
     }
   };
-
   var onColumnHeaderDrop = function onColumnHeaderDrop(e) {
     var event = e.originalEvent,
-        column = e.column;
+      column = e.column;
     event.preventDefault();
-
     if (draggedColumnElement.current) {
       var dragIndex = DomHandler.index(draggedColumnElement.current);
       var dropIndex = DomHandler.index(findParentHeader(event.currentTarget));
       var allowDrop = dragIndex !== dropIndex;
-
       if (allowDrop && (dropIndex - dragIndex === 1 && dropPosition.current === -1 || dragIndex - dropIndex === 1 && dropPosition.current === 1)) {
         allowDrop = false;
       }
-
       if (allowDrop) {
         var _columns = getColumns();
-
         var isSameColumn = function isSameColumn(col1, col2) {
           return col1.props.columnKey || col2.props.columnKey ? ObjectUtils.equals(col1.props, col2.props, 'columnKey') : ObjectUtils.equals(col1.props, col2.props, 'field');
         };
-
         var dragColIndex = _columns.findIndex(function (child) {
           return isSameColumn(child, draggedColumn.current);
         });
-
         var dropColIndex = _columns.findIndex(function (child) {
           return isSameColumn(child, column);
         });
-
         if (dropColIndex < dragColIndex && dropPosition.current === 1) {
           dropColIndex++;
         }
-
         if (dropColIndex > dragColIndex && dropPosition.current === -1) {
           dropColIndex--;
         }
-
         ObjectUtils.reorderArray(_columns, dragColIndex, dropColIndex);
-
         var columnOrder = _columns.reduce(function (orders, col) {
           orders.push(col.props.columnKey || col.props.field);
           return orders;
         }, []);
-
         setColumnOrderState(columnOrder);
-
         if (props.onColReorder) {
           props.onColReorder({
             originalEvent: event,
@@ -4880,7 +4239,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
           });
         }
       }
-
       reorderIndicatorUpRef.current.style.display = 'none';
       reorderIndicatorDownRef.current.style.display = 'none';
       draggedColumnElement.current.draggable = false;
@@ -4889,11 +4247,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dropPosition.current = null;
     }
   };
-
   var createStyleElement = function createStyleElement() {
     styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
   };
-
   var createResponsiveStyle = function createResponsiveStyle() {
     if (!responsiveStyleElement.current) {
       responsiveStyleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
@@ -4901,35 +4257,29 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       responsiveStyleElement.current.innerHTML = innerHTML;
     }
   };
-
   var destroyResponsiveStyle = function destroyResponsiveStyle() {
     responsiveStyleElement.current = DomHandler.removeInlineStyle(responsiveStyleElement.current);
   };
-
   var destroyStyleElement = function destroyStyleElement() {
     styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
   };
-
   var onPageChange = function onPageChange(e) {
     clearEditingMetaData();
-
     if (props.onPage) {
       props.onPage(createEvent(e));
     } else {
       setFirstState(e.first);
       setRowsState(e.rows);
     }
-
     if (props.onValueChange) {
       props.onValueChange(processedData());
     }
   };
-
   var onSortChange = function onSortChange(e) {
     clearEditingMetaData();
     var event = e.originalEvent,
-        column = e.column,
-        sortableDisabledFields = e.sortableDisabledFields;
+      column = e.column,
+      sortableDisabledFields = e.sortableDisabledFields;
     var sortField = column.props.sortField || column.props.field;
     var sortOrder = props.defaultSortOrder;
     var multiSortMeta;
@@ -4937,7 +4287,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     columnSortable.current = column.props.sortable;
     columnSortFunction.current = column.props.sortFunction;
     columnField.current = sortField;
-
     if (props.sortMode === 'multiple') {
       var metaKey = event.metaKey || event.ctrlKey;
       multiSortMeta = _toConsumableArray(getMultiSortMeta());
@@ -4949,7 +4298,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         field: sortField,
         order: sortOrder
       };
-
       if (sortOrder) {
         multiSortMeta = metaKey ? multiSortMeta : multiSortMeta.filter(function (meta) {
           return sortableDisabledFields.some(function (field) {
@@ -4960,23 +4308,19 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       } else if (props.removableSort) {
         removeSortMeta(newMetaData, multiSortMeta);
       }
-
       eventMeta = {
         multiSortMeta: multiSortMeta
       };
     } else {
       sortOrder = getSortField() === sortField ? getCalculatedSortOrder(getSortOrder()) : sortOrder;
-
       if (props.removableSort) {
         sortField = sortOrder ? sortField : null;
       }
-
       eventMeta = {
         sortField: sortField,
         sortOrder: sortOrder
       };
     }
-
     if (props.onSort) {
       props.onSort(createEvent(eventMeta));
     } else {
@@ -4985,7 +4329,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setSortOrderState(eventMeta.sortOrder);
       setMultiSortMetaState(eventMeta.multiSortMeta);
     }
-
     if (props.onValueChange) {
       props.onValueChange(processedData({
         sortField: sortField,
@@ -4994,34 +4337,27 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }));
     }
   };
-
   var getCalculatedSortOrder = function getCalculatedSortOrder(currentOrder) {
     return props.removableSort ? props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
   };
-
   var compareValuesOnSort = function compareValuesOnSort(value1, value2, order) {
     return ObjectUtils.sort(value1, value2, order, PrimeReact.locale, PrimeReact.nullSortOrder);
   };
-
   var addSortMeta = function addSortMeta(meta, multiSortMeta) {
     var index = multiSortMeta.findIndex(function (sortMeta) {
       return sortMeta.field === meta.field;
     });
     if (index >= 0) multiSortMeta[index] = meta;else multiSortMeta.push(meta);
   };
-
   var removeSortMeta = function removeSortMeta(meta, multiSortMeta) {
     var index = multiSortMeta.findIndex(function (sortMeta) {
       return sortMeta.field === meta.field;
     });
-
     if (index >= 0) {
       multiSortMeta.splice(index, 1);
     }
-
     multiSortMeta = multiSortMeta.length > 0 ? multiSortMeta : null;
   };
-
   var sortSingle = function sortSingle(data, field, order) {
     if (props.groupRowsBy && props.groupRowsBy === props.sortField) {
       var multiSortMeta = [{
@@ -5034,9 +4370,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
       return sortMultiple(data, multiSortMeta);
     }
-
     var value = _toConsumableArray(data);
-
     if (columnSortable.current && columnSortFunction.current) {
       value = columnSortFunction.current({
         data: data,
@@ -5050,29 +4384,22 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return compareValuesOnSort(value1, value2, order);
       });
     }
-
     return value;
   };
-
   var sortMultiple = function sortMultiple(data) {
     var multiSortMeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
     if (props.groupRowsBy && (groupRowsSortMetaState || multiSortMeta.length && props.groupRowsBy === multiSortMeta[0].field)) {
       var groupRowsSortMeta = groupRowsSortMetaState;
       var firstSortMeta = multiSortMeta[0];
-
       if (!groupRowsSortMeta) {
         groupRowsSortMeta = firstSortMeta;
         setGroupRowsSortMetaState(groupRowsSortMeta);
       }
-
       if (firstSortMeta.field !== groupRowsSortMeta.field) {
         multiSortMeta = [groupRowsSortMeta].concat(_toConsumableArray(multiSortMeta));
       }
     }
-
     var value = _toConsumableArray(data);
-
     if (columnSortable.current && columnSortFunction.current) {
       var meta = multiSortMeta.find(function (meta) {
         return meta.field === columnField.current;
@@ -5090,31 +4417,26 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return multisortField(data1, data2, multiSortMeta, 0);
       });
     }
-
     return value;
   };
-
   var multisortField = function multisortField(data1, data2, multiSortMeta, index) {
     var value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
-    var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field); // check if they are equal handling dates and locales
+    var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
 
+    // check if they are equal handling dates and locales
     if (ObjectUtils.compare(value1, value2, PrimeReact.locale) === 0) {
       return multiSortMeta.length - 1 > index ? multisortField(data1, data2, multiSortMeta, index + 1) : 0;
     }
-
     return compareValuesOnSort(value1, value2, multiSortMeta[index].order);
   };
-
   var onFilterChange = function onFilterChange(filters) {
     clearEditingMetaData();
     setD_filtersState(filters);
   };
-
   var onFilterApply = function onFilterApply(filtersToApply) {
     clearTimeout(filterTimeout.current);
     filterTimeout.current = setTimeout(function () {
       var filters = cloneFilters(filtersToApply || d_filtersState);
-
       if (props.onFilter) {
         props.onFilter(createEvent({
           filters: filters
@@ -5123,7 +4445,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         setFirstState(0);
         setFiltersState(filters);
       }
-
       if (props.onValueChange) {
         props.onValueChange(processedData({
           filters: filters
@@ -5131,7 +4452,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }, props.filterDelay);
   };
-
   var filterLocal = function filterLocal(data, filters) {
     if (!data) return;
     filters = filters || {};
@@ -5139,7 +4459,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var filteredValue = [];
     var isGlobalFilter = filters['global'] || props.globalFilter;
     var globalFilterFieldsArray;
-
     if (isGlobalFilter) {
       globalFilterFieldsArray = props.globalFilterFields || columns.filter(function (col) {
         return !col.props.excludeGlobalFilter;
@@ -5147,23 +4466,22 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return col.props.filterField || col.props.field;
       });
     }
-
     for (var i = 0; i < data.length; i++) {
       var localMatch = true;
       var globalMatch = false;
       var localFiltered = false;
-
       for (var prop in filters) {
+        if (prop === 'null') {
+          continue;
+        }
         if (Object.prototype.hasOwnProperty.call(filters, prop) && prop !== 'global') {
           localFiltered = true;
           var filterField = prop;
           var filterMeta = filters[filterField];
-
           if (filterMeta.operator) {
             for (var j = 0; j < filterMeta.constraints.length; j++) {
               var filterConstraint = filterMeta.constraints[j];
               localMatch = executeLocalFilter(filterField, data[i], filterConstraint, j);
-
               if (filterMeta.operator === FilterOperator.OR && localMatch || filterMeta.operator === FilterOperator.AND && !localMatch) {
                 break;
               }
@@ -5171,46 +4489,37 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
           } else {
             localMatch = executeLocalFilter(filterField, data[i], filterMeta, 0);
           }
-
           if (!localMatch) {
             break;
           }
         }
       }
-
       if (isGlobalFilter && !globalMatch && globalFilterFieldsArray) {
         for (var _j = 0; _j < globalFilterFieldsArray.length; _j++) {
           var globalFilterField = globalFilterFieldsArray[_j];
           var matchMode = filters['global'] ? filters['global'].matchMode : props.globalFilterMatchMode;
           var value = filters['global'] ? filters['global'].value : props.globalFilter;
           globalMatch = FilterService.filters[matchMode](ObjectUtils.resolveFieldData(data[i], globalFilterField), value, props.filterLocale);
-
           if (globalMatch) {
             break;
           }
         }
       }
-
       var matches = void 0;
-
       if (isGlobalFilter) {
         matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
       } else {
         matches = localFiltered && localMatch;
       }
-
       if (matches) {
         filteredValue.push(data[i]);
       }
     }
-
     if (filteredValue.length === props.value.length) {
       filteredValue = data;
     }
-
     return filteredValue;
   };
-
   var executeLocalFilter = function executeLocalFilter(field, rowData, filterMeta, index) {
     var filterValue = filterMeta.value;
     var filterMatchMode = filterMeta.matchMode === 'custom' ? "custom_".concat(field) : filterMeta.matchMode || FilterMatchMode.STARTS_WITH;
@@ -5218,17 +4527,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var filterConstraint = FilterService.filters[filterMatchMode];
     return ObjectUtils.isFunction(filterConstraint) && filterConstraint(dataFieldValue, filterValue, props.filterLocale, index);
   };
-
   var cloneFilters = function cloneFilters(filters) {
     filters = filters || props.filters;
     var cloned = {};
-
     if (filters) {
       Object.entries(filters).forEach(function (_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
-            prop = _ref2[0],
-            value = _ref2[1];
-
+          prop = _ref2[0],
+          value = _ref2[1];
         cloned[prop] = value.operator ? {
           operator: value.operator,
           constraints: value.constraints.map(function (constraint) {
@@ -5238,7 +4544,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
     } else {
       var _columns2 = getColumns();
-
       cloned = _columns2.reduce(function (filters, col) {
         var field = col.props.filterField || col.props.field;
         var filterFunction = col.props.filterFunction;
@@ -5248,19 +4553,16 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
           value: null,
           matchMode: matchMode
         };
-
         if (filterFunction) {
           FilterService.register("custom_".concat(field), function () {
             for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
               args[_key] = arguments[_key];
             }
-
             return filterFunction.apply(void 0, args.concat([{
               column: col
             }]));
           });
         }
-
         filters[field] = props.filterDisplay === 'menu' ? {
           operator: FilterOperator.AND,
           constraints: [constraint]
@@ -5268,15 +4570,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return filters;
       }, {});
     }
-
     return cloned;
   };
-
   var filter = function filter(value, field, matchMode) {
     var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-
     var filters = _objectSpread({}, d_filtersState);
-
     var meta = filters[field];
     var constraint = meta && meta.operator ? meta.constraints[index] : meta;
     constraint = meta ? {
@@ -5290,91 +4588,77 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setD_filtersState(filters);
     onFilterApply(filters);
   };
-
   var reset = function reset() {
     setD_rowsState(props.rows);
     setD_filtersState(cloneFilters(props.filters));
     setGroupRowsSortMetaState(null);
     setEditingMetaState({});
-
     if (!props.onPage) {
       setFirstState(props.first);
       setRowsState(props.rows);
     }
-
     if (!props.onSort) {
       setSortFieldState(props.sortField);
       setSortOrderState(props.sortOrder);
       setMultiSortMetaState(props.multiSortMeta);
     }
-
     if (!props.onFilter) {
       setFiltersState(props.filters);
     }
-
     resetColumnOrder();
   };
-
   var resetScroll = function resetScroll() {
     if (wrapperRef.current) {
       var scrollableContainer = !isVirtualScrollerDisabled() ? DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller') : wrapperRef.current;
       scrollableContainer.scrollTo(0, 0);
     }
   };
-
   var resetColumnOrder = function resetColumnOrder() {
     var columns = getColumns(true);
     var columnOrder = [];
-
     if (columns) {
       columnOrder = columns.reduce(function (orders, col) {
         orders.push(col.props.columnKey || col.props.field);
         return orders;
       }, []);
     }
-
     setColumnOrderState(columnOrder);
   };
-
   var exportCSV = function exportCSV(options) {
     var data;
     var csv = "\uFEFF";
     var columns = getColumns();
-
     if (options && options.selectionOnly) {
       data = props.selection || [];
     } else {
       data = [].concat(_toConsumableArray(props.frozenValue || []), _toConsumableArray(processedData() || []));
-    } //headers
-
+    }
 
+    //headers
     columns.forEach(function (column, i) {
       var _column$props = column.props,
-          field = _column$props.field,
-          header = _column$props.header,
-          exportable = _column$props.exportable;
-
+        field = _column$props.field,
+        header = _column$props.header,
+        exportable = _column$props.exportable;
       if (exportable && field) {
         csv += '"' + (header || field) + '"';
-
         if (i < columns.length - 1) {
           csv += props.csvSeparator;
         }
       }
-    }); //body
+    });
 
+    //body
     data.forEach(function (record) {
       csv += '\n';
       columns.forEach(function (column, i) {
         var _column$props2 = column.props,
-            colField = _column$props2.field,
-            exportField = _column$props2.exportField,
-            exportable = _column$props2.exportable;
+          colField = _column$props2.field,
+          exportField = _column$props2.exportField,
+          exportable = _column$props2.exportable;
         var field = exportField || colField;
-
         if (exportable && field) {
           var cellData = ObjectUtils.resolveFieldData(record, field);
-
           if (cellData != null) {
             cellData = props.exportFunction ? props.exportFunction({
               data: cellData,
@@ -5383,9 +4667,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
               column: column
             }) : String(cellData).replace(/"/g, '""');
           } else cellData = '';
-
           csv += '"' + cellData + '"';
-
           if (i < columns.length - 1) {
             csv += props.csvSeparator;
           }
@@ -5394,13 +4676,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     DomHandler.exportCSV(csv, props.exportFilename);
   };
-
   var closeEditingCell = function closeEditingCell() {
     if (props.editMode !== 'row') {
       document.body.click();
     }
   };
-
   var createEvent = function createEvent(event) {
     return _objectSpread({
       first: getFirst(),
@@ -5411,58 +4691,45 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       filters: getFilters()
     }, event);
   };
-
   var processedData = function processedData(localState) {
     var data = props.value || [];
-
     if (!props.lazy) {
       if (data && data.length) {
         var filters = localState && localState.filters || getFilters();
         var sortField = localState && localState.sortField || getSortField();
         var sortOrder = localState && localState.sortOrder || getSortOrder();
         var multiSortMeta = localState && localState.multiSortMeta || getMultiSortMeta();
-
         var _columns3 = getColumns();
-
         var sortColumn = _columns3.find(function (col) {
           return col.props.field === sortField;
         });
-
         if (sortColumn) {
           columnSortable.current = sortColumn.props.sortable;
           columnSortFunction.current = sortColumn.props.sortFunction;
         }
-
         if (ObjectUtils.isNotEmpty(filters) || props.globalFilter) {
           data = filterLocal(data, filters);
         }
-
         if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
           if (props.sortMode === 'single') data = sortSingle(data, sortField, sortOrder);else if (props.sortMode === 'multiple') data = sortMultiple(data, multiSortMeta);
         }
       }
     }
-
     return data;
   };
-
   var dataToRender = function dataToRender(data) {
     if (data && props.paginator) {
       var first = props.lazy ? 0 : getFirst();
       return data.slice(first, first + getRows());
     }
-
     return data;
   };
-
   useMountEffect(function () {
     setAttributeSelectorState(UniqueComponentId());
     setFiltersState(cloneFilters(props.filters));
     setD_filtersState(cloneFilters(props.filters));
-
     if (isStateful()) {
       restoreState();
-
       if (props.resizableColumns) {
         restoreColumnWidths();
       }
@@ -5470,14 +4737,19 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   useUpdateEffect(function () {
     elementRef.current.setAttribute(attributeSelectorState, '');
-
     if (props.responsiveLayout === 'stack' && !props.scrollable) {
       createResponsiveStyle();
     }
   }, [attributeSelectorState]);
   useUpdateEffect(function () {
-    setFiltersState(cloneFilters(props.filters));
+    var filters = cloneFilters(props.filters);
+    setFiltersState(filters);
     setD_filtersState(cloneFilters(props.filters));
+    if (props.onValueChange) {
+      props.onValueChange(processedData({
+        filters: filters
+      }));
+    }
   }, [props.filters]);
   useUpdateEffect(function () {
     if (isStateful()) {
@@ -5486,16 +4758,18 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   useUpdateEffect(function () {
     destroyResponsiveStyle();
-
     if (props.responsiveLayout === 'stack' && !props.scrollable) {
       createResponsiveStyle();
     }
-  }, [props.responsiveLayout]);
+  }, [props.responsiveLayout, props.scrollable]);
   useUpdateEffect(function () {
     if (props.globalFilter) {
       filter(props.globalFilter, 'global', props.globalFilterMatchMode);
+    } else {
+      // #3819 was filtering but now reset filter state
+      setFiltersState(props.filters);
     }
-  }, [props.globalFilter]);
+  }, [props.globalFilter, props.globalFilterMatchMode]);
   useUnmountEffect(function () {
     unbindColumnResizeEvents();
     destroyStyleElement();
@@ -5526,7 +4800,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   });
-
   var createLoader = function createLoader() {
     if (props.loading) {
       var iconClassName = classNames('p-datatable-loading-icon pi-spin', props.loadingIcon);
@@ -5536,35 +4809,28 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         className: iconClassName
       }));
     }
-
     return null;
   };
-
   var createHeader = function createHeader() {
     if (props.header) {
       var _content = ObjectUtils.getJSXElement(props.header, {
         props: props
       });
-
       return /*#__PURE__*/React.createElement("div", {
         className: "p-datatable-header"
       }, _content);
     }
-
     return null;
   };
-
   var createTableHeader = function createTableHeader(options, empty) {
     var sortField = getSortField();
     var sortOrder = getSortOrder();
-
     var multiSortMeta = _toConsumableArray(getMultiSortMeta());
-
     var groupRowSortField = getGroupRowSortField();
     var filters = d_filtersState;
     var filtersStore = !props.onFilter && props.filters || getFilters();
     var processedData = options.items,
-        columns = options.columns;
+      columns = options.columns;
     return /*#__PURE__*/React.createElement(TableHeader, {
       value: processedData,
       tableProps: props,
@@ -5600,15 +4866,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       reorderableColumns: props.reorderableColumns
     });
   };
-
   var createTableBody = function createTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled) {
     var first = getFirst();
     var rows = options.rows,
-        columns = options.columns,
-        contentRef = options.contentRef,
-        className = options.className;
-        options.itemSize;
-    var frozenBody = props.frozenValue && /*#__PURE__*/React.createElement(TableBody, {
+      columns = options.columns,
+      contentRef = options.contentRef,
+      className = options.className;
+      options.itemSize;
+    var frozenBody = ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React.createElement(TableBody, {
       ref: frozenBodyRef,
       value: props.frozenValue,
       className: "p-datatable-frozen-tbody",
@@ -5623,6 +4888,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       tabIndex: props.tabIndex,
       onRowClick: props.onRowClick,
       onRowDoubleClick: props.onRowDoubleClick,
+      onRowMouseEnter: props.onRowMouseEnter,
+      onRowMouseLeave: props.onRowMouseLeave,
       onCellClick: props.onCellClick,
       selection: props.selection,
       onSelectionChange: props.onSelectionChange,
@@ -5693,6 +4960,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       tabIndex: props.tabIndex,
       onRowClick: props.onRowClick,
       onRowDoubleClick: props.onRowDoubleClick,
+      onRowMouseEnter: props.onRowMouseEnter,
+      onRowMouseLeave: props.onRowMouseLeave,
       onCellClick: props.onCellClick,
       selection: props.selection,
       onSelectionChange: props.onSelectionChange,
@@ -5750,7 +5019,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     return /*#__PURE__*/React.createElement(React.Fragment, null, frozenBody, body);
   };
-
   var createTableFooter = function createTableFooter(options) {
     var columns = options.columns;
     return /*#__PURE__*/React.createElement(TableFooter, {
@@ -5759,12 +5027,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       footerColumnGroup: props.footerColumnGroup
     });
   };
-
   var createContent = function createContent(processedData, columns, selectionModeInColumn, empty) {
     if (!columns) return;
-
     var _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
-
     var virtualScrollerOptions = props.virtualScrollerOptions || {};
     return /*#__PURE__*/React.createElement("div", {
       ref: wrapperRef,
@@ -5789,7 +5054,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
           tableRef.current = el;
           options.spacerRef && options.spacerRef(el);
         };
-
         var tableClassName = classNames('p-datatable-table', props.tableClassName);
         var tableHeader = createTableHeader(options, empty);
         var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled);
@@ -5803,21 +5067,17 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     })));
   };
-
   var createFooter = function createFooter() {
     if (props.footer) {
       var _content2 = ObjectUtils.getJSXElement(props.footer, {
         props: props
       });
-
       return /*#__PURE__*/React.createElement("div", {
         className: "p-datatable-footer"
       }, _content2);
     }
-
     return null;
   };
-
   var createPaginator = function createPaginator(position, totalRecords) {
     var className = classNames('p-paginator-' + position, props.paginatorClassName);
     return /*#__PURE__*/React.createElement(Paginator, {
@@ -5836,23 +5096,18 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dropdownAppendTo: props.paginatorDropdownAppendTo
     });
   };
-
   var createPaginatorTop = function createPaginatorTop(totalRecords) {
     if (props.paginator && props.paginatorPosition !== 'bottom') {
       return createPaginator('top', totalRecords);
     }
-
     return null;
   };
-
   var createPaginatorBottom = function createPaginatorBottom(totalRecords) {
     if (props.paginator && props.paginatorPosition !== 'top') {
       return createPaginator('bottom', totalRecords);
     }
-
     return null;
   };
-
   var createResizeHelper = function createResizeHelper() {
     if (props.resizableColumns) {
       return /*#__PURE__*/React.createElement("div", {
@@ -5863,10 +5118,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
       });
     }
-
     return null;
   };
-
   var createReorderIndicators = function createReorderIndicators() {
     if (props.reorderableColumns) {
       var style = {
@@ -5883,10 +5136,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         style: style
       }));
     }
-
     return null;
   };
-
   var data = processedData();
   var columns = getColumns();
   var totalRecords = getTotalRecords(data);
@@ -5996,6 +5247,8 @@ DataTable.defaultProps = {
   onFilter: null,
   onPage: null,
   onRowClick: null,
+  onRowMouseEnter: null,
+  onRowMouseLeave: null,
   onRowCollapse: null,
   onRowDoubleClick: null,
   onRowEditCancel: null,