primereact 10.5.2 → 10.6.0

package/datatable/datatable.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.datatable = (function (exports, React, PrimeReact$1, componentbase, utils, hooks, arrowdown, arrowup, spinner, paginator, virtualscroller, bars, check, chevrondown, chevronright, pencil, times, overlayservice, ripple, button, csstransition, dropdown, filter, filterslash, plus, trash, inputtext, portal, sortalt, sortamountdown, sortamountupalt, tooltip) {
+this.primereact.datatable = (function (exports, React, PrimeReact$1, componentbase, utils, hooks, arrowdown, arrowup, spinner, paginator, virtualscroller, bars, check, chevrondown, chevronright, pencil, times, overlayservice, ripple, tooltip, button, csstransition, dropdown, filter, filterslash, plus, trash, inputtext, portal, sortalt, sortamountdown, sortamountupalt) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -245,10 +245,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     }
   });
 
-  function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var styles$1 = "\n@layer primereact {\n    .p-datatable {\n        position: relative;\n    }\n\n    .p-datatable > .p-datatable-wrapper {\n        overflow: auto;\n    }\n\n    .p-datatable-table {\n        border-spacing: 0px;\n        width: 100%;\n    }\n\n    .p-datatable .p-sortable-disabled {\n        cursor: auto;\n    }\n\n    .p-datatable .p-sortable-column {\n        cursor: pointer;\n        user-select: none;\n    }\n\n    .p-datatable .p-sortable-column .p-column-title,\n    .p-datatable .p-sortable-column .p-sortable-column-icon,\n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        vertical-align: middle;\n    }\n\n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .p-datatable-selectable .p-selectable-row,\n    .p-datatable-selectable-cell .p-selectable-cell {\n        cursor: pointer;\n    }\n\n    .p-datatable-drag-selection-helper {\n        position: absolute;\n        z-index: 99999999;\n    }\n\n    /* Scrollable */\n    .p-datatable-scrollable > .p-datatable-wrapper {\n        position: relative;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-thead {\n        position: sticky;\n        top: 0;\n        z-index: 1;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n        position: sticky;\n        z-index: 1;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-tfoot {\n        position: sticky;\n        bottom: 0;\n        z-index: 1;\n    }\n\n    .p-datatable-scrollable .p-frozen-column {\n        position: sticky;\n        background: inherit;\n    }\n\n    .p-datatable-scrollable th.p-frozen-column {\n        z-index: 1;\n    }\n\n    .p-datatable-flex-scrollable {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n\n    .p-datatable-flex-scrollable > .p-datatable-wrapper {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        height: 100%;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {\n        position: sticky;\n        z-index: 1;\n    }\n\n    /* Resizable */\n    .p-datatable-resizable-table > .p-datatable-thead > tr > th,\n    .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n    .p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n        overflow: hidden;\n        white-space: nowrap;\n    }\n\n    .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {\n        background-clip: padding-box;\n        position: relative;\n    }\n\n    .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {\n        display: none;\n    }\n\n    .p-datatable .p-column-resizer {\n        display: block;\n        position: absolute;\n        top: 0;\n        right: 0;\n        margin: 0;\n        width: 0.5rem;\n        height: 100%;\n        padding: 0px;\n        cursor: col-resize;\n        border: 1px solid transparent;\n    }\n\n    .p-datatable .p-column-header-content {\n        display: flex;\n        align-items: center;\n    }\n\n    .p-datatable .p-column-resizer-helper {\n        width: 1px;\n        position: absolute;\n        z-index: 10;\n        display: none;\n    }\n\n    .p-datatable .p-row-editor-init,\n    .p-datatable .p-row-editor-save,\n    .p-datatable .p-row-editor-cancel {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Expand */\n    .p-datatable .p-row-toggler {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Reorder */\n    .p-datatable-reorder-indicator-up,\n    .p-datatable-reorder-indicator-down {\n        position: absolute;\n        display: none;\n    }\n\n    .p-reorderable-column,\n    .p-datatable-reorderablerow-handle {\n        cursor: move;\n    }\n\n    /* Loader */\n    .p-datatable .p-datatable-loading-overlay {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n    }\n\n    /* Filter */\n    .p-column-filter-row {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n\n    .p-column-filter-menu {\n        display: inline-flex;\n        margin-left: auto;\n    }\n\n    .p-column-filter-row .p-column-filter-element {\n        flex: 1 1 auto;\n        width: 1%;\n    }\n\n    .p-column-filter-menu-button,\n    .p-column-filter-clear-button {\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        text-decoration: none;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-column-filter-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n    }\n\n    .p-column-filter-row-items {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n\n    .p-column-filter-row-item {\n        cursor: pointer;\n    }\n\n    .p-column-filter-add-button,\n    .p-column-filter-remove-button {\n        justify-content: center;\n    }\n\n    .p-column-filter-add-button .p-button-label,\n    .p-column-filter-remove-button .p-button-label {\n        flex-grow: 0;\n    }\n\n    .p-column-filter-buttonbar {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n        width: auto;\n    }\n\n    /* Responsive */\n    .p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n        display: none;\n    }\n\n    /* VirtualScroller */\n    .p-datatable-virtualscroller-spacer {\n        display: flex;\n    }\n\n    .p-datatable .p-virtualscroller .p-virtualscroller-loading {\n        transform: none;\n        min-height: 0;\n        position: sticky;\n        top: 0;\n        left: 0;\n    }\n\n    /* Alignment */\n    .p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-left,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-left {\n        text-align: left;\n        justify-content: flex-start;\n    }\n\n    .p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-right,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-right {\n        text-align: right;\n        justify-content: flex-end;\n    }\n\n    .p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-center,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-center {\n        text-align: center;\n        justify-content: center;\n    }\n}\n";
-  var classes = {
+  var classes$2 = {
     root: function root(_ref) {
       var props = _ref.props,
         selectable = _ref.selectable;
@@ -285,6 +285,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     thead: 'p-datatable-thead',
     tfoot: 'p-datatable-tfoot',
     footer: 'p-datatable-footer',
+    checkIcon: 'p-checkbox-icon',
     resizeHelper: 'p-column-resizer-helper',
     reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
     reorderIndicatorDown: 'p-datatable-reorder-indicator-down',
@@ -317,7 +318,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     bodyRow: function bodyRow(_ref5) {
       var props = _ref5.rowProps;
       return utils.classNames({
-        'p-highlight': !props.allowCellSelection && props.selected || props.contextMenuSelected,
         'p-highlight-contextmenu': props.contextMenuSelected,
         'p-selectable-row': props.allowRowSelection && props.isSelectable({
           data: props.rowData,
@@ -400,60 +400,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     emptyMessage: 'p-datatable-emptymessage',
     sortBadge: 'p-sortable-column-badge',
     sortIcon: 'p-sortable-column-icon',
-    checkboxWrapper: function checkboxWrapper(_ref13) {
-      var props = _ref13.rowProps,
-        focusedState = _ref13.focusedState;
-      return utils.classNames('p-checkbox p-component', {
-        'p-checkbox-focused': focusedState,
-        'p-disabled': props.disabled
-      });
-    },
-    checkbox: function checkbox(_ref14) {
-      var props = _ref14.rowProps,
-        focusedState = _ref14.focusedState;
-      return utils.classNames('p-checkbox-box p-component', {
-        'p-highlight': props.checked,
-        'p-focus': focusedState
-      });
-    },
-    checkboxIcon: 'p-checkbox-icon',
-    radiobuttonWrapper: function radiobuttonWrapper(_ref15) {
-      var props = _ref15.rowProps,
-        focusedState = _ref15.focusedState;
-      return utils.classNames('p-radiobutton p-component', {
-        'p-radiobutton-focused': focusedState,
-        'p-disabled': props.disabled
-      });
-    },
-    radiobutton: function radiobutton(_ref16) {
-      var props = _ref16.rowProps,
-        focusedState = _ref16.focusedState;
-      return utils.classNames('p-radiobutton-box p-component', {
-        'p-highlight': props.checked,
-        'p-focus': focusedState
-      });
-    },
-    radiobuttonIcon: 'p-radiobutton-icon',
     headerTitle: 'p-column-title',
-    headerCheckboxWrapper: 'p-checkbox p-component',
-    headerCheckbox: function headerCheckbox(_ref17) {
-      var props = _ref17.headerProps,
-        focusedState = _ref17.focusedState;
-      return utils.classNames('p-checkbox-box p-component', {
-        'p-highlight': props.checked,
-        'p-disabled': props.disabled,
-        'p-focus': focusedState
-      });
-    },
-    headerCheckboxIcon: 'p-checkbox-icon',
     headerContent: 'p-column-header-content',
-    headerCell: function headerCell(_ref18) {
-      var props = _ref18.headerProps,
-        frozen = _ref18.frozen,
-        sortMeta = _ref18.sortMeta,
-        align = _ref18.align,
-        _isSortableDisabled = _ref18._isSortableDisabled,
-        getColumnProp = _ref18.getColumnProp;
+    headerCell: function headerCell(_ref13) {
+      var props = _ref13.headerProps,
+        frozen = _ref13.frozen,
+        sortMeta = _ref13.sortMeta,
+        align = _ref13.align,
+        _isSortableDisabled = _ref13._isSortableDisabled,
+        getColumnProp = _ref13.getColumnProp;
       return utils.ObjectUtils.isEmpty(props) ? utils.classNames('p-filter-column', {
         'p-frozen-column': frozen
       }) : utils.classNames(_defineProperty({
@@ -467,9 +422,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen
       }, "p-align-".concat(align), !!align));
     },
-    footerCell: function footerCell(_ref19) {
-      var getColumnProp = _ref19.getColumnProp,
-        align = _ref19.align;
+    footerCell: function footerCell(_ref14) {
+      var getColumnProp = _ref14.getColumnProp,
+        align = _ref14.align;
       return utils.classNames(_defineProperty({
         'p-frozen-column': getColumnProp('frozen')
       }, "p-align-".concat(align), !!align));
@@ -483,13 +438,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     resizeHelper: {
       display: 'none'
     },
-    reorderIndicatorUp: function reorderIndicatorUp(_ref20) {
-      var style = _ref20.style;
-      return _objectSpread$c({}, style);
+    reorderIndicatorUp: function reorderIndicatorUp(_ref15) {
+      var style = _ref15.style;
+      return _objectSpread$e({}, style);
     },
-    reorderIndicatorDown: function reorderIndicatorDown(_ref21) {
-      var style = _ref21.style;
-      return _objectSpread$c({}, style);
+    reorderIndicatorDown: function reorderIndicatorDown(_ref16) {
+      var style = _ref16.style;
+      return _objectSpread$e({}, style);
     }
   };
   var DataTableBase = componentbase.ComponentBase.extend({
@@ -641,7 +596,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     },
     css: {
       styles: styles$1,
-      classes: classes,
+      classes: classes$2,
       inlineStyles: inlineStyles
     }
   });
@@ -675,13 +630,217 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     return target;
   }
 
-  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 classes$1 = {
+    box: 'p-checkbox-box',
+    input: 'p-checkbox-input',
+    icon: 'p-checkbox-icon',
+    root: function root(_ref) {
+      var props = _ref.props,
+        checked = _ref.checked;
+      return utils.classNames('p-checkbox p-component', {
+        'p-highlight': checked,
+        'p-disabled': props.disabled,
+        'p-invalid': props.invalid,
+        'p-variant-filled': props.variant === 'filled'
+      });
+    }
+  };
+  var CheckboxBase = componentbase.ComponentBase.extend({
+    defaultProps: {
+      __TYPE: 'Checkbox',
+      autoFocus: false,
+      checked: false,
+      className: null,
+      disabled: false,
+      falseValue: false,
+      icon: null,
+      id: null,
+      inputId: null,
+      inputRef: null,
+      invalid: false,
+      name: null,
+      onChange: null,
+      onContextMenu: null,
+      onMouseDown: null,
+      readOnly: false,
+      required: false,
+      style: null,
+      tabIndex: null,
+      tooltip: null,
+      tooltipOptions: null,
+      trueValue: true,
+      value: null,
+      children: undefined
+    },
+    css: {
+      classes: classes$1
+    }
+  });
+
+  function ownKeys$d(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$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+    var mergeProps = hooks.useMergeProps();
+    var context = React__namespace.useContext(PrimeReact$1.PrimeReactContext);
+    var props = CheckboxBase.getProps(inProps, context);
+    var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
+        props: props,
+        context: {
+          checked: props.checked === props.trueValue,
+          disabled: props.disabled
+        }
+      }),
+      ptm = _CheckboxBase$setMeta.ptm,
+      cx = _CheckboxBase$setMeta.cx,
+      isUnstyled = _CheckboxBase$setMeta.isUnstyled;
+    componentbase.useHandleStyle(CheckboxBase.css.styles, isUnstyled, {
+      name: 'checkbox'
+    });
+    var elementRef = React__namespace.useRef(null);
+    var inputRef = React__namespace.useRef(props.inputRef);
+    var isChecked = function isChecked() {
+      return props.checked === props.trueValue;
+    };
+    var _onChange = function onChange(event) {
+      if (props.disabled || props.readonly) {
+        return;
+      }
+      if (props.onChange) {
+        var _props$onChange;
+        var _checked = isChecked();
+        var value = _checked ? props.falseValue : props.trueValue;
+        var eventData = {
+          originalEvent: event,
+          value: props.value,
+          checked: value,
+          stopPropagation: function stopPropagation() {
+            event === null || event === void 0 || event.stopPropagation();
+          },
+          preventDefault: function preventDefault() {
+            event === null || event === void 0 || event.preventDefault();
+          },
+          target: {
+            type: 'checkbox',
+            name: props.name,
+            id: props.id,
+            value: props.value,
+            checked: value
+          }
+        };
+        props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, eventData);
+
+        // do not continue if the user defined click wants to prevent
+        if (event.defaultPrevented) {
+          return;
+        }
+        utils.DomHandler.focus(inputRef.current);
+      }
+    };
+    var _onFocus = function onFocus() {
+      var _props$onFocus;
+      props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props);
+    };
+    var _onBlur = function onBlur() {
+      var _props$onBlur;
+      props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
+    };
+    React__namespace.useImperativeHandle(ref, function () {
+      return {
+        props: props,
+        focus: function focus() {
+          return utils.DomHandler.focus(inputRef.current);
+        },
+        getElement: function getElement() {
+          return elementRef.current;
+        },
+        getInput: function getInput() {
+          return inputRef.current;
+        }
+      };
+    });
+    React__namespace.useEffect(function () {
+      utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
+    }, [inputRef, props.inputRef]);
+    hooks.useUpdateEffect(function () {
+      inputRef.current.checked = isChecked();
+    }, [props.checked, props.trueValue]);
+    hooks.useMountEffect(function () {
+      if (props.autoFocus) {
+        utils.DomHandler.focus(inputRef.current, props.autoFocus);
+      }
+    });
+    var checked = isChecked();
+    var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
+    var otherProps = CheckboxBase.getOtherProps(props);
+    var rootProps = mergeProps({
+      id: props.id,
+      className: utils.classNames(props.className, cx('root', {
+        checked: checked
+      })),
+      style: props.style,
+      'data-p-highlight': checked,
+      'data-p-disabled': props.disabled,
+      onContextMenu: props.onContextMenu,
+      onMouseDown: props.onMouseDown
+    }, otherProps, ptm('root'));
+    var createInputElement = function createInputElement() {
+      var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
+      var inputProps = mergeProps(_objectSpread$d({
+        id: props.inputId,
+        type: 'checkbox',
+        className: cx('input'),
+        name: props.name,
+        tabIndex: props.tabIndex,
+        onFocus: function onFocus(e) {
+          return _onFocus();
+        },
+        onBlur: function onBlur(e) {
+          return _onBlur();
+        },
+        onChange: function onChange(e) {
+          return _onChange(e);
+        },
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        required: props.required,
+        'aria-invalid': props.invalid,
+        checked: checked
+      }, ariaProps), ptm('input'));
+      return /*#__PURE__*/React__namespace.createElement("input", _extends({
+        ref: inputRef
+      }, inputProps));
+    };
+    var createBoxElement = function createBoxElement() {
+      var iconProps = mergeProps({
+        className: cx('icon')
+      }, ptm('icon'));
+      var boxProps = mergeProps({
+        className: cx('box', {
+          checked: checked
+        }),
+        'data-p-highlight': checked,
+        'data-p-disabled': props.disabled
+      }, ptm('box'));
+      var icon = checked ? props.icon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, iconProps) : null;
+      var checkboxIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$d({}, iconProps), {
+        props: props,
+        checked: checked
+      });
+      return /*#__PURE__*/React__namespace.createElement("div", boxProps, checkboxIcon);
+    };
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
+      ref: elementRef
+    }, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+      target: elementRef,
+      content: props.tooltip,
+      pt: ptm('tooltip')
+    }, props.tooltipOptions)));
+  }));
+  Checkbox.displayName = 'Checkbox';
+
+  function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
-    var _React$useState = React__namespace.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focusedState = _React$useState2[0],
-      setFocusedState = _React$useState2[1];
     var mergeProps = hooks.useMergeProps();
     var getColumnProps = function getColumnProps() {
       return ColumnBase.getCProps(props.column);
@@ -695,9 +854,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         props: getColumnProps(),
         parent: props.metaData,
         hostName: props.hostName,
-        state: {
-          focused: focusedState
-        },
+        state: {},
         context: {
           index: props.tabIndex,
           checked: props.checked,
@@ -708,88 +865,234 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
     };
-    var _onFocus = function onFocus() {
-      setFocusedState(true);
-    };
-    var _onBlur = function onBlur() {
-      setFocusedState(false);
-    };
-    var _onClick = function onClick(event) {
+    var onChange = function onChange(event) {
       if (!props.disabled) {
-        setFocusedState(true);
         props.onChange(event);
-        event.preventDefault();
-      }
-    };
-    var _onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space' || event.key === ' ') {
-        // event.key is for Android support
-        _onClick(event);
-        event.preventDefault();
       }
     };
     var checkboxIconProps = mergeProps({
-      className: cx('checkboxIcon')
-    }, getColumnPTOptions('checkboxIcon'));
+      className: cx('checkIcon')
+    }, getColumnPTOptions('rowCheckbox.icon'));
     var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, checkboxIconProps) : null;
