primereact 10.9.4 → 10.9.6

package/datatable/datatable.cjs.js

@@ -740,7 +740,7 @@ var Checkbox = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
     return props.checked === props.trueValue;
   };
   var _onChange = function onChange(event) {
-    if (props.disabled || props.readonly) {
+    if (props.disabled || props.readOnly) {
       return;
     }
     if (props.onChange) {
@@ -999,7 +999,7 @@ var RadioButton = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
     onChange(event);
   };
   var onChange = function onChange(event) {
-    if (props.disabled || props.readonly) {
+    if (props.disabled || props.readOnly) {
       return;
     }
     if (props.onChange) {
@@ -1102,7 +1102,7 @@ var RadioButton = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
       onBlur: onBlur,
       onChange: onChange,
       disabled: props.disabled,
-      readOnly: props.readonly,
+      readOnly: props.readOnly,
       required: props.required,
       tabIndex: props.tabIndex,
       className: cx('input')
@@ -1175,7 +1175,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__namespace.memo(function (props) {
+var Cell = function Cell(props) {
   var mergeProps = hooks.useMergeProps();
   var _React$useState = React__namespace.useState(props.editing),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -1203,13 +1203,9 @@ var BodyCell = /*#__PURE__*/React__namespace.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: {
@@ -1225,10 +1221,8 @@ var BodyCell = /*#__PURE__*/React__namespace.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 utils.ObjectUtils.isNotEmpty(props.editMode) && getColumnProp('editor');
   };
@@ -1253,34 +1247,22 @@ var BodyCell = /*#__PURE__*/React__namespace.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 : utils.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
     };
@@ -1291,20 +1273,6 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       originalEvent: event
     }, params);
   };
-  var resolveFieldData = function resolveFieldData(data) {
-    return utils.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');
@@ -1325,7 +1293,7 @@ var BodyCell = /*#__PURE__*/React__namespace.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
@@ -1350,128 +1318,20 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     }
     setEditingRowDataState(newRowData);
   };
-  var _findNextSelectableCell = function findNextSelectableCell(cell) {
-    var nextCell = cell.nextElementSibling;
-    return nextCell ? utils.DomHandler.getAttribute(nextCell, 'data-p-selectable-cell') ? nextCell : _findNextSelectableCell(nextCell) : null;
-  };
-  var _findPrevSelectableCell = function findPrevSelectableCell(cell) {
-    var prevCell = cell.previousElementSibling;
-    return prevCell ? utils.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 ? utils.DomHandler.getAttribute(downRow, 'data-p-selectable-row') && utils.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 ? utils.DomHandler.getAttribute(upRow, 'data-p-selectable-row') && utils.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' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : utils.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' ? utils.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 = utils.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 = utils.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);
-    utils.ObjectUtils.mutateFieldData(editingRowData, field, val);
+    utils.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) {
-      utils.ObjectUtils.mutateFieldData(currentData, field, val);
+      utils.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.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, isOutsideClicked);
   };
   var _onMouseDown = function onMouseDown(event) {
     var params = getCellCallbackParams(event);
@@ -1495,7 +1355,7 @@ var BodyCell = /*#__PURE__*/React__namespace.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();
@@ -1503,7 +1363,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           event.preventDefault();
           break;
         case 'ArrowRight':
-          var nextCell = _findNextSelectableCell(cell);
+          var nextCell = props.findNextSelectableCell(cell);
           if (nextCell) {
             changeTabIndex(cell, nextCell);
             nextCell.focus();
@@ -1511,7 +1371,7 @@ var BodyCell = /*#__PURE__*/React__namespace.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();
@@ -1519,7 +1379,7 @@ var BodyCell = /*#__PURE__*/React__namespace.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();
@@ -1558,13 +1418,6 @@ var BodyCell = /*#__PURE__*/React__namespace.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,
@@ -1577,8 +1430,8 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     props.onRowEditInit({
       originalEvent: event,
       data: props.rowData,
-      newData: getEditingRowData(),
-      field: field,
+      newData: props.getEditingRowData(),
+      field: props.field,
       index: props.rowIndex
     });
   };
@@ -1586,32 +1439,26 @@ var BodyCell = /*#__PURE__*/React__namespace.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(initFocusTimeout, elementRef);
   };
   React__namespace.useEffect(function () {
-    if (getColumnProp('frozen')) {
-      updateStickyPosition();
-    }
-  });
-  React__namespace.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__namespace.useEffect(function () {
     if (props.editMode === 'row' && props.editing !== editingState) {
@@ -1620,7 +1467,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   }, [props.editMode, props.editing, editingState]);
   hooks.useUpdateEffect(function () {
     if (props.editMode === 'cell' || props.editMode === 'row') {
-      var editingRowData = getEditingRowData();
+      var editingRowData = props.getEditingRowData();
       setEditingRowDataState(editingRowData);
       editingRowDataStateRef.current = editingRowData;
     }
@@ -1630,7 +1477,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       var callbackParams = getCellCallbackParams();
       var params = _objectSpread$b(_objectSpread$b({}, callbackParams), {}, {
         editing: editingState,
-        editingKey: editingKey
+        editingKey: props.editingKey
       });
       props.onEditingMetaChange(params);
     }
@@ -1643,16 +1490,16 @@ var BodyCell = /*#__PURE__*/React__namespace.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 = utils.ObjectUtils.getJSXElement(getVirtualScrollerOption('loadingTemplate'), options);
+    var content = utils.ObjectUtils.getJSXElement(props.getVirtualScrollerOption('loadingTemplate'), options);
     var bodyCellProps = mergeProps(getColumnPTOptions('bodyCell'), {
       role: 'cell'
     });
@@ -1661,20 +1508,20 @@ var BodyCell = /*#__PURE__*/React__namespace.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
@@ -1699,12 +1546,12 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       if (showSelection) {
         var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
         var ariaLabelText = utils.ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
-        label = "".concat(props.selected ? PrimeReact$1.ariaLabel('unselectRow') : PrimeReact$1.ariaLabel('selectRow'), " ").concat(ariaLabelText);
+        label = "".concat(props.isRowSelected ? PrimeReact$1.ariaLabel('unselectRow') : PrimeReact$1.ariaLabel('selectRow'), " ").concat(ariaLabelText);
       }
       content = showSelection && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__namespace.createElement(RowRadioButton, {
         hostName: props.hostName,
         column: props.column,
-        checked: props.selected,
+        checked: props.isRowSelected,
         disabled: !props.isSelectable({
           data: props.rowData,
           index: props.rowIndex
@@ -1719,12 +1566,12 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       }), selectionMode === 'multiple' && /*#__PURE__*/React__namespace.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,
@@ -1774,7 +1621,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         expanderProps.element = content;
         content = utils.ObjectUtils.getJSXElement(body, props.rowData, {
           column: props.column,
-          field: field,
+          field: props.field,
           rowIndex: props.rowIndex,
           frozenRow: props.frozenRow,
           props: props.tableProps,
@@ -1848,7 +1695,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         rowEditorProps.element = content;
         content = utils.ObjectUtils.getJSXElement(body, props.rowData, {
           column: props.column,
-          field: field,
+          field: props.field,
           rowIndex: props.rowIndex,
           frozenRow: props.frozenRow,
           props: props.tableProps,
@@ -1858,7 +1705,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     } else if (body && (!editingState || !editor)) {
       content = body ? utils.ObjectUtils.getJSXElement(body, props.rowData, {
         column: props.column,
-        field: field,
+        field: props.field,
         rowIndex: props.rowIndex,
         frozenRow: props.frozenRow,
         props: props.tableProps
@@ -1866,9 +1713,9 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     } else if (editor && editingState) {
       content = utils.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,
@@ -1936,7 +1783,29 @@ var BodyCell = /*#__PURE__*/React__namespace.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__namespace.memo(function (props) {
+  return /*#__PURE__*/React__namespace.createElement(Cell, props);
+}, function (prevProps, nextProps) {
+  var keysToCompare = ['isRowSelected', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData'];
+  return utils.ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
+});
+RadioCheckCell.displayName = 'RadioCheckCell';
+var defaultKeysToCompare = ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'];
+var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
+  return /*#__PURE__*/React__namespace.createElement(Cell, props);
+}, function (prevProps, nextProps) {
+  if (nextProps.cellMemo === false) return false;
+  var memoProps = nextProps.cellMemoProps;
+  var keysToCompare = Array.isArray(memoProps) && memoProps.every(function (prop) {
+    return typeof prop === 'string';
+  }) ? memoProps : defaultKeysToCompare;
+  var memoPropsDepth = nextProps.cellMemoPropsDepth;
+  var depth = typeof memoPropsDepth === 'number' && memoPropsDepth > 0 ? memoPropsDepth : 1;
+  return utils.ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare, depth);
 });
 BodyCell.displayName = 'BodyCell';
 
@@ -1952,6 +1821,7 @@ var BodyRow = /*#__PURE__*/React__namespace.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,
@@ -1965,7 +1835,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
           data: props.rowData,
           index: props.rowIndex
         }),
-        selected: !props.allowCellSelection && props.selected || props.contextMenuSelected,
+        selected: isRowSelected,
         stripedRows: props.metaData.props.stripedRows
       }
     });
@@ -1994,10 +1864,10 @@ var BodyRow = /*#__PURE__*/React__namespace.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) {
@@ -2324,32 +2194,179 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
     onEditChange(e, false);
     event.preventDefault();
   };
+  var equalsDataCell = function equalsDataCell(data) {
+    return props.compareSelectionBy === 'equals' ? data === props.rowData : utils.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__namespace.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__namespace.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__namespace.useCallback(function (cell) {
+    var nextCell = cell.nextElementSibling;
+    return nextCell ? utils.DomHandler.getAttribute(nextCell, 'data-p-selectable-cell') ? nextCell : findNextSelectableCell(nextCell) : null;
+  }, []);
+  var findPrevSelectableCell = React__namespace.useCallback(function (cell) {
+    var prevCell = cell.previousElementSibling;
+    return prevCell ? utils.DomHandler.getAttribute(prevCell, 'data-p-selectable-cell') ? prevCell : findPrevSelectableCell(prevCell) : null;
+  }, []);
+  var findDownSelectableCell = React__namespace.useCallback(function (cell, cellIndex) {
+    var downRow = cell.parentElement.nextElementSibling;
+    var downCell = downRow ? downRow.children[cellIndex] : null;
+    return downRow && downCell ? utils.DomHandler.getAttribute(downRow, 'data-p-selectable-row') && utils.DomHandler.getAttribute(downCell, 'data-p-selectable-cell') ? downCell : findDownSelectableCell(downCell) : null;
+  }, []);
+  var findUpSelectableCell = React__namespace.useCallback(function (cell, cellIndex) {
+    var upRow = cell.parentElement.previousElementSibling;
+    var upCell = upRow ? upRow.children[cellIndex] : null;
+    return upRow && upCell ? utils.DomHandler.getAttribute(upRow, 'data-p-selectable-row') && utils.DomHandler.getAttribute(upCell, 'data-p-selectable-cell') ? upCell : findUpSelectableCell(upCell) : null;
+  }, []);
+  var focusOnElement = React__namespace.useCallback(function (focusTimeoutRef, editingState, elementRef, keyHelperRef) {
+    clearTimeout(focusTimeoutRef.current);
+    focusTimeoutRef.current = setTimeout(function () {
+      if (editingState) {
+        var focusableEl = props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : utils.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__namespace.useCallback(function (initFocusTimeoutRef, elementRef) {
+    clearTimeout(initFocusTimeoutRef.current);
+    initFocusTimeoutRef.current = setTimeout(function () {
+      var focusableEl = props.editMode === 'row' ? utils.DomHandler.findSingle(elementRef.current, '[data-p-row-editor-init="true"]') : null;
+      focusableEl && focusableEl.focus();
+    }, 1);
+  }, [props.editMode]);
+  var updateStickyPosition = React__namespace.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 = utils.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 = utils.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, isOutsideClicked) {
+    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.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__namespace.createElement(BodyCell, {
+        var field = getColumnProp(col, 'field') || "field_".concat(i);
+        var resolveFieldData = function resolveFieldData(data) {
+          return utils.ObjectUtils.resolveFieldData(data || props.rowData, field);
+        };
+        var selectionMode = getColumnProp(col, 'selectionMode');
+        var cellProps = mergeProps({
           hostName: props.hostName,
-          key: key,
           allowCellSelection: props.allowCellSelection,
+          cellMemo: props.cellMemo,
+          cellMemoProps: props.cellMemoProps,
+          cellMemoPropsDepth: props.cellMemoPropsDepth,
           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,
@@ -2365,20 +2382,31 @@ var BodyRow = /*#__PURE__*/React__namespace.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__namespace.createElement(React.Fragment, {
+          key: key
+        }, selectionMode ? /*#__PURE__*/React__namespace.createElement(RadioCheckCell, cellProps) : /*#__PURE__*/React__namespace.createElement(BodyCell, cellProps));
       }
       return null;
     });
@@ -2528,8 +2556,11 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
   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,
@@ -2654,8 +2685,12 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
   var allowSelection = function allowSelection(event) {
     return !utils.DomHandler.isClickable(event.originalEvent.target);
   };
+  var metaKeySelectionRef = React__namespace.useRef(props.metaKeySelection);
+  React__namespace.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;
@@ -2676,9 +2711,6 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     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);
@@ -2728,6 +2760,10 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       });
     }
   };
+  var selectionRef = React__namespace.useRef(props.selection);
+  React__namespace.useEffect(function () {
+    selectionRef.current = props.selection;
+  }, [props.selection]);
   var onSingleSelection = function onSingleSelection(_ref) {
     var originalEvent = _ref.originalEvent,
       data = _ref.data,
@@ -2741,10 +2777,11 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       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,
@@ -2752,7 +2789,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         });
       }
     } else {
-      selection = data;
+      newSelection = data;
       onSelect({
         originalEvent: originalEvent,
         data: data,
@@ -2760,10 +2797,10 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       });
     }
     focusOnElement(originalEvent, true);
-    if (props.onSelectionChange && selection !== props.selection) {
+    if (props.onSelectionChange && newSelection !== currentSelection) {
       props.onSelectionChange({
         originalEvent: originalEvent,
-        value: selection,
+        value: newSelection,
         type: type
       });
     }
@@ -2781,11 +2818,12 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       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({
@@ -2793,15 +2831,15 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
           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,
@@ -2809,18 +2847,18 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         });
       }
     } else {
-      selection = utils.ObjectUtils.isObject(selection) ? [selection] : selection;
-      selection = toggleable && isMultipleSelection() ? [].concat(_toConsumableArray(selection), [data]) : [data];
+      newSelection = utils.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
       });
     }
