primereact 10.5.2 → 10.6.0

package/datatable/datatable.esm.js

@@ -1,10 +1,10 @@
 'use client';
 import * as React from 'react';
 import React__default from 'react';
-import PrimeReact$1, { FilterMatchMode as FilterMatchMode$1, ariaLabel as ariaLabel$1, localeOption, PrimeReactContext, FilterOperator, FilterService } from 'primereact/api';
+import PrimeReact$1, { FilterMatchMode as FilterMatchMode$1, PrimeReactContext, ariaLabel as ariaLabel$1, localeOption, FilterOperator, FilterService } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
-import { ObjectUtils, classNames, IconUtils, DomHandler, UniqueComponentId, ZIndexUtils } from 'primereact/utils';
-import { useMergeProps, useEventListener, useUpdateEffect, useUnmountEffect, useStyle, useMountEffect, useOverlayListener, usePrevious } from 'primereact/hooks';
+import { ObjectUtils, classNames, DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from 'primereact/utils';
+import { useMergeProps, useUpdateEffect, useMountEffect, useEventListener, useUnmountEffect, useStyle, useOverlayListener, usePrevious } from 'primereact/hooks';
 import { ArrowDownIcon } from 'primereact/icons/arrowdown';
 import { ArrowUpIcon } from 'primereact/icons/arrowup';
 import { SpinnerIcon } from 'primereact/icons/spinner';
@@ -18,6 +18,7 @@ import { PencilIcon } from 'primereact/icons/pencil';
 import { TimesIcon } from 'primereact/icons/times';
 import { OverlayService } from 'primereact/overlayservice';
 import { Ripple } from 'primereact/ripple';
+import { Tooltip } from 'primereact/tooltip';
 import { Button } from 'primereact/button';
 import { CSSTransition } from 'primereact/csstransition';
 import { Dropdown } from 'primereact/dropdown';
@@ -30,7 +31,6 @@ import { Portal } from 'primereact/portal';
 import { SortAltIcon } from 'primereact/icons/sortalt';
 import { SortAmountDownIcon } from 'primereact/icons/sortamountdown';
 import { SortAmountUpAltIcon } from 'primereact/icons/sortamountupalt';
-import { Tooltip } from 'primereact/tooltip';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -251,10 +251,10 @@ var ColumnBase = ComponentBase.extend({
   }
 });
 
