primereact 10.9.4 → 10.9.5

package/datatable/datatable.js

@@ -707,7 +707,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       return props.checked === props.trueValue;
     };
     var _onChange = function onChange(event) {
-      if (props.disabled || props.readonly) {
+      if (props.disabled || props.readOnly) {
         return;
       }
       if (props.onChange) {
@@ -966,7 +966,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       onChange(event);
     };
     var onChange = function onChange(event) {
-      if (props.disabled || props.readonly) {
+      if (props.disabled || props.readOnly) {
         return;
       }
       if (props.onChange) {
@@ -1069,7 +1069,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         onBlur: onBlur,
         onChange: onChange,
         disabled: props.disabled,
-        readOnly: props.readonly,
+        readOnly: props.readOnly,
         required: props.required,
         tabIndex: props.tabIndex,
         className: cx('input')
@@ -1142,7 +1142,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
 
   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),
@@ -1170,13 +1170,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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: {
@@ -1192,10 +1188,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       };
       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');
     };
@@ -1220,34 +1214,22 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       _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
       };
@@ -1258,20 +1240,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         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');
@@ -1292,7 +1260,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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
@@ -1317,128 +1285,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       }
       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);
     };
     var _onMouseDown = function onMouseDown(event) {
       var params = getCellCallbackParams(event);
@@ -1462,7 +1322,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           cell = event.currentTarget;
         switch (event.code) {
           case 'ArrowLeft':
-            var prevCell = _findPrevSelectableCell(cell);
+            var prevCell = props.findPrevSelectableCell(cell);
             if (prevCell) {
               changeTabIndex(cell, prevCell);
               prevCell.focus();
@@ -1470,7 +1330,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             event.preventDefault();
             break;
           case 'ArrowRight':
-            var nextCell = _findNextSelectableCell(cell);
+            var nextCell = props.findNextSelectableCell(cell);
             if (nextCell) {
               changeTabIndex(cell, nextCell);
               nextCell.focus();
@@ -1478,7 +1338,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             event.preventDefault();
             break;
           case 'ArrowUp':
-            var upCell = _findUpSelectableCell(cell);
+            var upCell = props.findUpSelectableCell(cell, index);
             if (upCell) {
               changeTabIndex(cell, upCell);
               upCell.focus();
@@ -1486,7 +1346,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             event.preventDefault();
             break;
           case 'ArrowDown':
-            var downCell = _findDownSelectableCell(cell);
+            var downCell = props.findDownSelectableCell(cell, index);
             if (downCell) {
               changeTabIndex(cell, downCell);
               downCell.focus();
@@ -1525,13 +1385,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         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,
@@ -1544,8 +1397,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       props.onRowEditInit({
         originalEvent: event,
         data: props.rowData,
-        newData: getEditingRowData(),
-        field: field,
+        newData: props.getEditingRowData(),
+        field: props.field,
         index: props.rowIndex
       });
     };
@@ -1553,32 +1406,26 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       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__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) {
@@ -1587,7 +1434,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     }, [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;
       }
@@ -1597,7 +1444,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         var callbackParams = getCellCallbackParams();
         var params = _objectSpread$b(_objectSpread$b({}, callbackParams), {}, {
           editing: editingState,
-          editingKey: editingKey
+          editingKey: props.editingKey
         });
         props.onEditingMetaChange(params);
       }
@@ -1610,16 +1457,16 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       }
     });
     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'
       });
@@ -1628,20 +1475,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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
@@ -1666,12 +1513,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         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
@@ -1686,12 +1533,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         }), 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,
@@ -1741,7 +1588,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           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,
@@ -1815,7 +1662,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           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,
@@ -1825,7 +1672,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       } 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
@@ -1833,9 +1680,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       } 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,
@@ -1903,7 +1750,22 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         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 BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
+    return /*#__PURE__*/React__namespace.createElement(Cell, props);
+  }, function (prevProps, nextProps) {
+    var keysToCompare = ['field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData', 'frozenCol', 'alignFrozenCol'];
+    return utils.ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
   });
   BodyCell.displayName = 'BodyCell';
 
@@ -1919,6 +1781,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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,
@@ -1932,7 +1795,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             data: props.rowData,
             index: props.rowIndex
           }),
-          selected: !props.allowCellSelection && props.selected || props.contextMenuSelected,
+          selected: isRowSelected,
           stripedRows: props.metaData.props.stripedRows
         }
       });
@@ -1961,10 +1824,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         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) {
@@ -2291,32 +2154,176 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       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) {
+      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,
             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,
@@ -2332,20 +2339,31 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             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;
       });
@@ -2495,8 +2513,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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,
@@ -2621,8 +2642,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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;
@@ -2695,6 +2720,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         });
       }
     };
+    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,
@@ -2708,10 +2737,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         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,
@@ -2719,7 +2749,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           });
         }
       } else {
-        selection = data;
+        newSelection = data;
         onSelect({
           originalEvent: originalEvent,
           data: data,
@@ -2727,10 +2757,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         });
       }
       focusOnElement(originalEvent, true);
-      if (props.onSelectionChange && selection !== props.selection) {
+      if (props.onSelectionChange && newSelection !== currentSelection) {
         props.onSelectionChange({
           originalEvent: originalEvent,
-          value: selection,
+          value: newSelection,
           type: type
         });
       }
@@ -2748,11 +2778,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         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({
@@ -2760,15 +2791,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             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,
@@ -2776,18 +2807,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           });
         }
       } 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
         });
       }
@@ -3389,6 +3420,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           checkIcon: props.checkIcon,
           collapsedRowIcon: props.collapsedRowIcon,
           columns: props.columns,
+          colsProps: colsProps,
           compareSelectionBy: props.compareSelectionBy,
           contextMenuSelected: contextMenuSelected,
           dataKey: props.dataKey,
@@ -4172,9 +4204,17 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           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
       }),