primereact 10.9.3 → 10.9.5

package/datatable/datatable.esm.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { Fragment } from 'react';
 import PrimeReact$1, { FilterMatchMode as FilterMatchMode$1, PrimeReactContext, ariaLabel as ariaLabel$1, localeOption, FilterOperator, FilterService } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 import { ObjectUtils, classNames, DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from 'primereact/utils';
@@ -33,18 +33,13 @@ import { SortAmountDownIcon } from 'primereact/icons/sortamountdown';
 import { SortAmountUpAltIcon } from 'primereact/icons/sortamountupalt';
 
 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 _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
 
 function _typeof(o) {
@@ -57,70 +52,63 @@ function _typeof(o) {
   }, _typeof(o);
 }
 
-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;
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
 }
 
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
+function _defineProperty(e, r, t) {
+  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
 }
 
-function _arrayLikeToArray$1(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;
+function _arrayLikeToArray$1(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
 }
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray$1(r);
 }
 
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
 }
 
-function _unsupportedIterableToArray$1(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
+function _unsupportedIterableToArray$1(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0;
+  }
 }
 
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray$1(r) || _nonIterableSpread();
 }
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
 }
 
 function _iterableToArrayLimit(r, l) {
@@ -155,8 +143,8 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray$1(r, e) || _nonIterableRest();
 }
 
 var getStorage = function getStorage(stateStorageProp) {
@@ -622,33 +610,26 @@ var DataTableBase = ComponentBase.extend({
   }
 });
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  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];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
   }
-  return target;
+  return t;
 }
 
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
   if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
   }