-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;
@@ -291,6 +291,7 @@ var classes = {
   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',
@@ -323,7 +324,6 @@ var classes = {
   bodyRow: function bodyRow(_ref5) {
     var props = _ref5.rowProps;
     return classNames({
-      'p-highlight': !props.allowCellSelection && props.selected || props.contextMenuSelected,
       'p-highlight-contextmenu': props.contextMenuSelected,
       'p-selectable-row': props.allowRowSelection && props.isSelectable({
         data: props.rowData,
@@ -406,60 +406,15 @@ var classes = {
   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 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 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 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 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 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 ObjectUtils.isEmpty(props) ? classNames('p-filter-column', {
       'p-frozen-column': frozen
     }) : classNames(_defineProperty({
@@ -473,9 +428,9 @@ var classes = {
       '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 classNames(_defineProperty({
       'p-frozen-column': getColumnProp('frozen')
     }, "p-align-".concat(align), !!align));
@@ -489,13 +444,13 @@ var inlineStyles = {
   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.extend({
@@ -647,7 +602,7 @@ var DataTableBase = ComponentBase.extend({
   },
   css: {
     styles: styles$1,
-    classes: classes,
+    classes: classes$2,
     inlineStyles: inlineStyles
   }
 });
@@ -681,13 +636,217 @@ function _objectWithoutProperties(source, excluded) {
   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 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.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.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var mergeProps = useMergeProps();
+  var context = React.useContext(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;
+  useHandleStyle(CheckboxBase.css.styles, isUnstyled, {
+    name: 'checkbox'
+  });
+  var elementRef = React.useRef(null);
+  var inputRef = React.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;
+      }
+      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.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
+      getElement: function getElement() {
+        return elementRef.current;
+      },
+      getInput: function getInput() {
+        return inputRef.current;
+      }
+    };
+  });
+  React.useEffect(function () {
+    ObjectUtils.combinedRefs(inputRef, props.inputRef);
+  }, [inputRef, props.inputRef]);
+  useUpdateEffect(function () {
+    inputRef.current.checked = isChecked();
+  }, [props.checked, props.trueValue]);
+  useMountEffect(function () {
+    if (props.autoFocus) {
+      DomHandler.focus(inputRef.current, props.autoFocus);
+    }
+  });
+  var checked = isChecked();
+  var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+  var otherProps = CheckboxBase.getOtherProps(props);
+  var rootProps = mergeProps({
+    id: props.id,
+    className: 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 = ObjectUtils.reduceKeys(otherProps, 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.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.createElement(CheckIcon, iconProps) : null;
+    var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$d({}, iconProps), {
+      props: props,
+      checked: checked
+    });
+    return /*#__PURE__*/React.createElement("div", boxProps, checkboxIcon);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    ref: elementRef
+  }, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React.createElement(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.memo(function (props) {
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focusedState = _React$useState2[0],
-    setFocusedState = _React$useState2[1];
   var mergeProps = useMergeProps();
   var getColumnProps = function getColumnProps() {
     return ColumnBase.getCProps(props.column);
@@ -701,9 +860,7 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
       props: getColumnProps(),
       parent: props.metaData,
       hostName: props.hostName,
-      state: {
-        focused: focusedState
-      },
+      state: {},
       context: {
         index: props.tabIndex,
         checked: props.checked,
@@ -714,88 +871,234 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
       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.createElement(CheckIcon, checkboxIconProps) : null;
-  var checkIcon = IconUtils.getJSXIcon(icon, _objectSpread$b({}, checkboxIconProps), {
+  var checkIcon = 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.createElement("div", checkboxWrapperProps, /*#__PURE__*/React.createElement("div", checkboxProps, checkIcon));
+    onChange: onChange,
+    'aria-label': props.ariaLabel,
+    checked: props.checked,
+    icon: checkIcon,
+    disabled: props.disabled
+  }, getColumnPTOptions('rowCheckbox'));
+  return /*#__PURE__*/React.createElement(Checkbox, checkboxProps);
 });
 RowCheckbox.displayName = 'RowCheckbox';
 
+var classes = {
+  root: function root(_ref) {
+    var props = _ref.props;
+    return 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.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.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var mergeProps = useMergeProps();
+  var context = React.useContext(PrimeReactContext);
+  var props = RadioButtonBase.getProps(inProps, context);
+  var elementRef = React.useRef(null);
+  var inputRef = React.useRef(props.inputRef);
+  var _RadioButtonBase$setM = RadioButtonBase.setMetaData({
+      props: props
+    }),
+    ptm = _RadioButtonBase$setM.ptm,
+    cx = _RadioButtonBase$setM.cx,
+    isUnstyled = _RadioButtonBase$setM.isUnstyled;
+  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 && (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;
+        }
+      }
+      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.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      select: select,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
+      getElement: function getElement() {
+        return elementRef.current;
+      },
+      getInput: function getInput() {
+        return inputRef.current;
+      }
+    };
+  });
+  React.useEffect(function () {
+    if (inputRef.current) {
+      inputRef.current.checked = props.checked;
+    }
+  }, [props.checked]);
+  React.useEffect(function () {
+    ObjectUtils.combinedRefs(inputRef, props.inputRef);
+  }, [inputRef, props.inputRef]);
+  useMountEffect(function () {
+    if (props.autoFocus) {
+      DomHandler.focus(inputRef.current, props.autoFocus);
+    }
+  });
+  var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+  var otherProps = RadioButtonBase.getOtherProps(props);
+  var rootProps = mergeProps({
+    id: props.id,
+    className: classNames(props.className, cx('root')),
+    style: props.style,
+    'data-p-checked': props.checked
+  }, RadioButtonBase.getOtherProps(props), ptm('root'));
+  var createInputElement = function createInputElement() {
+    var ariaProps = ObjectUtils.reduceKeys(otherProps, 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.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.createElement("div", boxProps, /*#__PURE__*/React.createElement("div", iconProps));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    ref: elementRef
+  }, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    target: elementRef,
+    content: props.tooltip,
+    pt: ptm('tooltip')
+  }, props.tooltipOptions)));
+}));
+RadioButton.displayName = 'RadioButton';
+
 var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focusedState = _React$useState2[0],
-    setFocusedState = _React$useState2[1];
-  var inputRef = React.useRef(null);
   var mergeProps = 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,
@@ -806,73 +1109,20 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
       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);
-      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.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputRef
-  }, hiddenInputProps))), /*#__PURE__*/React.createElement("div", radiobuttonProps, /*#__PURE__*/React.createElement("div", radiobuttonIconProps)));
+  return /*#__PURE__*/React.createElement(RadioButton, radioButtonProps);
 });
 RowRadioButton.displayName = 'RowRadioButton';
 