-    var checkIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$b({}, checkboxIconProps), {
+    var checkIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$c({}, checkboxIconProps), {
       props: props
     });
     var tabIndex = props.disabled ? null : '0';
-    var checkboxWrapperProps = mergeProps({
-      className: cx('checkboxWrapper', {
-        rowProps: props,
-        focusedState: focusedState
-      }),
-      onClick: function onClick(e) {
-        return _onClick(e);
-      }
-    }, getColumnPTOptions('checkboxWrapper'));
     var checkboxProps = mergeProps({
-      className: cx('checkbox', {
-        rowProps: props,
-        focusedState: focusedState
-      }),
       role: 'checkbox',
       'aria-checked': props.checked,
       tabIndex: tabIndex,
-      onKeyDown: function onKeyDown(e) {
-        return _onKeyDown(e);
-      },
-      onFocus: function onFocus(e) {
-        return _onFocus();
-      },
-      onBlur: function onBlur(e) {
-        return _onBlur();
-      },
-      'aria-label': props.ariaLabel
-    }, getColumnPTOptions('checkbox'));
-    return /*#__PURE__*/React__namespace.createElement("div", checkboxWrapperProps, /*#__PURE__*/React__namespace.createElement("div", checkboxProps, checkIcon));
+      onChange: onChange,
+      'aria-label': props.ariaLabel,
+      checked: props.checked,
+      icon: checkIcon,
+      disabled: props.disabled
+    }, getColumnPTOptions('rowCheckbox'));
+    return /*#__PURE__*/React__namespace.createElement(Checkbox, checkboxProps);
   });
   RowCheckbox.displayName = 'RowCheckbox';
 