-  return target;
+  return i;
 }
 
 var classes$1 = {
@@ -732,7 +713,7 @@ var Checkbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
     return props.checked === props.trueValue;
   };
   var _onChange = function onChange(event) {
-    if (props.disabled || props.readonly) {
+    if (props.disabled || props.readOnly) {
       return;
     }
     if (props.onChange) {
@@ -991,7 +972,7 @@ var RadioButton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
     onChange(event);
   };
   var onChange = function onChange(event) {
-    if (props.disabled || props.readonly) {
+    if (props.disabled || props.readOnly) {
       return;
     }
     if (props.onChange) {
@@ -1094,7 +1075,7 @@ var RadioButton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
       onBlur: onBlur,
       onChange: onChange,
       disabled: props.disabled,
-      readOnly: props.readonly,
+      readOnly: props.readOnly,
       required: props.required,
       tabIndex: props.tabIndex,
       className: cx('input')
@@ -1167,7 +1148,7 @@ RowRadioButton.displayName = 'RowRadioButton';
 
 function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var BodyCell = /*#__PURE__*/React.memo(function (props) {
+var Cell = function Cell(props) {
   var mergeProps = useMergeProps();
   var _React$useState = React.useState(props.editing),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -1195,13 +1176,9 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   var getColumnProp = function getColumnProp(name) {
     return ColumnBase.getCProp(props.column, name);
   };
-  var getColumnProps = function getColumnProps() {
-    return ColumnBase.getCProps(props.column);
-  };
   var getColumnPTOptions = function getColumnPTOptions(key) {
-    var cProps = getColumnProps();
     var columnMetaData = {
-      props: cProps,
+      props: props.cProps,
       parent: props.metaData,
       hostName: props.hostName,
       state: {
@@ -1217,10 +1194,8 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     };
     return mergeProps(ptm("column.".concat(key), {
       column: columnMetaData
-    }), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
+    }), ptm("column.".concat(key), columnMetaData), ptmo(props.cProps, key, columnMetaData));
   };
-  var field = getColumnProp('field') || "field_".concat(props.index);
-  var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
   var isEditable = function isEditable() {
     return ObjectUtils.isNotEmpty(props.editMode) && getColumnProp('editor');
   };
@@ -1245,34 +1220,22 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     _useEventListener2 = _slicedToArray(_useEventListener, 2),
     bindDocumentClickListener = _useEventListener2[0],
     unbindDocumentClickListener = _useEventListener2[1];
-  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 && (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);
+    return props.frozenCol ? Object.assign({}, columnStyle, bodyStyle, styleObjectState) : Object.assign({}, columnStyle, bodyStyle);
   };
   var getCellParams = function getCellParams() {
     return {
-      value: resolveFieldData(),
-      field: field,
+      value: props.resolveFieldData(),
+      field: props.field,
       rowData: props.rowData,
       rowIndex: props.rowIndex,
       cellIndex: props.index,
-      selected: isSelected(),
+      selected: props.isCellSelected,
       column: props.column,
       props: props
     };
@@ -1283,20 +1246,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       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');
@@ -1317,7 +1266,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   var switchCellToViewMode = function switchCellToViewMode(event, submit) {
     var callbackParams = getCellCallbackParams(event);
     var newRowData = _objectSpread$b({}, editingRowDataStateRef.current);
-    var newValue = resolveFieldData(newRowData);
+    var newValue = props.resolveFieldData(newRowData);
     var params = _objectSpread$b(_objectSpread$b({}, callbackParams), {}, {
       newRowData: newRowData,
       newValue: newValue
@@ -1342,128 +1291,20 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     }
     setEditingRowDataState(newRowData);
   };
-  var _findNextSelectableCell = function findNextSelectableCell(cell) {
-    var nextCell = cell.nextElementSibling;
-    return nextCell ? DomHandler.getAttribute(nextCell, 'data-p-selectable-cell') ? nextCell : _findNextSelectableCell(nextCell) : null;
-  };
-  var _findPrevSelectableCell = function findPrevSelectableCell(cell) {
-    var prevCell = cell.previousElementSibling;
-    return prevCell ? DomHandler.getAttribute(prevCell, 'data-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.getAttribute(downRow, 'data-p-selectable-row') && DomHandler.getAttribute(downCell, 'data-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.getAttribute(upRow, 'data-p-selectable-row') && DomHandler.getAttribute(upCell, 'data-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(focusTimeout.current);
-    focusTimeout.current = setTimeout(function () {
-      if (editingState) {
-        var focusableEl = props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
-        focusableEl && focusableEl.focus();
-      }
-      keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
-    }, 1);
-  };
-  var focusOnInit = function focusOnInit() {
-    clearTimeout(initFocusTimeout.current);
-    initFocusTimeout.current = setTimeout(function () {
-      var focusableEl = props.editMode === 'row' ? DomHandler.findSingle(elementRef.current, '[data-p-row-editor-init="true"]') : null;
-      focusableEl && focusableEl.focus();
-    }, 1);
-  };
-  var updateStickyPosition = function updateStickyPosition() {
-    if (getColumnProp('frozen')) {
-      var styleObject = _objectSpread$b({}, styleObjectState);
-      var align = getColumnProp('alignFrozen');
-      if (align === 'right') {
-        var right = 0;
-        var next = elementRef.current && elementRef.current.nextElementSibling;
-        if (next && next.classList.contains('p-frozen-column')) {
-          right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
-        }
-        styleObject.right = right + 'px';
-      } else {
-        var left = 0;
-        var prev = elementRef.current && elementRef.current.previousElementSibling;
-        if (prev && prev.classList.contains('p-frozen-column')) {
-          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$b({}, editingRowDataState);
-    ObjectUtils.mutateFieldData(editingRowData, field, val);
+    ObjectUtils.mutateFieldData(editingRowData, props.field, val);
     setEditingRowDataState(editingRowData);
 
     // update editing meta for complete methods on row mode
-    var currentData = getEditingRowData();
+    var currentData = props.getEditingRowData();
     if (currentData) {
-      ObjectUtils.mutateFieldData(currentData, field, val);
+      ObjectUtils.mutateFieldData(currentData, props.field, val);
     }
     editingRowDataStateRef.current = editingRowData;
   };
   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) {
-        // if user returns false do not show the editor
-        if (onBeforeCellEditShow(params) === false) {
-          return;
-        }
-
-        // if user prevents default stop the editor
-        if (event && event.defaultPrevented) {
-          return;
-        }
-      }
-
-      // 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) {
-          if (onCellEditInit(params) === false) {
-            return;
-          }
-
-          // if user prevents default stop the editor
-          if (event && event.defaultPrevented) {
-            return;
-          }
-        }
-        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);
-    }
+    props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, selfClick, props.column, bindDocumentClickListener, overlayEventListener);
   };
   var _onMouseDown = function onMouseDown(event) {
     var params = getCellCallbackParams(event);
@@ -1487,7 +1328,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         cell = event.currentTarget;
       switch (event.code) {
         case 'ArrowLeft':
-          var prevCell = _findPrevSelectableCell(cell);
+          var prevCell = props.findPrevSelectableCell(cell);
           if (prevCell) {
             changeTabIndex(cell, prevCell);
             prevCell.focus();
@@ -1495,7 +1336,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           event.preventDefault();
           break;
         case 'ArrowRight':
-          var nextCell = _findNextSelectableCell(cell);
+          var nextCell = props.findNextSelectableCell(cell);
           if (nextCell) {
             changeTabIndex(cell, nextCell);
             nextCell.focus();
@@ -1503,7 +1344,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           event.preventDefault();
           break;
         case 'ArrowUp':
-          var upCell = _findUpSelectableCell(cell);
+          var upCell = props.findUpSelectableCell(cell, index);
           if (upCell) {
             changeTabIndex(cell, upCell);
             upCell.focus();
@@ -1511,7 +1352,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           event.preventDefault();
           break;
         case 'ArrowDown':
-          var downCell = _findDownSelectableCell(cell);
+          var downCell = props.findDownSelectableCell(cell, index);
           if (downCell) {
             changeTabIndex(cell, downCell);
             downCell.focus();
@@ -1550,13 +1391,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       index: props.rowIndex
     });
   };
-  var onCheckboxChange = function onCheckboxChange(event) {
-    props.onCheckboxChange({
-      originalEvent: event,
-      data: props.rowData,
-      index: props.rowIndex
-    });
-  };
   var onRowToggle = function onRowToggle(event) {
     props.onRowToggle({
       originalEvent: event,
@@ -1569,8 +1403,8 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     props.onRowEditInit({
       originalEvent: event,
       data: props.rowData,
-      newData: getEditingRowData(),
-      field: field,
+      newData: props.getEditingRowData(),
+      field: props.field,
       index: props.rowIndex
     });
   };
@@ -1578,32 +1412,26 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     props.onRowEditSave({
       originalEvent: event,
       data: props.rowData,
-      newData: getEditingRowData(),
-      field: field,
+      newData: props.getEditingRowData(),
+      field: props.field,
       index: props.rowIndex
     });
-    focusOnInit();
+    props.focusOnInit(initFocusTimeout, elementRef);
   };
   var onRowEditCancel = function onRowEditCancel(event) {
     props.onRowEditCancel({
       originalEvent: event,
       data: props.rowData,
-      newData: getEditingRowData(),
-      field: field,
+      newData: props.getEditingRowData(),
+      field: props.field,
       index: props.rowIndex
     });
-    focusOnInit();
+    props.focusOnInit();
   };
   React.useEffect(function () {
-    if (getColumnProp('frozen')) {
-      updateStickyPosition();
-    }
-  });
-  React.useEffect(function () {
-    if (props.editMode === 'cell' || props.editMode === 'row') {
-      focusOnElement();
-    }
-  }, [props.editMode, props.editing, editingState]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (props.frozenCol) props.updateStickyPosition(elementRef, props.frozenCol, props.alignFrozenCol, styleObjectState, setStyleObjectState);
+    if (props.editMode === 'cell' || props.editMode === 'row') props.focusOnElement(focusTimeout, editingState, elementRef, keyHelperRef);
+  }, [props.editMode, props.editing, editingState, props.frozenCol, props.alignFrozenCol]); // eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(function () {
     if (props.editMode === 'row' && props.editing !== editingState) {
@@ -1612,7 +1440,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   }, [props.editMode, props.editing, editingState]);
   useUpdateEffect(function () {
     if (props.editMode === 'cell' || props.editMode === 'row') {
-      var editingRowData = getEditingRowData();
+      var editingRowData = props.getEditingRowData();
       setEditingRowDataState(editingRowData);
       editingRowDataStateRef.current = editingRowData;
     }
@@ -1622,7 +1450,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       var callbackParams = getCellCallbackParams();
       var params = _objectSpread$b(_objectSpread$b({}, callbackParams), {}, {
         editing: editingState,
-        editingKey: editingKey
+        editingKey: props.editingKey
       });
       props.onEditingMetaChange(params);
     }
@@ -1635,16 +1463,16 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     }
   });
   var createLoading = function createLoading() {
-    var options = getVirtualScrollerOption('getLoaderOptions')(props.rowIndex, {
+    var options = props.getVirtualScrollerOption('getLoaderOptions')(props.rowIndex, {
       cellIndex: props.index,
       cellFirst: props.index === 0,
-      cellLast: props.index === getVirtualScrollerOption('columns').length - 1,
+      cellLast: props.index === props.getVirtualScrollerOption('columns').length - 1,
       cellEven: props.index % 2 === 0,
       cellOdd: props.index % 2 !== 0,
       column: props.column,
-      field: field
+      field: props.field
     });
-    var content = ObjectUtils.getJSXElement(getVirtualScrollerOption('loadingTemplate'), options);
+    var content = ObjectUtils.getJSXElement(props.getVirtualScrollerOption('loadingTemplate'), options);
     var bodyCellProps = mergeProps(getColumnPTOptions('bodyCell'), {
       role: 'cell'
     });
@@ -1653,20 +1481,20 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   var createElement = function createElement() {
     var content;
     var editorKeyHelper;
-    var cellSelected = props.allowCellSelection && isSelected();
+    var cellSelected = props.allowCellSelection && props.isCellSelected;
     var isRowEditor = props.editMode === 'row';
-    var tabIndex = getTabIndex(cellSelected);
+    var tabIndex = props.getTabIndex(cellSelected, props.index);
     var selectionMode = getColumnProp('selectionMode');
     var rowReorder = getColumnProp('rowReorder');
     var header = getColumnProp('header');
     var body = getColumnProp('body');
     var editor = getColumnProp('editor');
-    var frozen = getColumnProp('frozen');
+    var frozen = props.frozenCol;
     var align = getColumnProp('align');
-    var value = resolveFieldData();
+    var value = props.resolveFieldData();
     var columnBodyOptions = {
       column: props.column,
-      field: field,
+      field: props.field,
       rowIndex: props.rowIndex,
       frozenRow: props.frozenRow,
       props: props.tableProps
@@ -1691,12 +1519,12 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       if (showSelection) {
         var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
         var ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
-        label = "".concat(props.selected ? ariaLabel$1('unselectRow') : ariaLabel$1('selectRow'), " ").concat(ariaLabelText);
+        label = "".concat(props.isRowSelected ? ariaLabel$1('unselectRow') : ariaLabel$1('selectRow'), " ").concat(ariaLabelText);
       }
       content = showSelection && /*#__PURE__*/React.createElement(React.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React.createElement(RowRadioButton, {
         hostName: props.hostName,
         column: props.column,
-        checked: props.selected,
+        checked: props.isRowSelected,
         disabled: !props.isSelectable({
           data: props.rowData,
           index: props.rowIndex
@@ -1711,12 +1539,12 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       }), selectionMode === 'multiple' && /*#__PURE__*/React.createElement(RowCheckbox, {
         hostName: props.hostName,
         column: props.column,
-        checked: props.selected,
+        checked: props.isRowSelected,
         disabled: !props.isSelectable({
           data: props.rowData,
           index: props.rowIndex
         }),
-        onChange: onCheckboxChange,
+        onChange: props.onCheckboxChange,
         tabIndex: props.tabIndex,
         ariaLabel: label,
         checkIcon: props.checkIcon,
@@ -1766,7 +1594,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         expanderProps.element = content;
         content = ObjectUtils.getJSXElement(body, props.rowData, {
           column: props.column,
-          field: field,
+          field: props.field,
           rowIndex: props.rowIndex,
           frozenRow: props.frozenRow,
           props: props.tableProps,
@@ -1840,7 +1668,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         rowEditorProps.element = content;
         content = ObjectUtils.getJSXElement(body, props.rowData, {
           column: props.column,
-          field: field,
+          field: props.field,
           rowIndex: props.rowIndex,
           frozenRow: props.frozenRow,
           props: props.tableProps,
@@ -1850,7 +1678,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     } else if (body && (!editingState || !editor)) {
       content = body ? ObjectUtils.getJSXElement(body, props.rowData, {
         column: props.column,
-        field: field,
+        field: props.field,
         rowIndex: props.rowIndex,
         frozenRow: props.frozenRow,
         props: props.tableProps
@@ -1858,9 +1686,9 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     } else if (editor && editingState) {
       content = ObjectUtils.getJSXElement(editor, {
         rowData: editingRowDataState,
-        value: resolveFieldData(editingRowDataState),
+        value: props.resolveFieldData(editingRowDataState),
         column: props.column,
-        field: field,
+        field: props.field,
         rowIndex: props.rowIndex,
         frozenRow: props.frozenRow,
         props: props.tableProps,
@@ -1928,7 +1756,22 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       ref: elementRef
     }, bodyCellProps), editorKeyHelper, title, content);
   };
-  return getVirtualScrollerOption('loading') ? createLoading() : createElement();
+  return props.getVirtualScrollerOption('loading') ? createLoading() : createElement();
+};
+
+// RadioCheckCell is used for the Radio and Checkbox selection and has the isRowSelected dependency
+var RadioCheckCell = /*#__PURE__*/React.memo(function (props) {
+  return /*#__PURE__*/React.createElement(Cell, props);
+}, function (prevProps, nextProps) {
+  var keysToCompare = ['isRowSelected', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData'];
+  return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
+});
+RadioCheckCell.displayName = 'RadioCheckCell';
+var BodyCell = /*#__PURE__*/React.memo(function (props) {
+  return /*#__PURE__*/React.createElement(Cell, props);
+}, function (prevProps, nextProps) {
+  var keysToCompare = ['field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData', 'frozenCol', 'alignFrozenCol'];
+  return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
 });
 BodyCell.displayName = 'BodyCell';
 
@@ -1944,6 +1787,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
   var _props$ptCallbacks = props.ptCallbacks,
     ptm = _props$ptCallbacks.ptm,
     cx = _props$ptCallbacks.cx;
+  var isRowSelected = !props.allowCellSelection && props.selected || props.contextMenuSelected;
   var getBodyRowPTOptions = function getBodyRowPTOptions(key) {
     return ptm(key, {
       parent: props.metaData,
@@ -1957,7 +1801,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
           data: props.rowData,
           index: props.rowIndex
         }),
-        selected: !props.allowCellSelection && props.selected || props.contextMenuSelected,
+        selected: isRowSelected,
         stripedRows: props.metaData.props.stripedRows
       }
     });
@@ -1986,10 +1830,10 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       return equals(rowData, data);
     });
   };
-  var changeTabIndex = function changeTabIndex(currentRow, nextRow) {
-    if (currentRow && nextRow) {
-      currentRow.tabIndex = -1;
-      nextRow.tabIndex = props.tabIndex;
+  var changeTabIndex = function changeTabIndex(currentElement, nextElement) {
+    if (currentElement && nextElement) {
+      currentElement.tabIndex = -1;
+      nextElement.tabIndex = props.tabIndex;
     }
   };
   var findFirstSelectableRow = function findFirstSelectableRow(row) {
@@ -2316,32 +2160,176 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
     onEditChange(e, false);
     event.preventDefault();
   };
+  var equalsDataCell = function equalsDataCell(data) {
+    return props.compareSelectionBy === 'equals' ? data === props.rowData : ObjectUtils.equals(data, props.rowData, props.dataKey);
+  };
+  var equalsCell = function equalsCell(selectedCell, field, colIndex) {
+    return selectedCell && (selectedCell.rowIndex === props.rowIndex || equalsDataCell(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === colIndex);
+  };
+  var findIndexCell = function findIndexCell(collection, field, colIndex) {
+    return (collection || []).findIndex(function (data) {
+      return equalsCell(data, field, colIndex);
+    });
+  };
+  var isCellSelected = function isCellSelected(selection, field, colIndex) {
+    return selection ? selection instanceof Array ? findIndexCell(selection, field, colIndex) > -1 : equalsCell(selection, field, colIndex) : false;
+  };
+  var onCheckboxChange = function onCheckboxChange(event) {
+    props.onCheckboxChange({
+      originalEvent: event,
+      data: props.rowData,
+      index: props.rowIndex
+    });
+  };
+  var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
+  var getVirtualScrollerOption = React.useCallback(function (option) {
+    return props.virtualScrollerOptions ? props.virtualScrollerOptions[option] : null;
+  }, [props.virtualScrollerOptions]);
+  var getEditingRowData = function getEditingRowData() {
+    return props.editingMeta && props.editingMeta[editingKey] ? props.editingMeta[editingKey].data : props.rowData;
+  };
+  var getTabIndexCell = React.useCallback(function (cellSelected, cellIndex) {
+    return props.allowCellSelection ? cellSelected ? 0 : props.rowIndex === 0 && cellIndex === 0 ? props.tabIndex : -1 : null;
+  }, [props.allowCellSelection, props.rowIndex, props.tabIndex]);
+  var findNextSelectableCell = React.useCallback(function (cell) {
+    var nextCell = cell.nextElementSibling;
+    return nextCell ? DomHandler.getAttribute(nextCell, 'data-p-selectable-cell') ? nextCell : findNextSelectableCell(nextCell) : null;
+  }, []);
+  var findPrevSelectableCell = React.useCallback(function (cell) {
+    var prevCell = cell.previousElementSibling;
+    return prevCell ? DomHandler.getAttribute(prevCell, 'data-p-selectable-cell') ? prevCell : findPrevSelectableCell(prevCell) : null;
+  }, []);
+  var findDownSelectableCell = React.useCallback(function (cell, cellIndex) {
+    var downRow = cell.parentElement.nextElementSibling;
+    var downCell = downRow ? downRow.children[cellIndex] : null;
+    return downRow && downCell ? DomHandler.getAttribute(downRow, 'data-p-selectable-row') && DomHandler.getAttribute(downCell, 'data-p-selectable-cell') ? downCell : findDownSelectableCell(downCell) : null;
+  }, []);
+  var findUpSelectableCell = React.useCallback(function (cell, cellIndex) {
+    var upRow = cell.parentElement.previousElementSibling;
+    var upCell = upRow ? upRow.children[cellIndex] : null;
+    return upRow && upCell ? DomHandler.getAttribute(upRow, 'data-p-selectable-row') && DomHandler.getAttribute(upCell, 'data-p-selectable-cell') ? upCell : findUpSelectableCell(upCell) : null;
+  }, []);
+  var focusOnElement = React.useCallback(function (focusTimeoutRef, editingState, elementRef, keyHelperRef) {
+    clearTimeout(focusTimeoutRef.current);
+    focusTimeoutRef.current = setTimeout(function () {
+      if (editingState) {
+        var focusableEl = props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
+        focusableEl && focusableEl.focus();
+      }
+      keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
+    }, 1);
+  }, [props.editMode]);
+  var focusOnInit = React.useCallback(function (initFocusTimeoutRef, elementRef) {
+    clearTimeout(initFocusTimeoutRef.current);
+    initFocusTimeoutRef.current = setTimeout(function () {
+      var focusableEl = props.editMode === 'row' ? DomHandler.findSingle(elementRef.current, '[data-p-row-editor-init="true"]') : null;
+      focusableEl && focusableEl.focus();
+    }, 1);
+  }, [props.editMode]);
+  var updateStickyPosition = React.useCallback(function (elementRef, frozen, alignFrozen, styleObjectState, setStyleObjectState) {
+    if (frozen) {
+      var styleObject = _objectSpread$a({}, styleObjectState);
+      if (alignFrozen === 'right') {
+        var right = 0;
+        var next = elementRef.current && elementRef.current.nextElementSibling;
+        if (next && next.classList.contains('p-frozen-column')) {
+          right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
+        }
+        styleObject.right = right + 'px';
+      } else {
+        var left = 0;
+        var prev = elementRef.current && elementRef.current.previousElementSibling;
+        if (prev && prev.classList.contains('p-frozen-column')) {
+          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 onCellClick = function onCellClick(event, params, isEditable, editingState, setEditingState, selfClick, column, bindDocumentClickListener, overlayEventListener) {
+    if (props.editMode !== 'row' && isEditable && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.isRowSelected)) {
+      selfClick.current = true;
+      var onBeforeCellEditShow = getColumnProp(column, 'onBeforeCellEditShow');
+      var onCellEditInit = getColumnProp(column, 'onCellEditInit');
+      var cellEditValidatorEvent = getColumnProp(column, 'cellEditValidatorEvent');
+      if (onBeforeCellEditShow) {
+        // if user returns false do not show the editor
+        if (onBeforeCellEditShow(params) === false) {
+          return;
+        }
+
+        // if user prevents default stop the editor
+        if (event && event.defaultPrevented) {
+          return;
+        }
+      }
+
+      // 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) {
+          if (onCellEditInit(params) === false) {
+            return;
+          }
+
+          // if user prevents default stop the editor
+          if (event && event.defaultPrevented) {
+            return;
+          }
+        }
+        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.onCellClick) {
+      props.onCellClick(params);
+    }
+  };
   var createContent = function createContent() {
     return props.columns.map(function (col, i) {
       if (shouldRenderBodyCell(props.value, col, props.index)) {
         var key = "".concat(props.rowIndex, "_").concat(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'), "_").concat(i);
         var rowSpan = props.rowGroupMode === 'rowspan' ? calculateRowGroupSize(props.value, col, props.index) : null;
-        return /*#__PURE__*/React.createElement(BodyCell, {
+        var field = getColumnProp(col, 'field') || "field_".concat(i);
+        var resolveFieldData = function resolveFieldData(data) {
+          return ObjectUtils.resolveFieldData(data || props.rowData, field);
+        };
+        var selectionMode = getColumnProp(col, 'selectionMode');
+        var cellProps = mergeProps({
           hostName: props.hostName,
-          key: key,
           allowCellSelection: props.allowCellSelection,
           cellClassName: props.cellClassName,
           checkIcon: props.checkIcon,
           collapsedRowIcon: props.collapsedRowIcon,
+          field: field,
+          resolveFieldData: resolveFieldData,
           column: col,
-          compareSelectionBy: props.compareSelectionBy,
+          cProps: props.colsProps[i],
           dataKey: props.dataKey,
           editMode: props.editMode,
           editing: editing,
           editingMeta: props.editingMeta,
+          onEditingMetaChange: props.onEditingMetaChange,
+          editingKey: editingKey,
+          getEditingRowData: getEditingRowData,
           expanded: props.expanded,
           expandedRowIcon: props.expandedRowIcon,
           frozenRow: props.frozenRow,
+          frozenCol: getColumnProp(col, 'frozen'),
+          alignFrozenCol: getColumnProp(col, 'alignFrozen'),
           index: i,
           isSelectable: props.isSelectable,
-          onCheckboxChange: props.onCheckboxChange,
-          onClick: props.onCellClick,
-          onEditingMetaChange: props.onEditingMetaChange,
+          onCheckboxChange: onCheckboxChange,
+          onClick: onCellClick,
           onMouseDown: props.onCellMouseDown,
           onMouseUp: props.onCellMouseUp,
           onRadioChange: props.onRadioChange,
@@ -2357,20 +2345,31 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
           rowIndex: props.rowIndex,
           rowSpan: rowSpan,
           selectOnEdit: props.selectOnEdit,
-          selected: props.selected,
-          selection: props.selection,
+          isRowSelected: isRowSelected,
+          isCellSelected: isCellSelected(props.selection, field, i),
           selectionAriaLabel: props.tableProps.selectionAriaLabel,
           showRowReorderElement: props.showRowReorderElement,
           showSelectionElement: props.showSelectionElement,
           tabIndex: props.tabIndex,
+          getTabIndex: getTabIndexCell,
           tableProps: props.tableProps,
           tableSelector: props.tableSelector,
           value: props.value,
-          virtualScrollerOptions: props.virtualScrollerOptions,
+          getVirtualScrollerOption: getVirtualScrollerOption,
           ptCallbacks: props.ptCallbacks,
           metaData: props.metaData,
-          unstyled: props.unstyled
+          unstyled: props.unstyled,
+          findNextSelectableCell: findNextSelectableCell,
+          findPrevSelectableCell: findPrevSelectableCell,
+          findDownSelectableCell: findDownSelectableCell,
+          findUpSelectableCell: findUpSelectableCell,
+          focusOnElement: focusOnElement,
+          focusOnInit: focusOnInit,
+          updateStickyPosition: updateStickyPosition
         });
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: key
+        }, selectionMode ? /*#__PURE__*/React.createElement(RadioCheckCell, cellProps) : /*#__PURE__*/React.createElement(BodyCell, cellProps));
       }
       return null;
     });
@@ -2520,8 +2519,11 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
   var getColumnProps = function getColumnProps(column) {
     return ColumnBase.getCProps(column);
   };
+  var cProps = getColumnProps(props.column);
+  var colsProps = props.columns ? props.columns.map(function (col) {
+    return getColumnProps(col);
+  }) : [];
   var getColumnPTOptions = function getColumnPTOptions(key) {
-    var cProps = getColumnProps(props.column);
     var columnMetaData = {
       props: cProps,
       parent: props.metaData,
@@ -2646,8 +2648,12 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
   var allowSelection = function allowSelection(event) {
     return !DomHandler.isClickable(event.originalEvent.target);
   };
+  var metaKeySelectionRef = React.useRef(props.metaKeySelection);
+  React.useEffect(function () {
+    metaKeySelectionRef.current = props.metaKeySelection;
+  }, [props.metaKeySelection]);
   var allowMetaKeySelection = function allowMetaKeySelection(event) {
-    return !rowTouched.current && (!props.metaKeySelection || props.metaKeySelection && (event.originalEvent.metaKey || event.originalEvent.ctrlKey));
+    return !rowTouched.current && (!metaKeySelectionRef.current || metaKeySelectionRef.current && (event.originalEvent.metaKey || event.originalEvent.ctrlKey));
   };
   var allowRangeSelection = function allowRangeSelection(event) {
     return isMultipleSelection() && event.originalEvent.shiftKey && anchorRowIndex.current !== null;
@@ -2668,6 +2674,9 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
     options = options || props.virtualScrollerOptions;
     return options ? options[option] : null;
   };
+  var getProcessedDataIndex = function getProcessedDataIndex(rowIndex) {
+    return props.lazy ? rowIndex - props.first : rowIndex;
+  };
   var findIndex = function findIndex(collection, rowData) {
     return (collection || []).findIndex(function (data) {
       return equals(rowData, data);
@@ -2717,6 +2726,10 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
       });
     }
   };
+  var selectionRef = React.useRef(props.selection);
+  React.useEffect(function () {
+    selectionRef.current = props.selection;
+  }, [props.selection]);
   var onSingleSelection = function onSingleSelection(_ref) {
     var originalEvent = _ref.originalEvent,
       data = _ref.data,
@@ -2730,10 +2743,11 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
       return;
     }
     var selected = isSelected(data);
-    var selection = props.selection;
+    var currentSelection = selectionRef.current || [];
+    var newSelection = currentSelection;
     if (selected) {
       if (toggleable) {
-        selection = null;
+        newSelection = null;
         onUnselect({
           originalEvent: originalEvent,
           data: data,
@@ -2741,7 +2755,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
         });
       }
     } else {
-      selection = data;
+      newSelection = data;
       onSelect({
         originalEvent: originalEvent,
         data: data,
@@ -2749,10 +2763,10 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
       });
     }
     focusOnElement(originalEvent, true);
-    if (props.onSelectionChange && selection !== props.selection) {
+    if (props.onSelectionChange && newSelection !== currentSelection) {
       props.onSelectionChange({
         originalEvent: originalEvent,
-        value: selection,
+        value: newSelection,
         type: type
       });
     }
@@ -2770,11 +2784,12 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
       return;
     }
     var selected = isSelected(data);
-    var selection = props.selection || [];
+    var currentSelection = selectionRef.current || [];
+    var newSelection = currentSelection;
     if (selected) {
       if (toggleable) {
-        var selectionIndex = findIndex(selection, data);
-        selection = props.selection.filter(function (val, i) {
+        var selectionIndex = findIndex(currentSelection, data);
+        newSelection = currentSelection.filter(function (val, i) {
           return i !== selectionIndex;
         });
         onUnselect({
@@ -2782,15 +2797,15 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
           data: data,
           type: type
         });
-      } else if (selection.length) {
-        props.selection.forEach(function (d) {
+      } else if (currentSelection.length) {
+        currentSelection.forEach(function (d) {
           return onUnselect({
             originalEvent: originalEvent,
             data: d,
             type: type
           });
         });
-        selection = [data];
+        newSelection = [data];
         onSelect({
           originalEvent: originalEvent,
           data: data,
@@ -2798,18 +2813,18 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
         });
       }
     } else {
-      selection = ObjectUtils.isObject(selection) ? [selection] : selection;
-      selection = toggleable && isMultipleSelection() ? [].concat(_toConsumableArray(selection), [data]) : [data];
+      newSelection = ObjectUtils.isObject(currentSelection) ? [currentSelection] : currentSelection;
+      newSelection = toggleable && isMultipleSelection() ? [].concat(_toConsumableArray(newSelection), [data]) : [data];
       onSelect({
         originalEvent: originalEvent,
         data: data,
         type: type
       });
     }
-    if (props.onSelectionChange && selection !== props.selection) {
+    if (props.onSelectionChange && newSelection !== currentSelection) {
       props.onSelectionChange({
         originalEvent: originalEvent,
-        value: selection,
+        value: newSelection,
         type: type
       });
     }
@@ -2832,14 +2847,16 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
     var rangeStart;
     var rangeEnd;
     var isAllowCellSelection = allowCellSelection();
-    if (rangeRowIndex.current > anchorRowIndex.current) {
-      rangeStart = anchorRowIndex.current;
-      rangeEnd = rangeRowIndex.current;
-    } else if (rangeRowIndex.current < anchorRowIndex.current) {
-      rangeStart = rangeRowIndex.current;
-      rangeEnd = anchorRowIndex.current;
+    var rangeRowIndexInProcessedData = getProcessedDataIndex(rangeRowIndex.current);
+    var anchorRowIndexInProcessedData = getProcessedDataIndex(anchorRowIndex.current);
+    if (rangeRowIndexInProcessedData > anchorRowIndexInProcessedData) {
+      rangeStart = anchorRowIndexInProcessedData;
+      rangeEnd = rangeRowIndexInProcessedData;
+    } else if (rangeRowIndexInProcessedData < anchorRowIndexInProcessedData) {
+      rangeStart = rangeRowIndexInProcessedData;
+      rangeEnd = anchorRowIndexInProcessedData;
     } else {
-      rangeStart = rangeEnd = rangeRowIndex.current;
+      rangeStart = rangeEnd = rangeRowIndexInProcessedData;
     }
     return isAllowCellSelection ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
   };
@@ -2880,7 +2897,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
     for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
       var rowData = value[i];
       var columns = props.columns;
-      var rowIndex = props.paginator ? i + props.first : i;
+      var rowIndex = props.lazy ? i + props.first : i;
       for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
         var field = getColumnProp(columns[j], 'field');
         var _value = ObjectUtils.resolveFieldData(rowData, field);
@@ -3345,7 +3362,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
       var emptyMessageProps = mergeProps({
         className: cx('emptyMessage'),
         role: 'row'
-      }, getColumnPTOptions('emptyMessage'));
+      }, ptm('emptyMessage'));
       var bodyCellProps = mergeProps({
         colSpan: colSpan,
         role: 'cell'
@@ -3355,7 +3372,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
     return null;
   };
   var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
-    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
+    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, getProcessedDataIndex(rowIndex))) {
       var style = rowGroupHeaderStyle();
       var toggler = props.expandableRowGroups && /*#__PURE__*/React.createElement(RowTogglerButton, {
         hostName: props.hostName,
@@ -3382,14 +3399,14 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
         }, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
         var rowGroupHeaderNameProps = mergeProps({
           className: cx('rowGroupHeaderName')
-        }, getColumnPTOptions('rowGroupHeaderName'));
+        }, ptm('rowGroupHeaderName'));
         _content2 = /*#__PURE__*/React.createElement("td", bodyCellProps, toggler, /*#__PURE__*/React.createElement("span", rowGroupHeaderNameProps, _content2));
       }
       var rowGroupHeaderProps = mergeProps({
         className: cx('rowGroupHeader'),
         style: style,
         role: 'row'
-      }, getColumnPTOptions('rowGroupHeader'));
+      }, ptm('rowGroupHeader'));
       return /*#__PURE__*/React.createElement("tr", rowGroupHeaderProps, _content2);
     }
     return null;
@@ -3409,6 +3426,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
         checkIcon: props.checkIcon,
         collapsedRowIcon: props.collapsedRowIcon,
         columns: props.columns,
+        colsProps: colsProps,
         compareSelectionBy: props.compareSelectionBy,
         contextMenuSelected: contextMenuSelected,
         dataKey: props.dataKey,
@@ -3497,7 +3515,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
         id: id,
         className: cx('rowExpansion'),
         role: 'row'
-      }, getColumnPTOptions('rowExpansion'));
+      }, ptm('rowExpansion'));
       return /*#__PURE__*/React.createElement("tr", rowExpansionProps, _content3);
     }
     return null;
@@ -3512,7 +3530,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
       var rowGroupFooterProps = mergeProps({
         className: cx('rowGroupFooter'),
         role: 'row'
-      }, getColumnPTOptions('rowGroupFooter'));
+      }, ptm('rowGroupFooter'));
       return /*#__PURE__*/React.createElement("tr", rowGroupFooterProps, _content4);
     }
     return null;
@@ -3772,28 +3790,20 @@ var TableFooter = /*#__PURE__*/React.memo(function (props) {
 });
 TableFooter.displayName = 'TableFooter';
 
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, toPropertyKey(o.key), o);
   }
 }
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
+    writable: !1
+  }), e;
 }
 
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
 }
 
 var FilterMatchMode = Object.freeze({
@@ -4200,9 +4210,17 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         var type = _ref.type,
           valid = _ref.valid;
         if (valid) {
-          type === 'outside' ? !selfClick.current && !isTargetClicked(event.target) && hide() : hide();
+          if (type === 'outside') {
+            if (!selfClick.current && !isTargetClicked(event.target)) {
+              hide();
+            }
+            selfClick.current = false;
+          } else if (context.hideOverlaysOnDocumentScrolling) {
+            hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            DomHandler.alignOverlay(overlayRef.current, iconRef.current, context && context.appendTo || PrimeReact$1.appendTo, false);
+          }
         }
-        selfClick.current = false;
       },
       when: overlayVisibleState
     }),
@@ -5692,9 +5710,9 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
 });
 TableHeader.displayName = 'TableHeader';
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-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; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
@@ -5737,14 +5755,18 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     _React$useState18 = _slicedToArray(_React$useState17, 2),
     editingMetaState = _React$useState18[0],
     setEditingMetaState = _React$useState18[1];
-  var _React$useState19 = React.useState(props.rows),
+  var _React$useState19 = React.useState({}),
     _React$useState20 = _slicedToArray(_React$useState19, 2),
-    d_rowsState = _React$useState20[0],
-    setD_rowsState = _React$useState20[1];
-  var _React$useState21 = React.useState({}),
+    frozenEditingMetaState = _React$useState20[0],
+    setFrozenEditingMetaState = _React$useState20[1];
+  var _React$useState21 = React.useState(props.rows),
     _React$useState22 = _slicedToArray(_React$useState21, 2),
-    d_filtersState = _React$useState22[0],
-    setD_filtersState = _React$useState22[1];
+    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];
   var metaData = {
     props: props,
     state: {
@@ -5757,6 +5779,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       columnOrder: columnOrderState,
       groupRowsSortMeta: groupRowsSortMetaState,
       editingMeta: editingMetaState,
+      frozenEditingMeta: frozenEditingMetaState,
       d_rows: d_rowsState,
       d_filters: d_filtersState
     },
@@ -6161,6 +6184,32 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       setEditingMetaState({});
     }
   };
+  var onFrozenEditingMetaChange = function onFrozenEditingMetaChange(e) {
+    var rowData = e.rowData,
+      field = e.field,
+      editingKey = e.editingKey,
+      editing = e.editing;
+    var frozenEditingMeta = _objectSpread({}, frozenEditingMetaState);
+    var meta = frozenEditingMeta[editingKey];
+    if (editing) {
+      !meta && (meta = frozenEditingMeta[editingKey] = {
+        data: _objectSpread({}, rowData),
+        fields: []
+      });
+      meta.fields.push(field);
+    } else if (meta) {
+      var fields = meta.fields.filter(function (f) {
+        return f !== field;
+      });
+      !fields.length ? delete frozenEditingMeta[editingKey] : meta.fields = fields;
+    }
+    setFrozenEditingMetaState(frozenEditingMeta);
+  };
+  var clearFrozenEditingMetaData = function clearFrozenEditingMetaData() {
+    if (props.editMode && ObjectUtils.isNotEmpty(frozenEditingMetaState)) {
+      setFrozenEditingMetaState({});
+    }
+  };
   var onColumnResizeStart = function onColumnResizeStart(e) {
     createBeforeResizeStyleElement();
     var event = e.originalEvent,
@@ -6451,6 +6500,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   };
   var onPageChange = function onPageChange(e) {
     clearEditingMetaData();
+    clearFrozenEditingMetaData();
     if (props.onPage) {
       props.onPage(createEvent(e));
     } else {
@@ -6463,6 +6513,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   };
   var onSortChange = function onSortChange(e) {
     clearEditingMetaData();
+    clearFrozenEditingMetaData();
     var event = e.originalEvent,
       column = e.column,
       sortableDisabledFields = e.sortableDisabledFields;
@@ -6640,6 +6691,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   };
   var onFilterChange = function onFilterChange(filters) {
     clearEditingMetaData();
+    clearFrozenEditingMetaData();
     setD_filtersState(filters);
   };
   var onFilterApply = function onFilterApply(filtersToApply) {
@@ -6829,6 +6881,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     setD_filtersState(cloneFilters(props.filters));
     setGroupRowsSortMetaState(null);
     setEditingMetaState({});
+    setFrozenEditingMetaState({});
     if (!props.onPage) {
       setFirstState(props.first);
       setRowsState(props.rows);
@@ -7193,7 +7246,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       dataKey: props.dataKey,
       dragSelection: props.dragSelection,
       editMode: props.editMode,
-      editingMeta: editingMetaState,
+      editingMeta: frozenEditingMetaState,
       editingRows: props.editingRows,
       emptyMessage: props.emptyMessage,
       expandableRowGroups: props.expandableRowGroups,
@@ -7212,7 +7265,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       onCellUnselect: props.onCellUnselect,
       onContextMenu: props.onContextMenu,
       onContextMenuSelectionChange: props.onContextMenuSelectionChange,
-      onEditingMetaChange: onEditingMetaChange,
+      onEditingMetaChange: onFrozenEditingMetaChange,
       onRowClick: props.onRowClick,
       onRowCollapse: props.onRowCollapse,
       onRowDoubleClick: props.onRowDoubleClick,