@@ -1102,16 +1352,16 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         if (next) {
           right = 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 = 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);
     }
   };
@@ -1183,7 +1433,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   };
   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') {
@@ -1354,7 +1604,8 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     return /*#__PURE__*/React.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);
@@ -1462,7 +1713,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       }), getColumnPTOptions('rowToggler'));
       content = /*#__PURE__*/React.createElement("button", rowTogglerProps, togglerIcon, /*#__PURE__*/React.createElement(Ripple, null));
       if (body) {
-        expanderProps['element'] = content;
+        expanderProps.element = content;
         content = ObjectUtils.getJSXElement(body, props.rowData, {
           column: props.column,
           field: field,
@@ -1536,7 +1787,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         content = /*#__PURE__*/React.createElement("button", rowEditorInitButtonProps, rowEditorInitIcon, /*#__PURE__*/React.createElement(Ripple, null));
       }
       if (body) {
-        rowEditorProps['element'] = content;
+        rowEditorProps.element = content;
         content = ObjectUtils.getJSXElement(body, props.rowData, {
           column: props.column,
           field: field,
@@ -1568,7 +1819,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     } 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',
@@ -1736,9 +1987,8 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         }
       }
       return groupRowSpan === 1 ? null : groupRowSpan;
-    } else {
-      return null;
     }
+    return null;
   };
   var _onClick = function onClick(event) {
     props.onRowClick({
@@ -1810,6 +2060,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
           onEndKey(row, event);
           break;
         case 'Enter':
+        case 'NumpadEnter':
           onEnterKey(row, event, target);
           break;
         case 'Space':
@@ -1951,9 +2202,13 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       } 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,
@@ -2141,7 +2396,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
     '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: classNames(rowClassName) // #5983 must be last so all unstyled merging takes place first
   });
 
   return /*#__PURE__*/React.createElement("tr", rowProps, content);