+  var classes = {
+    root: function root(_ref) {
+      var props = _ref.props;
+      return utils.classNames('p-radiobutton p-component', {
+        'p-highlight': props.checked,
+        'p-disabled': props.disabled,
+        'p-invalid': props.invalid
+      });
+    },
+    box: 'p-radiobutton-box',
+    input: 'p-radiobutton-input',
+    icon: 'p-radiobutton-icon'
+  };
+  var RadioButtonBase = componentbase.ComponentBase.extend({
+    defaultProps: {
+      __TYPE: 'RadioButton',
+      autoFocus: false,
+      checked: false,
+      className: null,
+      disabled: false,
+      id: null,
+      inputId: null,
+      inputRef: null,
+      invalid: false,
+      name: null,
+      onChange: null,
+      onClick: null,
+      required: false,
+      style: null,
+      tabIndex: null,
+      tooltip: null,
+      tooltipOptions: null,
+      value: null,
+      children: undefined
+    },
+    css: {
+      classes: classes
+    }
+  });
+
+  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 RadioButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+    var mergeProps = hooks.useMergeProps();
+    var context = React__namespace.useContext(PrimeReact$1.PrimeReactContext);
+    var props = RadioButtonBase.getProps(inProps, context);
+    var elementRef = React__namespace.useRef(null);
+    var inputRef = React__namespace.useRef(props.inputRef);
+    var _RadioButtonBase$setM = RadioButtonBase.setMetaData({
+        props: props
+      }),
+      ptm = _RadioButtonBase$setM.ptm,
+      cx = _RadioButtonBase$setM.cx,
+      isUnstyled = _RadioButtonBase$setM.isUnstyled;
+    componentbase.useHandleStyle(RadioButtonBase.css.styles, isUnstyled, {
+      name: 'radiobutton'
+    });
+    var select = function select(event) {
+      onChange(event);
+    };
+    var onChange = function onChange(event) {
+      if (props.disabled || props.readonly) {
+        return;
+      }
+      if (props.onChange) {
+        var checked = props.checked;
+        var radioClicked = event.target instanceof HTMLDivElement;
+        var inputClicked = event.target === inputRef.current;
+        var isInputToggled = inputClicked && event.target.checked !== checked;
+        var isRadioToggled = radioClicked && (utils.DomHandler.hasClass(elementRef.current, 'p-radiobutton-checked') === checked ? !checked : false);
+        var value = !checked;
+        var eventData = {
+          originalEvent: event,
+          value: props.value,
+          checked: value,
+          stopPropagation: function stopPropagation() {
+            event === null || event === void 0 || event.stopPropagation();
+          },
+          preventDefault: function preventDefault() {
+            event === null || event === void 0 || event.preventDefault();
+          },
+          target: {
+            type: 'radio',
+            name: props.name,
+            id: props.id,
+            value: props.value,
+            checked: value
+          }
+        };
+        if (isInputToggled || isRadioToggled) {
+          var _props$onChange;
+          props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, eventData);
+
+          // do not continue if the user defined click wants to prevent
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (isRadioToggled) {
+            inputRef.current.checked = value;
+          }
+        }
+        utils.DomHandler.focus(inputRef.current);
+      }
+    };
+    var onFocus = function onFocus(event) {
+      var _props$onFocus;
+      props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
+    };
+    var onBlur = function onBlur(event) {
+      var _props$onBlur;
+      props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event);
+    };
+    React__namespace.useImperativeHandle(ref, function () {
+      return {
+        props: props,
+        select: select,
+        focus: function focus() {
+          return utils.DomHandler.focus(inputRef.current);
+        },
+        getElement: function getElement() {
+          return elementRef.current;
+        },
+        getInput: function getInput() {
+          return inputRef.current;
+        }
+      };
+    });
+    React__namespace.useEffect(function () {
+      if (inputRef.current) {
+        inputRef.current.checked = props.checked;
+      }
+    }, [props.checked]);
+    React__namespace.useEffect(function () {
+      utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
+    }, [inputRef, props.inputRef]);
+    hooks.useMountEffect(function () {
+      if (props.autoFocus) {
+        utils.DomHandler.focus(inputRef.current, props.autoFocus);
+      }
+    });
+    var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
+    var otherProps = RadioButtonBase.getOtherProps(props);
+    var rootProps = mergeProps({
+      id: props.id,
+      className: utils.classNames(props.className, cx('root')),
+      style: props.style,
+      'data-p-checked': props.checked
+    }, RadioButtonBase.getOtherProps(props), ptm('root'));
+    var createInputElement = function createInputElement() {
+      var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
+      var inputProps = mergeProps(_objectSpread$b({
+        id: props.inputId,
+        type: 'radio',
+        name: props.name,
+        defaultChecked: props.checked,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onChange: onChange,
+        disabled: props.disabled,
+        readOnly: props.readonly,
+        required: props.required,
+        tabIndex: props.tabIndex,
+        className: cx('input')
+      }, ariaProps), ptm('input'));
+      return /*#__PURE__*/React__namespace.createElement("input", _extends({
+        ref: inputRef
+      }, inputProps));
+    };
+    var createBoxElement = function createBoxElement() {
+      var boxProps = mergeProps({
+        className: cx('box')
+      }, ptm('box'));
+      var iconProps = mergeProps({
+        className: cx('icon')
+      }, ptm('icon'));
+      return /*#__PURE__*/React__namespace.createElement("div", boxProps, /*#__PURE__*/React__namespace.createElement("div", iconProps));
+    };
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
+      ref: elementRef
+    }, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+      target: elementRef,
+      content: props.tooltip,
+      pt: ptm('tooltip')
+    }, props.tooltipOptions)));
+  }));
+  RadioButton.displayName = 'RadioButton';
+
   var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