@@ -2843,16 +2881,14 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     var rangeStart;
     var rangeEnd;
     var isAllowCellSelection = allowCellSelection();
-    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;
+    if (rangeRowIndex.current > anchorRowIndex.current) {
+      rangeStart = anchorRowIndex.current;
+      rangeEnd = rangeRowIndex.current;
+    } else if (rangeRowIndex.current < anchorRowIndex.current) {
+      rangeStart = rangeRowIndex.current;
+      rangeEnd = anchorRowIndex.current;
     } else {
-      rangeStart = rangeEnd = rangeRowIndexInProcessedData;
+      rangeStart = rangeEnd = rangeRowIndex.current;
     }
     return isAllowCellSelection ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
   };
@@ -2893,7 +2929,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
       var rowData = value[i];
       var columns = props.columns;
-      var rowIndex = props.lazy ? i + props.first : i;
+      var rowIndex = props.paginator ? i + props.first : i;
       for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
         var field = getColumnProp(columns[j], 'field');
         var _value = utils.ObjectUtils.resolveFieldData(rowData, field);
@@ -3092,13 +3128,17 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       onRangeSelection(event, 'row');
     }
   };
+  var expandedRowsRef = React__namespace.useRef(props.expandedRows);
+  React__namespace.useEffect(function () {
+    expandedRowsRef.current = props.expandedRows;
+  }, [props.expandedRows]);
   var onRowToggle = function onRowToggle(event) {
     var expandedRows;
     var dataKey = props.dataKey;
     var hasDataKey = props.groupRowsBy ? dataKey === props.groupRowsBy : !!dataKey;
     if (hasDataKey) {
       var dataKeyValue = String(utils.ObjectUtils.resolveFieldData(event.data, dataKey));
-      expandedRows = props.expandedRows ? _objectSpread$8({}, props.expandedRows) : {};
+      expandedRows = expandedRowsRef.current ? _objectSpread$8({}, expandedRowsRef.current) : {};
       if (expandedRows[dataKeyValue] != null) {
         delete expandedRows[dataKeyValue];
         if (props.onRowCollapse) {
@@ -3117,8 +3157,8 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         }
       }
     } else {
-      var expandedRowIndex = findIndex(props.expandedRows, event.data);
-      expandedRows = props.expandedRows ? _toConsumableArray(props.expandedRows) : [];
+      var expandedRowIndex = findIndex(expandedRowsRef.current, event.data);
+      expandedRows = expandedRowsRef.current ? _toConsumableArray(expandedRowsRef.current) : [];
       if (expandedRowIndex !== -1) {
         expandedRows = expandedRows.filter(function (_, i) {
           return i !== expandedRowIndex;
@@ -3368,7 +3408,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     return null;
   };
   var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
-    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, getProcessedDataIndex(rowIndex))) {
+    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
       var style = rowGroupHeaderStyle();
       var toggler = props.expandableRowGroups && /*#__PURE__*/React__namespace.createElement(RowTogglerButton, {
         hostName: props.hostName,
@@ -3418,10 +3458,14 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         hostName: props.hostName,
         allowCellSelection: _allowCellSelection,
         allowRowSelection: _allowRowSelection,
+        cellMemo: props.cellMemo,
+        cellMemoProps: props.cellMemoProps,
+        cellMemoPropsDepth: props.cellMemoPropsDepth,
         cellClassName: props.cellClassName,
         checkIcon: props.checkIcon,
         collapsedRowIcon: props.collapsedRowIcon,
         columns: props.columns,
+        colsProps: colsProps,
         compareSelectionBy: props.compareSelectionBy,
         contextMenuSelected: contextMenuSelected,
         dataKey: props.dataKey,
@@ -3809,6 +3853,7 @@ var FilterMatchMode = Object.freeze({
   EQUALS: 'equals',
   NOT_EQUALS: 'notEquals',
   IN: 'in',
+  NOT_IN: 'notIn',
   LESS_THAN: 'lt',
   LESS_THAN_OR_EQUAL_TO: 'lte',
   GREATER_THAN: 'gt',
@@ -3897,6 +3942,7 @@ var locales = {
     emptySelectionMessage: 'No selected item',
     endsWith: 'Ends with',
     equals: 'Equals',
+    fileChosenMessage: '{0} files',
     fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
     filter: 'Filter',
     firstDayOfWeek: 0,
@@ -3915,6 +3961,7 @@ var locales = {
     nextMonth: 'Next Month',
     nextSecond: 'Next Second',
     nextYear: 'Next Year',
+    noFileChosenMessage: 'No file chosen',
     noFilter: 'No Filter',
     notContains: 'Not contains',
     notEquals: 'Not equals',
@@ -3942,8 +3989,10 @@ var locales = {
     aria: {
       cancelEdit: 'Cancel Edit',
       close: 'Close',
+      collapseLabel: 'Collapse',
       collapseRow: 'Row Collapsed',
       editRow: 'Edit Row',
+      expandLabel: 'Expand',
       expandRow: 'Row Expanded',
       falseLabel: 'False',
       filterConstraint: 'Filter Constraint',
@@ -3968,18 +4017,20 @@ var locales = {
       next: 'Next',
       nextPageLabel: 'Next Page',
       nullLabel: 'Not Selected',
-      pageLabel: 'Page {page}',
       otpLabel: 'Please enter one time password character {0}',
+      pageLabel: 'Page {page}',
       passwordHide: 'Hide Password',
       passwordShow: 'Show Password',
       previous: 'Previous',
       prevPageLabel: 'Previous Page',
+      removeLabel: 'Remove',
       rotateLeft: 'Rotate Left',
       rotateRight: 'Rotate Right',
       rowsPerPageLabel: 'Rows per page',
       saveEdit: 'Save Edit',
       scrollTop: 'Scroll Top',
       selectAll: 'All items selected',
+      selectLabel: 'Select',
       selectRow: 'Row Selected',
       showFilterMenu: 'Show Filter Menu',
       slide: 'Slide',
@@ -3988,6 +4039,7 @@ var locales = {
       stars: '{star} stars',
       trueLabel: 'True',
       unselectAll: 'All items unselected',
+      unselectLabel: 'Unselect',
       unselectRow: 'Row Unselected',
       zoomImage: 'Zoom Image',
       zoomIn: 'Zoom In',
@@ -4205,9 +4257,17 @@ var ColumnFilter = /*#__PURE__*/React__namespace.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 (!utils.DomHandler.isDocument(event.target)) {
+            utils.DomHandler.alignOverlay(overlayRef.current, iconRef.current, context && context.appendTo || PrimeReact__default["default"].appendTo, false);
+          }
         }
-        selfClick.current = false;
       },
       when: overlayVisibleState
     }),
@@ -6906,58 +6966,60 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   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
-    columns.forEach(function (column, i) {
-      var _ref5 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportHeader'), getColumnProp(column, 'exportable')],
+    // First build collection of exportable columns
+    var exportableColumns = getColumns().filter(function (column) {
+      var exportable = getColumnProp(column, 'exportable');
+      var field = getColumnProp(column, 'field');
+
+      // Column must be exportable (or undefined/not set) and have a field defined
+      return exportable !== false && field;
+    });
+
+    // headers
+    exportableColumns.forEach(function (column, i) {
+      var _ref5 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportHeader')],
         field = _ref5[0],
         header = _ref5[1],
-        exportHeader = _ref5[2],
-        exportable = _ref5[3];
-      if (exportable && field) {
-        var columnHeader = String(exportHeader || header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
-        csv = csv + ('"' + columnHeader + '"');
-        if (i < columns.length - 1) {
-          csv = csv + props.csvSeparator;
-        }
+        exportHeader = _ref5[2];
+      var columnHeader = String(exportHeader || header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
+      csv = csv + ('"' + columnHeader + '"');
+      if (i < exportableColumns.length - 1) {
+        csv = csv + props.csvSeparator;
       }
     });
 
-    //body
+    // body
     data.forEach(function (record) {
       csv = csv + '\n';
-      columns.forEach(function (column, i) {
-        var _ref6 = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField'), getColumnProp(column, 'exportable')],
+      exportableColumns.forEach(function (column, i) {
+        var _ref6 = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField')],
           colField = _ref6[0],
-          exportField = _ref6[1],
-          exportable = _ref6[2];
+          exportField = _ref6[1];
         var field = exportField || colField;
-        if (exportable && field) {
-          var cellData = utils.ObjectUtils.resolveFieldData(record, field);
-          if (cellData != null) {
-            if (props.exportFunction) {
-              cellData = props.exportFunction({
-                data: cellData,
-                field: field,
-                rowData: record,
-                column: column
-              });
-            } else {
-              cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, "\u2028");
-            }
+        var cellData = utils.ObjectUtils.resolveFieldData(record, field);
+        if (cellData != null) {
+          if (props.exportFunction) {
+            cellData = props.exportFunction({
+              data: cellData,
+              field: field,
+              rowData: record,
+              column: column
+            });
           } else {
-            cellData = '';
-          }
-          csv = csv + ('"' + cellData + '"');
-          if (i < columns.length - 1) {
-            csv = csv + props.csvSeparator;
+            cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, "\u2028");
           }
+        } else {
+          cellData = '';
+        }
+        csv = csv + ('"' + cellData + '"');
+        if (i < exportableColumns.length - 1) {
+          csv = csv + props.csvSeparator;
         }
       });
     });
@@ -7222,6 +7284,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var frozenBody = utils.ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React__namespace.createElement(TableBody, {
       hostName: "DataTable",
       ref: frozenBodyRef,
+      cellMemo: props.cellMemo,
+      cellMemoProps: props.cellMemoProps,
+      cellMemoPropsDepth: props.cellMemoPropsDepth,
       cellClassName: props.cellClassName,
       cellSelection: props.cellSelection,
       checkIcon: props.checkIcon,
@@ -7306,6 +7371,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
       hostName: "DataTable",
       ref: bodyRef,
+      cellMemo: props.cellMemo,
+      cellMemoProps: props.cellMemoProps,
+      cellMemoPropsDepth: props.cellMemoPropsDepth,
       cellClassName: props.cellClassName,
       cellSelection: props.cellSelection,
       checkIcon: props.checkIcon,