@@ -2250,7 +2505,10 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var isRadioSelectionModeInColumn = props.selectionModeInColumn === 'single';
   var isCheckboxSelectionModeInColumn = props.selectionModeInColumn === 'multiple';
   var equals = function equals(data1, data2) {
-    if (allowCellSelection()) return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);else return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
+    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 : ObjectUtils.equals(data1, data2, props.dataKey);
   };
   var isSelectionEnabled = function isSelectionEnabled() {
     return props.selectionMode || props.selectionModeInColumn !== null || props.columns && props.columns.some(function (col) {
@@ -2288,37 +2546,41 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     if (rowData && props.expandedRows) {
       if (isSubheaderGrouping && props.expandableRowGroups) {
         return isRowGroupExpanded(rowData);
-      } else {
-        if (props.dataKey) {
-          var rowId = ObjectUtils.resolveFieldData(rowData, props.dataKey);
-          var expanded = false;
-          if (props.expandedRows) {
-            if (Array.isArray(props.expandedRows)) {
-              expanded = props.expandedRows.some(function (row) {
-                return ObjectUtils.resolveFieldData(row, props.dataKey) === rowId;
-              });
-            } else {
-              expanded = props.expandedRows[rowId] !== undefined;
-            }
+      }
+      if (props.dataKey) {
+        var rowId = ObjectUtils.resolveFieldData(rowData, props.dataKey);
+        var expanded = false;
+        if (props.expandedRows) {
+          if (Array.isArray(props.expandedRows)) {
+            expanded = props.expandedRows.some(function (row) {
+              return 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 ObjectUtils.equals(data, 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 ObjectUtils.equals(data, ObjectUtils.resolveFieldData(rowData, props.dataKey));
+      });
+    }
+    return props.expandedRows.some(function (data) {
       return ObjectUtils.equals(data, rowData, props.groupRowsBy);
     });
   };
   var isRowEditing = function isRowEditing(rowData) {
     if (props.editMode === 'row' && rowData && props.editingRows) {
-      if (props.dataKey) return props.editingRows ? props.editingRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;else return findIndex(props.editingRows, rowData) !== -1;
+      if (props.dataKey) {
+        return props.editingRows ? props.editingRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;
+      }
+      return findIndex(props.editingRows, rowData) !== -1;
     }
     return false;
   };
@@ -2364,7 +2626,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var rowGroupHeaderStyle = function rowGroupHeaderStyle() {
     if (props.scrollable) {
       return {
-        top: rowGroupHeaderStyleObjectState['top']
+        top: rowGroupHeaderStyleObjectState.top
       };
     }
     return null;
@@ -2378,23 +2640,20 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     if (prevRowData) {
       var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, props.groupRowsBy);
       return !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 = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
-      var nextRowData = value[i + 1];
-      if (nextRowData) {
-        var nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, props.groupRowsBy);
-        return !ObjectUtils.deepEquals(currentRowFieldData, nextRowFieldData);
-      } else {
-        return true;
-      }
     }
+    var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
+    var nextRowData = value[i + 1];
+    if (nextRowData) {
+      var nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, props.groupRowsBy);
+      return !ObjectUtils.deepEquals(currentRowFieldData, nextRowFieldData);
+    }
+    return true;
   };
   var updateFrozenRowStickyPosition = function updateFrozenRowStickyPosition() {
     elementRef.current.style.top = DomHandler.getOuterHeight(elementRef.current.previousElementSibling) + 'px';
@@ -2520,7 +2779,9 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     anchorCellIndex.current = event.cellIndex;
   };
   var selectRange = function selectRange(event) {
-    var rangeStart, rangeEnd, selectedSize;
+    var rangeStart;
+    var rangeEnd;
+    var selectedSize;
     var isAllowCellSelection = allowCellSelection();
     var index = ObjectUtils.findIndexInList(event.data, props.value, props.dataKey);
     if (rangeRowIndex.current > anchorRowIndex.current) {
@@ -2542,10 +2803,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     } else {
       rangeStart = rangeEnd = rangeRowIndex.current;
     }
-    if (props.paginator) {
-      rangeStart = Math.max(rangeStart - props.first, 0);
-      rangeEnd -= props.first;
-    }
     return isAllowCellSelection ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
   };
   var selectRangeOnRow = function selectRangeOnRow(event, rowRangeStart, rowRangeEnd) {
@@ -2569,9 +2826,9 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     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;
@@ -2615,18 +2872,26 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     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) {
@@ -2729,7 +2994,9 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     if (props.onContextMenu || props.onContextMenuSelectionChange) {
       var hasSelection = ObjectUtils.isNotEmpty(props.selection);
       var data = hasSelection ? props.selection : event.data;
-      if (hasSelection) DomHandler.clearSelection();
+      if (hasSelection) {
+        DomHandler.clearSelection();
+      }
       if (props.onContextMenuSelectionChange) {
         props.onContextMenuSelectionChange({
           originalEvent: event.originalEvent,
@@ -2756,7 +3023,11 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   };
   var onRowMouseDown = function onRowMouseDown(e) {
     var event = e.originalEvent;
-    if (!isUnsyled && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;else event.currentTarget.draggable = false;
+    if (!isUnsyled && 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;
@@ -2927,8 +3198,12 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       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();
@@ -3310,16 +3585,16 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
         if (next) {
           right = 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 = 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);
     }
   };
@@ -3675,7 +3950,7 @@ var locales = {
 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)) {
@@ -3693,7 +3968,7 @@ function localeOptions(locale) {
   return locales[_locale];
 }
 
-var styles = "";
+var styles = '';
 var FocusTrapBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'FocusTrap',
@@ -3864,7 +4139,9 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     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() {
@@ -3920,11 +4197,10 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
           matchMode: filterStoreModel.constraints[0].matchMode,
           operator: filterStoreModel.operator
         };
-      } else {
-        return {
-          matchMode: filterStoreModel.matchMode
-        };
       }
+      return {
+        matchMode: filterStoreModel.matchMode
+      };
     }
   };
   var findDataType = function findDataType() {
@@ -4151,7 +4427,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     selfClick.current = true;
   };
   var onOverlayEnter = function onOverlayEnter() {
-    ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact$1.autoZIndex, context && context.zIndex['overlay'] || PrimeReact$1.zIndex['overlay']);
+    ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact$1.autoZIndex, context && context.zIndex.overlay || PrimeReact$1.zIndex.overlay);
     DomHandler.addStyles(overlayRef.current, {
       position: 'absolute',
       top: '0',
@@ -4632,10 +4908,6 @@ ColumnFilter.displayName = 'ColumnFilter';
 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.memo(function (props) {
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focusedState = _React$useState2[0],
-    setFocusedState = _React$useState2[1];
   var mergeProps = useMergeProps();
   var getColumnProps = function getColumnProps() {
     return ColumnBase.getCProps(props.column);
@@ -4650,9 +4922,7 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
       props: cProps,
       parent: props.metaData,
       hostName: props.hostName,
-      state: {
-        focused: focusedState
-      },
+      state: {},
       context: {
         checked: props.checked,
         disabled: props.disabled
@@ -4662,62 +4932,33 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
       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.createElement(CheckIcon, headerCheckboxIconProps) : null;
   var checkIcon = 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.createElement("div", headerCheckboxWrapperProps, /*#__PURE__*/React.createElement("div", headerCheckboxProps, checkIcon));
+  return /*#__PURE__*/React.createElement(Checkbox, headerCheckboxProps);
 });
 HeaderCheckbox.displayName = 'HeaderCheckbox';
 
@@ -4809,7 +5050,12 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     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;
   };
@@ -4823,22 +5069,22 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
         if (next) {
           right = 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 = 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 = 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);
     }
   };
@@ -4867,7 +5113,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     });
   };
   var _onKeyDown = function onKeyDown(event) {
-    if ((event.code == 'Enter' || event.code == 'Space') && event.currentTarget === elementRef.current && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column') === 'true') {
+    if ((event.code == 'Enter' || event.code === 'NumpadEnter' || event.code == 'Space') && event.currentTarget === elementRef.current && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column') === 'true') {
       _onClick(event);
       event.preventDefault();
     }
@@ -5330,16 +5576,15 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
           key: i
         }), createGroupHeaderCells(row));
       });
-    } else {
-      var headerRowProps = mergeProps({
-        role: 'row'
-      }, ptm('headerRow', {
-        hostName: props.hostName
-      }));
-      var headerRow = /*#__PURE__*/React.createElement("tr", headerRowProps, createHeaderCells(props.columns));
-      var filterRow = props.filterDisplay === 'row' && /*#__PURE__*/React.createElement("tr", headerRowProps, createFilterCells());
-      return /*#__PURE__*/React.createElement(React.Fragment, null, headerRow, filterRow);
     }