-    var _React$useState = React__namespace.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focusedState = _React$useState2[0],
-      setFocusedState = _React$useState2[1];
-    var inputRef = React__namespace.useRef(null);
     var mergeProps = hooks.useMergeProps();
     var getColumnProps = function getColumnProps() {
       return ColumnBase.getCProps(props.column);
     };
     var _props$ptCallbacks = props.ptCallbacks,
       ptm = _props$ptCallbacks.ptm,
-      ptmo = _props$ptCallbacks.ptmo,
-      cx = _props$ptCallbacks.cx;
+      ptmo = _props$ptCallbacks.ptmo;
     var getColumnPTOptions = function getColumnPTOptions(key) {
       var columnMetaData = {
         props: getColumnProps(),
         parent: props.metaData,
         hostName: props.hostName,
-        state: {
-          focused: focusedState
-        },
+        state: {},
         context: {
           index: props.tabIndex,
           checked: props.checked,
@@ -800,73 +1103,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
     };
-    var _onFocus = function onFocus() {
-      setFocusedState(true);
-    };
-    var _onBlur = function onBlur() {
-      setFocusedState(false);
-    };
-    var _onClick = function onClick(event) {
+    var onChange = function onChange(event) {
       if (!props.disabled) {
         props.onChange(event);
-        utils.DomHandler.focus(inputRef.current);
       }
     };
-    var _onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space' || event.key === ' ') {
-        // event.key is for Android support
-        _onClick(event);
-        event.preventDefault();
-      }
-    };
-    var _onChange = function onChange(event) {
-      _onClick(event);
-    };
-    var name = "".concat(props.tableSelector, "_dt_radio");
-    var radiobuttonWrapperProps = mergeProps({
-      className: cx('radiobuttonWrapper', {
-        rowProps: props,
-        focusedState: focusedState
-      })
-    }, getColumnPTOptions('radiobuttonWrapper'));
-    var hiddenInputWrapperProps = mergeProps({
-      className: 'p-hidden-accessible'
-    }, getColumnPTOptions('hiddenInputWrapper'));
-    var hiddenInputProps = mergeProps({
-      name: name,
-      type: 'radio',
-      checked: props.checked,
-      onFocus: function onFocus(e) {
-        return _onFocus();
-      },
-      onBlur: function onBlur(e) {
-        return _onBlur();
-      },
-      onChange: function onChange(e) {
-        return _onChange(e);
-      },
-      onKeyDown: function onKeyDown(e) {
-        return _onKeyDown(e);
-      },
-      'aria-label': props.ariaLabel
-    }, getColumnPTOptions('hiddenInput'));
-    var radiobuttonProps = mergeProps({
-      className: cx('radiobutton', {
-        rowProps: props,
-        focusedState: focusedState
-      }),
-      onClick: function onClick(e) {
-        return _onClick(e);
-      },
+    var radioButtonProps = mergeProps({
       role: 'radio',
-      'aria-checked': props.checked
+      'aria-checked': props.checked,
+      checked: props.checked,
+      disabled: props.disabled,
+      name: "".concat(props.tableSelector, "_dt_radio"),
+      onChange: onChange
     }, getColumnPTOptions('radiobutton'));
-    var radiobuttonIconProps = mergeProps({
-      className: cx('radiobuttonIcon')
-    }, getColumnPTOptions('radiobuttonIcon'));
-    return /*#__PURE__*/React__namespace.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", _extends({
-      ref: inputRef
-    }, hiddenInputProps))), /*#__PURE__*/React__namespace.createElement("div", radiobuttonProps, /*#__PURE__*/React__namespace.createElement("div", radiobuttonIconProps)));
+    return /*#__PURE__*/React__namespace.createElement(RadioButton, radioButtonProps);
   });
   RowRadioButton.displayName = 'RowRadioButton';
 
@@ -1096,16 +1346,16 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           if (next) {
             right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
-          styleObject['right'] = right + 'px';
+          styleObject.right = right + 'px';
         } else {
           var left = 0;
           var prev = elementRef.current && elementRef.current.previousElementSibling;
           if (prev) {
             left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
           }
-          styleObject['left'] = left + 'px';
+          styleObject.left = left + 'px';
         }
-        var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+        var isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
         !isSameStyle && setStyleObjectState(styleObject);
       }
     };