+    var headerRowProps = mergeProps({
+      role: 'row'
+    }, ptm('headerRow', {
+      hostName: props.hostName
+    }));
+    var headerRow = /*#__PURE__*/React.createElement("tr", headerRowProps, createHeaderCells(props.columns));
+    var filterRow = props.filterDisplay === 'row' && /*#__PURE__*/React.createElement("tr", headerRowProps, createFilterCells());
+    return /*#__PURE__*/React.createElement(React.Fragment, null, headerRow, filterRow);
   };
   var content = createContent();
   var theadProps = mergeProps({
@@ -5712,7 +5957,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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;
   };
@@ -5731,14 +5976,15 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var findParentHeader = function findParentHeader(element) {
     if (element.nodeName === 'TH') {
       return element;
-    } else {
-      var parent = element.parentElement;
-      while (parent.nodeName !== 'TH') {
-        parent = parent.parentElement;
-        if (!parent) break;
+    }
+    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;
@@ -5747,14 +5993,18 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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;
       });
     }
@@ -5763,16 +6013,15 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var allRowsSelected = function allRowsSelected(processedData) {
     if (props.onSelectAllChange) {
       return props.selectAll;
-    } else {
-      var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
-      var val = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
-      var selectableVal = getSelectableData(val);
-      return ObjectUtils.isNotEmpty(selectableVal) && props.selection && selectableVal.every(function (sv) {
-        return ObjectUtils.isArray(props.selection) && props.selection.some(function (s) {
-          return isEquals(s, sv);
-        });
-      });
     }
+    var data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
+    var val = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(data)) : data;
+    var selectableVal = getSelectableData(val);
+    return ObjectUtils.isNotEmpty(selectableVal) && props.selection && selectableVal.every(function (sv) {
+      return ObjectUtils.isArray(props.selection) && props.selection.some(function (s) {
+        return isEquals(s, sv);
+      });
+    });
   };
   var getSelectionModeInColumn = function getSelectionModeInColumn(columns) {
     if (columns) {
@@ -5804,12 +6053,12 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         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);
   };