@@ -1177,7 +1427,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     };
     var _onKeyDown = function onKeyDown(event) {
       if (props.editMode !== 'row') {
-        if (event.code === 'Enter' || event.code === 'Tab') {
+        if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Tab') {
           switchCellToViewMode(event, true);
         }
         if (event.code === 'Escape') {
@@ -1348,7 +1598,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       return /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, content);
     };
     var createElement = function createElement() {
-      var content, editorKeyHelper;
+      var content;
+      var editorKeyHelper;
       var cellSelected = props.allowCellSelection && isSelected();
       var isRowEditor = props.editMode === 'row';
       var tabIndex = getTabIndex(cellSelected);
@@ -1456,7 +1707,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         }), getColumnPTOptions('rowToggler'));
         content = /*#__PURE__*/React__namespace.createElement("button", rowTogglerProps, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
         if (body) {
-          expanderProps['element'] = content;
+          expanderProps.element = content;
           content = utils.ObjectUtils.getJSXElement(body, props.rowData, {
             column: props.column,
             field: field,
@@ -1530,7 +1781,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           content = /*#__PURE__*/React__namespace.createElement("button", rowEditorInitButtonProps, rowEditorInitIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
         }
         if (body) {
-          rowEditorProps['element'] = content;
+          rowEditorProps.element = content;
           content = utils.ObjectUtils.getJSXElement(body, props.rowData, {
             column: props.column,
             field: field,
@@ -1562,7 +1813,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       } else {
         content = value;
       }
-      content = typeof content == 'boolean' ? content.toString() : content;
+      content = typeof content === 'boolean' ? content.toString() : content;
       if (!isRowEditor && editor) {
         var editorKeyHelperProps = mergeProps({
           tabIndex: '0',
@@ -1730,9 +1981,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           }
         }
         return groupRowSpan === 1 ? null : groupRowSpan;
-      } else {
-        return null;
       }
+      return null;
     };
     var _onClick = function onClick(event) {
       props.onRowClick({
@@ -1804,6 +2054,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             onEndKey(row, event);
             break;
           case 'Enter':
+          case 'NumpadEnter':
             onEnterKey(row, event, target);
             break;
           case 'Space':
@@ -1945,9 +2196,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         } else {
           var editingRowIndex = findIndex(props.editingRows, data);
           editingRows = props.editingRows ? _toConsumableArray(props.editingRows) : [];
-          if (editingRowIndex !== -1) editingRows = editingRows.filter(function (val, i) {
-            return i !== editingRowIndex;
-          });else editingRows.push(data);
+          if (editingRowIndex !== -1) {
+            editingRows = editingRows.filter(function (val, i) {
+              return i !== editingRowIndex;
+            });
+          } else {
+            editingRows.push(data);
+          }
         }
         props.onRowEditChange({
           originalEvent: originalEvent,
@@ -2135,7 +2390,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       'data-p-highlight': props.selected,
       'data-p-highlight-contextmenu': props.contextMenuSelected
     }, getBodyRowPTOptions('bodyRow'), {
-      className: rowClassName // #5983 must be last so all unstyled merging takes place first
+      className: utils.classNames(rowClassName) // #5983 must be last so all unstyled merging takes place first
     });
 
     return /*#__PURE__*/React__namespace.createElement("tr", rowProps, content);
@@ -2244,7 +2499,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var isRadioSelectionModeInColumn = props.selectionModeInColumn === 'single';
     var isCheckboxSelectionModeInColumn = props.selectionModeInColumn === 'multiple';
     var equals = function equals(data1, data2) {
-      if (allowCellSelection()) return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);else return props.compareSelectionBy === 'equals' ? data1 === data2 : utils.ObjectUtils.equals(data1, data2, props.dataKey);
+      if (allowCellSelection()) {
+        return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);
+      }
+      return props.compareSelectionBy === 'equals' ? data1 === data2 : utils.ObjectUtils.equals(data1, data2, props.dataKey);
     };
     var isSelectionEnabled = function isSelectionEnabled() {
       return props.selectionMode || props.selectionModeInColumn !== null || props.columns && props.columns.some(function (col) {
@@ -2282,37 +2540,41 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       if (rowData && props.expandedRows) {
         if (isSubheaderGrouping && props.expandableRowGroups) {
           return isRowGroupExpanded(rowData);
-        } else {
-          if (props.dataKey) {
-            var rowId = utils.ObjectUtils.resolveFieldData(rowData, props.dataKey);
-            var expanded = false;
-            if (props.expandedRows) {
-              if (Array.isArray(props.expandedRows)) {
-                expanded = props.expandedRows.some(function (row) {
-                  return utils.ObjectUtils.resolveFieldData(row, props.dataKey) === rowId;
-                });
-              } else {
-                expanded = props.expandedRows[rowId] !== undefined;
-              }
+        }
+        if (props.dataKey) {
+          var rowId = utils.ObjectUtils.resolveFieldData(rowData, props.dataKey);
+          var expanded = false;
+          if (props.expandedRows) {
+            if (Array.isArray(props.expandedRows)) {
+              expanded = props.expandedRows.some(function (row) {
+                return utils.ObjectUtils.resolveFieldData(row, props.dataKey) === rowId;
+              });
+            } else {
+              expanded = props.expandedRows[rowId] !== undefined;
             }
-            return expanded;
-          } else {
-            return findIndex(props.expandedRows, rowData) !== -1;
           }
+          return expanded;
         }
+        return findIndex(props.expandedRows, rowData) !== -1;
       }
       return false;
     };
     var isRowGroupExpanded = function isRowGroupExpanded(rowData) {
-      if (props.dataKey === props.groupRowsBy) return Object.keys(props.expandedRows).some(function (data) {
-        return utils.ObjectUtils.equals(data, utils.ObjectUtils.resolveFieldData(rowData, props.dataKey));
-      });else return props.expandedRows.some(function (data) {
+      if (props.dataKey === props.groupRowsBy) {
+        return Object.keys(props.expandedRows).some(function (data) {
+          return utils.ObjectUtils.equals(data, utils.ObjectUtils.resolveFieldData(rowData, props.dataKey));
+        });
+      }
+      return props.expandedRows.some(function (data) {
         return utils.ObjectUtils.equals(data, rowData, props.groupRowsBy);
       });
     };
     var isRowEditing = function isRowEditing(rowData) {
       if (props.editMode === 'row' && rowData && props.editingRows) {
-        if (props.dataKey) return props.editingRows ? props.editingRows[utils.ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;else return findIndex(props.editingRows, rowData) !== -1;
+        if (props.dataKey) {
+          return props.editingRows ? props.editingRows[utils.ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;
+        }
+        return findIndex(props.editingRows, rowData) !== -1;
       }
       return false;
     };
@@ -2358,7 +2620,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var rowGroupHeaderStyle = function rowGroupHeaderStyle() {
       if (props.scrollable) {
         return {
-          top: rowGroupHeaderStyleObjectState['top']
+          top: rowGroupHeaderStyleObjectState.top
         };
       }
       return null;
@@ -2372,23 +2634,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       if (prevRowData) {
         var previousRowFieldData = utils.ObjectUtils.resolveFieldData(prevRowData, props.groupRowsBy);
         return !utils.ObjectUtils.deepEquals(currentRowFieldData, previousRowFieldData);
-      } else {
-        return true;
       }
+      return true;
     };
     var shouldRenderRowGroupFooter = function shouldRenderRowGroupFooter(value, rowData, i, expanded) {
       if (props.expandableRowGroups && !expanded) {
         return false;
-      } else {
-        var currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
-        var nextRowData = value[i + 1];
-        if (nextRowData) {
-          var nextRowFieldData = utils.ObjectUtils.resolveFieldData(nextRowData, props.groupRowsBy);
-          return !utils.ObjectUtils.deepEquals(currentRowFieldData, nextRowFieldData);
-        } else {
-          return true;
-        }
       }
+      var currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
+      var nextRowData = value[i + 1];
+      if (nextRowData) {
+        var nextRowFieldData = utils.ObjectUtils.resolveFieldData(nextRowData, props.groupRowsBy);
+        return !utils.ObjectUtils.deepEquals(currentRowFieldData, nextRowFieldData);
+      }
+      return true;
     };
     var updateFrozenRowStickyPosition = function updateFrozenRowStickyPosition() {
       elementRef.current.style.top = utils.DomHandler.getOuterHeight(elementRef.current.previousElementSibling) + 'px';
@@ -2514,7 +2773,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       anchorCellIndex.current = event.cellIndex;
     };
     var selectRange = function selectRange(event) {
-      var rangeStart, rangeEnd, selectedSize;
+      var rangeStart;
+      var rangeEnd;
+      var selectedSize;
       var isAllowCellSelection = allowCellSelection();
       var index = utils.ObjectUtils.findIndexInList(event.data, props.value, props.dataKey);
       if (rangeRowIndex.current > anchorRowIndex.current) {
@@ -2536,10 +2797,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       } else {
         rangeStart = rangeEnd = rangeRowIndex.current;
       }
-      if (props.paginator) {
-        rangeStart = Math.max(rangeStart - props.first, 0);
-        rangeEnd -= props.first;
-      }
       return isAllowCellSelection ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
     };
     var selectRangeOnRow = function selectRangeOnRow(event, rowRangeStart, rowRangeEnd) {
@@ -2563,9 +2820,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       return selection;
     };
     var selectRangeOnCell = function selectRangeOnCell(event, rowRangeStart, rowRangeEnd) {
-      var cellRangeStart,
-        cellRangeEnd,
-        cellIndex = event.cellIndex;
+      var cellRangeStart;
+      var cellRangeEnd;
+      var cellIndex = event.cellIndex;
       if (cellIndex > anchorCellIndex.current) {
         cellRangeStart = anchorCellIndex.current;
         cellRangeEnd = cellIndex;
@@ -2609,18 +2866,26 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       return selection;
     };
     var onSelect = function onSelect(event) {
-      if (allowCellSelection()) props.onCellSelect && props.onCellSelect(_objectSpread$7(_objectSpread$7({
-        originalEvent: event.originalEvent
-      }, event.data), {}, {
-        type: event.type
-      }));else props.onRowSelect && props.onRowSelect(event);
+      if (allowCellSelection()) {
+        props.onCellSelect && props.onCellSelect(_objectSpread$7(_objectSpread$7({
+          originalEvent: event.originalEvent
+        }, event.data), {}, {
+          type: event.type
+        }));
+      } else {
+        props.onRowSelect && props.onRowSelect(event);
+      }
     };
     var onUnselect = function onUnselect(event) {
-      if (allowCellSelection()) props.onCellUnselect && props.onCellUnselect(_objectSpread$7(_objectSpread$7({
-        originalEvent: event.originalEvent
-      }, event.data), {}, {
-        type: event.type
-      }));else props.onRowUnselect && props.onRowUnselect(event);
+      if (allowCellSelection()) {
+        props.onCellUnselect && props.onCellUnselect(_objectSpread$7(_objectSpread$7({
+          originalEvent: event.originalEvent
+        }, event.data), {}, {
+          type: event.type
+        }));
+      } else {
+        props.onRowUnselect && props.onRowUnselect(event);
+      }
     };
     var enableDragSelection = function enableDragSelection(event) {
       if (props.dragSelection && !dragSelectionHelper.current) {
@@ -2723,7 +2988,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       if (props.onContextMenu || props.onContextMenuSelectionChange) {
         var hasSelection = utils.ObjectUtils.isNotEmpty(props.selection);
         var data = hasSelection ? props.selection : event.data;
-        if (hasSelection) utils.DomHandler.clearSelection();
+        if (hasSelection) {
+          utils.DomHandler.clearSelection();
+        }
         if (props.onContextMenuSelectionChange) {
           props.onContextMenuSelectionChange({
             originalEvent: event.originalEvent,
@@ -2750,7 +3017,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     };
     var onRowMouseDown = function onRowMouseDown(e) {
       var event = e.originalEvent;
-      if (!isUnsyled && utils.DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;else event.currentTarget.draggable = false;
+      if (!isUnsyled && utils.DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
+        event.currentTarget.draggable = true;
+      } else {
+        event.currentTarget.draggable = false;
+      }
       if (allowRowDrag(e)) {
         enableDragSelection(event);
         anchorRowIndex.current = e.index;
@@ -2921,8 +3192,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         y = _initialDragPosition$.y;
       var dx = event.clientX - x;
       var dy = event.clientY - y;
-      if (dy < 0) dragSelectionHelper.current.style.top = "".concat(event.pageY + 5, "px");
-      if (dx < 0) dragSelectionHelper.current.style.left = "".concat(event.pageX + 5, "px");
+      if (dy < 0) {
+        dragSelectionHelper.current.style.top = "".concat(event.pageY + 5, "px");
+      }
+      if (dx < 0) {
+        dragSelectionHelper.current.style.left = "".concat(event.pageX + 5, "px");
+      }
       dragSelectionHelper.current.style.height = "".concat(Math.abs(dy), "px");
       dragSelectionHelper.current.style.width = "".concat(Math.abs(dx), "px");
       event.preventDefault();
@@ -3304,16 +3579,16 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           if (next) {
             right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
-          styleObject['right'] = right + 'px';
+          styleObject.right = right + 'px';
         } else {
           var left = 0;
           var prev = elementRef.current.previousElementSibling;
           if (prev) {
             left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
           }
-          styleObject['left'] = left + 'px';
+          styleObject.left = left + 'px';
         }
-        var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+        var isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
         !isSameStyle && setStyleObjectState(styleObject);
       }
     };
@@ -3669,7 +3944,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
   function ariaLabel(ariaKey, options) {
     var _locale = PrimeReact.locale;
     try {
-      var _ariaLabel = localeOptions(_locale)['aria'][ariaKey];
+      var _ariaLabel = localeOptions(_locale).aria[ariaKey];
       if (_ariaLabel) {
         for (var key in options) {
           if (options.hasOwnProperty(key)) {
@@ -3687,7 +3962,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     return locales[_locale];
   }
 
-  var styles = "";
+  var styles = '';
   var FocusTrapBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'FocusTrap',
@@ -3858,7 +4133,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       bindOverlayListener = _useOverlayListener2[0],
       unbindOverlayListener = _useOverlayListener2[1];
     var hasFilter = function hasFilter() {
-      if (!filterStoreModel || !filterModel) return false;
+      if (!filterStoreModel || !filterModel) {
+        return false;
+      }
       return filterStoreModel.operator ? !isFilterBlank(filterModel.constraints[0].value) : !isFilterBlank(filterModel.value);
     };
     var hasRowFilter = function hasRowFilter() {
@@ -3914,11 +4191,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             matchMode: filterStoreModel.constraints[0].matchMode,
             operator: filterStoreModel.operator
           };
-        } else {
-          return {
-            matchMode: filterStoreModel.matchMode
-          };
         }
+        return {
+          matchMode: filterStoreModel.matchMode
+        };
       }
     };
     var findDataType = function findDataType() {
@@ -4145,7 +4421,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       selfClick.current = true;
     };
     var onOverlayEnter = function onOverlayEnter() {
-      utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['overlay'] || PrimeReact__default["default"].zIndex['overlay']);
+      utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex.overlay || PrimeReact__default["default"].zIndex.overlay);
       utils.DomHandler.addStyles(overlayRef.current, {
         position: 'absolute',
         top: '0',
@@ -4626,10 +4902,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
   function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
-    var _React$useState = React__namespace.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focusedState = _React$useState2[0],
-      setFocusedState = _React$useState2[1];
     var mergeProps = hooks.useMergeProps();
     var getColumnProps = function getColumnProps() {
       return ColumnBase.getCProps(props.column);
@@ -4644,9 +4916,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         props: cProps,
         parent: props.metaData,
         hostName: props.hostName,
-        state: {
-          focused: focusedState
-        },
+        state: {},
         context: {
           checked: props.checked,
           disabled: props.disabled
@@ -4656,62 +4926,33 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
     };
-    var _onFocus = function onFocus() {
-      setFocusedState(true);
-    };
-    var _onBlur = function onBlur() {
-      setFocusedState(false);
-    };
-    var _onClick = function onClick(event) {
+    var onChange = function onChange(event) {
       if (!props.disabled) {
-        setFocusedState(true);
         props.onChange({
           originalEvent: event,
           checked: !props.checked
         });
       }
     };
-    var _onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space' || event.key === ' ') {
-        // event.key is for Android support
-        _onClick(event);
-        event.preventDefault();
-      }
-    };
     var headerCheckboxIconProps = mergeProps({
-      className: cx('headerCheckboxIcon')
-    }, getColumnPTOptions('headerCheckboxIcon'));
+      className: cx('checkIcon')
+    }, getColumnPTOptions('headerCheckbox.icon'));
     var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, headerCheckboxIconProps) : null;
     var checkIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, headerCheckboxIconProps), {
       props: props
     });
     var tabIndex = props.disabled ? null : 0;
-    var headerCheckboxWrapperProps = mergeProps({
-      className: cx('headerCheckboxWrapper'),
-      onClick: function onClick(e) {
-        return _onClick(e);
-      }
-    }, getColumnPTOptions('headerCheckboxWrapper'));
     var headerCheckboxProps = mergeProps({
-      className: cx('headerCheckbox', {
-        headerProps: props,
-        focusedState: focusedState
-      }),
       role: 'checkbox',
       'aria-checked': props.checked,
       'aria-label': props.checked ? ariaLabel('selectAll') : ariaLabel('unselectAll'),
       tabIndex: tabIndex,
-      onFocus: function onFocus(e) {
-        return _onFocus();
-      },
-      onBlur: function onBlur(e) {
-        return _onBlur();
-      },
-      onKeyDown: function onKeyDown(e) {
-        return _onKeyDown(e);
-      }
+      onChange: onChange,
+      icon: checkIcon,
+      checked: props.checked,
+      disabled: props.disabled
     }, getColumnPTOptions('headerCheckbox'));
-    return /*#__PURE__*/React__namespace.createElement("div", headerCheckboxWrapperProps, /*#__PURE__*/React__namespace.createElement("div", headerCheckboxProps, checkIcon));
+    return /*#__PURE__*/React__namespace.createElement(Checkbox, headerCheckboxProps);
   });
   HeaderCheckbox.displayName = 'HeaderCheckbox';
 
@@ -4803,7 +5044,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       var sorted = _ref.sorted,
         sortOrder = _ref.sortOrder;
       if (getColumnProp('sortable')) {
-        if (sorted && sortOrder < 0) return 'descending';else if (sorted && sortOrder > 0) return 'ascending';else return 'none';
+        if (sorted && sortOrder < 0) {
+          return 'descending';
+        } else if (sorted && sortOrder > 0) {
+          return 'ascending';
+        }
+        return 'none';
       }
       return null;
     };
@@ -4817,22 +5063,22 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           if (next) {
             right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
-          styleObject['right'] = right + 'px';
+          styleObject.right = right + 'px';
         } else {
           var left = 0;
           var prev = elementRef.current.previousElementSibling;
           if (prev) {
             left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
           }
-          styleObject['left'] = left + 'px';
+          styleObject.left = left + 'px';
         }
         var filterRow = elementRef.current.parentElement.nextElementSibling;
         if (filterRow) {
           var _index = utils.DomHandler.index(elementRef.current);
-          filterRow.children[_index].style.left = styleObject['left'];
-          filterRow.children[_index].style.right = styleObject['right'];
+          filterRow.children[_index].style.left = styleObject.left;
+          filterRow.children[_index].style.right = styleObject.right;
         }
-        var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+        var isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
         !isSameStyle && setStyleObjectState(styleObject);
       }
     };
@@ -4861,7 +5107,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       });
     };
     var _onKeyDown = function onKeyDown(event) {
-      if ((event.code == 'Enter' || event.code == 'Space') && event.currentTarget === elementRef.current && utils.DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column') === 'true') {
+      if ((event.code == 'Enter' || event.code === 'NumpadEnter' || event.code == 'Space') && event.currentTarget === elementRef.current && utils.DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column') === 'true') {
         _onClick(event);
         event.preventDefault();
       }
@@ -5324,16 +5570,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             key: i
           }), createGroupHeaderCells(row));
         });
-      } else {
-        var headerRowProps = mergeProps({
-          role: 'row'
-        }, ptm('headerRow', {
-          hostName: props.hostName
-        }));
-        var headerRow = /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, createHeaderCells(props.columns));
-        var filterRow = props.filterDisplay === 'row' && /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, createFilterCells());
-        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, headerRow, filterRow);
       }
+      var headerRowProps = mergeProps({
+        role: 'row'
+      }, ptm('headerRow', {
+        hostName: props.hostName
+      }));
+      var headerRow = /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, createHeaderCells(props.columns));
+      var filterRow = props.filterDisplay === 'row' && /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, createFilterCells());
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, headerRow, filterRow);
     };
     var content = createContent();
     var theadProps = mergeProps({
@@ -5706,7 +5951,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       var selector = "[data-pc-name=\"datatable\"][".concat(attributeSelector.current, "] > [data-pc-section=\"wrapper\"] ").concat(isVirtualScrollerDisabled() ? '' : '> [data-pc-name="virtualscroller"]', " > [data-pc-section=\"table\"]");
       widths.forEach(function (width, index) {
         var style = "width: ".concat(width, "px !important; max-width: ").concat(width, "px !important");
-        innerHTML += "\n                ".concat(selector, " > [data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
+        innerHTML = innerHTML + "\n                ".concat(selector, " > [data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
       });
       styleElement.current.innerHTML = innerHTML;
     };
@@ -5725,14 +5970,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var findParentHeader = function findParentHeader(element) {
       if (element.nodeName === 'TH') {
         return element;
-      } else {
-        var parent = element.parentElement;
-        while (parent.nodeName !== 'TH') {
-          parent = parent.parentElement;
-          if (!parent) break;
+      }
+      var parent = element.parentElement;
+      while (parent.nodeName !== 'TH') {
+        parent = parent.parentElement;
+        if (!parent) {
+          break;
         }
-        return parent;
       }
+      return parent;
     };
     var getGroupRowSortField = function getGroupRowSortField() {
       return props.sortMode === 'single' ? props.sortField : groupRowsSortMetaState ? groupRowsSortMetaState.field : null;
@@ -5741,14 +5987,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       if (props.showSelectionElement || props.isDataSelectable) {
         return val.filter(function (data, index) {
           var isSelectable = true;
-          if (props.showSelectionElement) isSelectable = props.showSelectionElement({
-            rowIndex: index,
-            props: props
-          });
-          if (props.isDataSelectable && isSelectable) isSelectable = props.isDataSelectable({
-            data: data,
-            index: index
-          });
+          if (props.showSelectionElement) {
+            isSelectable = props.showSelectionElement({
+              rowIndex: index,
+              props: props
+            });
+          }
+          if (props.isDataSelectable && isSelectable) {
+            isSelectable = props.isDataSelectable({
+              data: data,
+              index: index
+            });
+          }
           return isSelectable;
         });
       }
@@ -5757,16 +6007,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var allRowsSelected = function allRowsSelected(processedData) {
       if (props.onSelectAllChange) {
         return props.selectAll;
-      } else {
-        var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
-        var val = utils.ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
-        var selectableVal = getSelectableData(val);
-        return utils.ObjectUtils.isNotEmpty(selectableVal) && props.selection && selectableVal.every(function (sv) {
-          return utils.ObjectUtils.isArray(props.selection) && props.selection.some(function (s) {
-            return isEquals(s, sv);
-          });
-        });
       }
+      var data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
+      var val = utils.ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(data)) : data;
+      var selectableVal = getSelectableData(val);
+      return utils.ObjectUtils.isNotEmpty(selectableVal) && props.selection && selectableVal.every(function (sv) {
+        return utils.ObjectUtils.isArray(props.selection) && props.selection.some(function (s) {
+          return isEquals(s, sv);
+        });
+      });
     };
     var getSelectionModeInColumn = function getSelectionModeInColumn(columns) {
       if (columns) {
@@ -5798,12 +6047,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           data: _objectSpread({}, rowData),
           fields: []
         });
-        meta['fields'].push(field);
+        meta.fields.push(field);
       } else if (meta) {
-        var fields = meta['fields'].filter(function (f) {
+        var fields = meta.fields.filter(function (f) {
           return f !== field;
         });
-        !fields.length ? delete editingMeta[editingKey] : meta['fields'] = fields;
+        !fields.length ? delete editingMeta[editingKey] : meta.fields = fields;
       }
       setEditingMetaState(editingMeta);
     };
@@ -5892,7 +6141,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       widths.forEach(function (width, index) {
         var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
         var style = "width: ".concat(colWidth, "px !important; max-width: ").concat(colWidth, "px !important");
-        innerHTML += "\n                 ".concat(selector, " > [data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
+        innerHTML = innerHTML + "\n                 ".concat(selector, " > [data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
       });
       styleElement.current.innerHTML = innerHTML;
     };
@@ -5909,7 +6158,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       var event = e.originalEvent,
         column = e.column;
       if (props.reorderableColumns && getColumnProp(column, 'reorderable') !== false && !getColumnProp(column, 'frozen')) {
-        if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || utils.DomHandler.getAttribute(event.target, '[data-pc-section="columnresizer"]')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true;
+        if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || utils.DomHandler.getAttribute(event.target, '[data-pc-section="columnresizer"]')) {
+          event.currentTarget.draggable = false;
+        } else {
+          event.currentTarget.draggable = true;
+        }
       }
     };
     var onColumnHeaderCheckboxChange = function onColumnHeaderCheckboxChange(e, processedData) {
@@ -5918,14 +6171,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       } else {
         var originalEvent = e.originalEvent,
           checked = e.checked;
-        var _data2 = props.selectionPageOnly ? dataToRender(processedData) : processedData;
+        var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
         var selection = props.selectionPageOnly && props.selection ? props.selection.filter(function (s) {
-          return !_data2.some(function (d) {
+          return !_data.some(function (d) {
             return isEquals(s, d);
           });
         }) : [];
         if (checked) {
-          selection = utils.ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
+          selection = utils.ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data));
           selection = getSelectableData(selection);
           props.onAllRowsSelect && props.onAllRowsSelect({
             originalEvent: originalEvent,
@@ -5955,7 +6208,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         event.preventDefault();
         return;
       }
-      if (!props.reorderableColumns) return;
+      if (!props.reorderableColumns) {
+        return;
+      }
       colReorderIconWidth.current = utils.DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
       colReorderIconHeight.current = utils.DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
       draggedColumn.current = column;
@@ -6175,7 +6430,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       var index = multiSortMeta.findIndex(function (sortMeta) {
         return sortMeta.field === meta.field;
       });
-      if (index >= 0) multiSortMeta[index] = meta;else multiSortMeta.push(meta);
+      if (index >= 0) {
+        multiSortMeta[index] = meta;
+      } else {
+        multiSortMeta.push(meta);
+      }
     };
     var removeSortMeta = function removeSortMeta(meta, multiSortMeta) {
       var index = multiSortMeta.findIndex(function (sortMeta) {
@@ -6325,11 +6584,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       return Object.fromEntries(entries);
     };
     var filterLocal = function filterLocal(data, filters) {
-      if (!data) return;
+      if (!data) {
+        return;
+      }
       var activeFilters = filters ? getActiveFilters(filters) : {};
       var columns = getColumns();
       var filteredValue = [];
-      var isGlobalFilter = activeFilters['global'] || props.globalFilter;
+      var isGlobalFilter = activeFilters.global || props.globalFilter;
       var globalFilterFieldsArray;
       if (isGlobalFilter) {
         globalFilterFieldsArray = props.globalFilterFields || columns.filter(function (col) {
@@ -6369,8 +6630,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         if (localMatch && isGlobalFilter && !globalMatch && globalFilterFieldsArray) {
           for (var _j = 0; _j < globalFilterFieldsArray.length; _j++) {
             var globalFilterField = globalFilterFieldsArray[_j];
-            var matchMode = activeFilters['global'] ? activeFilters['global'].matchMode : props.globalFilterMatchMode;
-            var value = activeFilters['global'] ? activeFilters['global'].value : props.globalFilter;
+            var matchMode = activeFilters.global ? activeFilters.global.matchMode : props.globalFilterMatchMode;
+            var value = activeFilters.global ? activeFilters.global.value : props.globalFilter;
             globalMatch = PrimeReact$1.FilterService.filters[matchMode](utils.ObjectUtils.resolveFieldData(data[i], globalFilterField), value, props.filterLocale);
             if (globalMatch) {
               break;
@@ -6518,16 +6779,16 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           exportable = _ref5[3];
         if (exportable && field) {
           var columnHeader = String(exportHeader || header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
-          csv += '"' + columnHeader + '"';
+          csv = csv + ('"' + columnHeader + '"');
           if (i < columns.length - 1) {
-            csv += props.csvSeparator;
+            csv = csv + props.csvSeparator;
           }
         }
       });
 
       //body
       data.forEach(function (record) {
-        csv += '\n';
+        csv = csv + '\n';
         columns.forEach(function (column, i) {
           var _ref6 = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField'), getColumnProp(column, 'exportable')],
             colField = _ref6[0],
@@ -6547,10 +6808,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
               } else {
                 cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, "\u2028");
               }
-            } else cellData = '';
-            csv += '"' + cellData + '"';
+            } else {
+              cellData = '';
+            }
+            csv = csv + ('"' + cellData + '"');
             if (i < columns.length - 1) {
-              csv += props.csvSeparator;
+              csv = csv + props.csvSeparator;
             }
           }
         });
@@ -6599,7 +6862,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             data = filterLocal(data, filters);
           }
           if (sortField || utils.ObjectUtils.isNotEmpty(multiSortMeta)) {
-            if (props.sortMode === 'single') data = sortSingle(data, sortField, sortOrder);else if (props.sortMode === 'multiple') data = sortMultiple(data, multiSortMeta);
+            if (props.sortMode === 'single') {
+              data = sortSingle(data, sortField, sortOrder);
+            } else if (props.sortMode === 'multiple') {
+              data = sortMultiple(data, multiSortMeta);
+            }
           }
         }
       }
@@ -6978,7 +7245,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       });
     };
     var createContent = function createContent(processedData, columns, selectionModeInColumn, empty) {
-      if (!columns) return;
+      if (!columns) {
+        return;
+      }
       var _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
       var virtualScrollerOptions = props.virtualScrollerOptions || {};
       var wrapperProps = mergeProps({
@@ -7155,4 +7424,4 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
 
   return exports;
 
-})({}, React, primereact.api, primereact.componentbase, primereact.utils, primereact.hooks, primereact.icons.arrowdown, primereact.icons.arrowup, primereact.icons.spinner, primereact.paginator, primereact.virtualscroller, primereact.icons.bars, primereact.icons.check, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.pencil, primereact.icons.times, primereact.overlayservice, primereact.ripple, primereact.button, primereact.csstransition, primereact.dropdown, primereact.icons.filter, primereact.icons.filterslash, primereact.icons.plus, primereact.icons.trash, primereact.inputtext, primereact.portal, primereact.icons.sortalt, primereact.icons.sortamountdown, primereact.icons.sortamountupalt, primereact.tooltip);
+})({}, React, primereact.api, primereact.componentbase, primereact.utils, primereact.hooks, primereact.icons.arrowdown, primereact.icons.arrowup, primereact.icons.spinner, primereact.paginator, primereact.virtualscroller, primereact.icons.bars, primereact.icons.check, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.pencil, primereact.icons.times, primereact.overlayservice, primereact.ripple, primereact.tooltip, primereact.button, primereact.csstransition, primereact.dropdown, primereact.icons.filter, primereact.icons.filterslash, primereact.icons.plus, primereact.icons.trash, primereact.inputtext, primereact.portal, primereact.icons.sortalt, primereact.icons.sortamountdown, primereact.icons.sortamountupalt);