@@ -5898,7 +6147,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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;
   };
@@ -5915,7 +6164,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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' || 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' || DomHandler.getAttribute(event.target, '[data-pc-section="columnresizer"]')) {
+        event.currentTarget.draggable = false;
+      } else {
+        event.currentTarget.draggable = true;
+      }
     }
   };
   var onColumnHeaderCheckboxChange = function onColumnHeaderCheckboxChange(e, processedData) {
@@ -5924,14 +6177,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     } 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 = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
+        selection = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data));
         selection = getSelectableData(selection);
         props.onAllRowsSelect && props.onAllRowsSelect({
           originalEvent: originalEvent,
@@ -5961,7 +6214,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       event.preventDefault();
       return;
     }
-    if (!props.reorderableColumns) return;
+    if (!props.reorderableColumns) {
+      return;
+    }
     colReorderIconWidth.current = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
     colReorderIconHeight.current = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
     draggedColumn.current = column;
@@ -6181,7 +6436,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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) {
@@ -6331,11 +6590,13 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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) {
@@ -6375,8 +6636,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       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 = FilterService.filters[matchMode](ObjectUtils.resolveFieldData(data[i], globalFilterField), value, props.filterLocale);
           if (globalMatch) {
             break;
@@ -6524,16 +6785,16 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         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],
@@ -6553,10 +6814,12 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
             } 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;
           }
         }
       });
@@ -6605,7 +6868,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
           data = filterLocal(data, filters);
         }
         if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
-          if (props.sortMode === 'single') data = sortSingle(data, sortField, sortOrder);else if (props.sortMode === 'multiple') data = sortMultiple(data, multiSortMeta);
+          if (props.sortMode === 'single') {
+            data = sortSingle(data, sortField, sortOrder);
+          } else if (props.sortMode === 'multiple') {
+            data = sortMultiple(data, multiSortMeta);
+          }
         }
       }
     }
@@ -6984,7 +7251,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     });
   };
   var createContent = function createContent(processedData, columns, selectionModeInColumn, empty) {
-    if (!columns) return;
+    if (!columns) {
+      return;
+    }
     var _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
     var virtualScrollerOptions = props.virtualScrollerOptions || {};
     var wrapperProps = mergeProps({