primereact 10.6.5 → 10.7.0

package/datatable/datatable.js

@@ -153,6 +153,19 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
   }
 
+  var getStorage = function getStorage(stateStorageProp) {
+    switch (stateStorageProp) {
+      case 'local':
+        return window.localStorage;
+      case 'session':
+        return window.sessionStorage;
+      case 'custom':
+        return null;
+      default:
+        throw new Error(stateStorageProp + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
+    }
+  };
+
   var ColumnBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Column',
@@ -162,6 +175,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       body: null,
       bodyClassName: null,
       bodyStyle: null,
+      cellEditValidateOnClose: false,
       cellEditValidator: null,
       cellEditValidatorEvent: 'click',
       className: null,
@@ -686,8 +700,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var mergeProps = hooks.useMergeProps();
     var context = React__namespace.useContext(PrimeReact$1.PrimeReactContext);
     var props = CheckboxBase.getProps(inProps, context);
+    var _React$useState = React__namespace.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      focusedState = _React$useState2[0],
+      setFocusedState = _React$useState2[1];
     var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
         props: props,
+        state: {
+          focused: focusedState
+        },
         context: {
           checked: props.checked === props.trueValue,
           disabled: props.disabled
@@ -741,10 +762,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     };
     var _onFocus = function onFocus() {
       var _props$onFocus;
+      setFocusedState(true);
       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;
+      setFocusedState(false);
       props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
     };
     React__namespace.useImperativeHandle(ref, function () {
@@ -907,9 +930,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
       });
     },
-    box: 'p-radiobutton-box',
-    input: 'p-radiobutton-input',
-    icon: 'p-radiobutton-icon'
+    radiobuttonbox: 'p-radiobutton-box',
+    radiobuttoninput: 'p-radiobutton-input',
+    radiobuttonicon: 'p-radiobutton-icon'
   };
   var RadioButtonBase = componentbase.ComponentBase.extend({
     defaultProps: {
@@ -1048,7 +1071,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       })),
       style: props.style,
       'data-p-checked': props.checked
-    }, RadioButtonBase.getOtherProps(props), ptm('root'));
+    }, otherProps, ptm('root'));
+    delete rootProps.input;
+    delete rootProps.box;
+    delete rootProps.icon;
     var createInputElement = function createInputElement() {
       var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
       var inputProps = mergeProps(_objectSpread$b({
@@ -1063,19 +1089,19 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         readOnly: props.readonly,
         required: props.required,
         tabIndex: props.tabIndex,
-        className: cx('input')
-      }, ariaProps), ptm('input'));
+        className: cx('radiobuttoninput')
+      }, ariaProps), inProps.input, ptm('radiobuttoninput'));
       return /*#__PURE__*/React__namespace.createElement("input", _extends({
         ref: inputRef
       }, inputProps));
     };
     var createBoxElement = function createBoxElement() {
       var boxProps = mergeProps({
-        className: cx('box')
-      }, ptm('box'));
+        className: cx('radiobuttonbox')
+      }, inProps.box, ptm('radiobuttonbox'));
       var iconProps = mergeProps({
-        className: cx('icon')
-      }, ptm('icon'));
+        className: cx('radiobuttonicon')
+      }, inProps.icon, ptm('radiobuttonicon'));
       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({
@@ -1123,7 +1149,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       checked: props.checked,
       disabled: props.disabled,
       name: "".concat(props.tableSelector, "_dt_radio"),
-      onChange: onChange
+      onChange: onChange,
+      input: getColumnPTOptions('radiobuttoninput'),
+      box: getColumnPTOptions('radiobuttonbox'),
+      icon: getColumnPTOptions('radiobuttonicon'),
+      unstyled: props.unstyled
     }, getColumnPTOptions('radiobutton'));
     return /*#__PURE__*/React__namespace.createElement(RadioButton, radioButtonProps);
   });
@@ -1149,8 +1179,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var keyHelperRef = React__namespace.useRef(null);
     var overlayEventListener = React__namespace.useRef(null);
     var selfClick = React__namespace.useRef(false);
-    var tabindexTimeout = React__namespace.useRef(null);
     var initFocusTimeout = React__namespace.useRef(null);
+    var editingRowDataStateRef = React__namespace.useRef(null);
     var _props$ptCallbacks = props.ptCallbacks,
       ptm = _props$ptCallbacks.ptm,
       ptmo = _props$ptCallbacks.ptmo,
@@ -1185,7 +1215,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var field = getColumnProp('field') || "field_".concat(props.index);
     var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
     var isEditable = function isEditable() {
-      return getColumnProp('editor');
+      return utils.ObjectUtils.isNotEmpty(props.editMode) && getColumnProp('editor');
+    };
+    var cellEditValidateOnClose = function cellEditValidateOnClose() {
+      return getColumnProp('cellEditValidateOnClose');
     };
     var _useEventListener = hooks.useEventListener({
         type: 'click',
@@ -1269,40 +1302,37 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         unbindDocumentClickListener();
         overlayservice.OverlayService.off('overlay-click', overlayEventListener.current);
         overlayEventListener.current = null;
+        editingRowDataStateRef.current = null;
         selfClick.current = false;
       }, 1);
     };
     var switchCellToViewMode = function switchCellToViewMode(event, submit) {
       var callbackParams = getCellCallbackParams(event);
-      setEditingRowDataState(function (prev) {
-        var newRowData = prev;
-        var newValue = resolveFieldData(newRowData);
-        var params = _objectSpread$a(_objectSpread$a({}, callbackParams), {}, {
-          newRowData: newRowData,
-          newValue: newValue
-        });
-        var onCellEditCancel = getColumnProp('onCellEditCancel');
-        var cellEditValidator = getColumnProp('cellEditValidator');
-        var onCellEditComplete = getColumnProp('onCellEditComplete');
-        if (!submit && onCellEditCancel) {
-          onCellEditCancel(params);
-        }
-        var valid = true;
-        if (!submit && cellEditValidator) {
-          valid = cellEditValidator(params);
-        }
-        if (valid) {
-          if (submit && onCellEditComplete) {
-            setTimeout(function () {
-              return onCellEditComplete(params);
-            });
-          }
-          closeCell(event);
-        } else {
-          event.preventDefault();
-        }
-        return newRowData;
+      var newRowData = _objectSpread$a({}, editingRowDataStateRef.current);
+      var newValue = resolveFieldData(newRowData);
+      var params = _objectSpread$a(_objectSpread$a({}, callbackParams), {}, {
+        newRowData: newRowData,
+        newValue: newValue
       });
+      var onCellEditCancel = getColumnProp('onCellEditCancel');
+      var cellEditValidator = getColumnProp('cellEditValidator');
+      var onCellEditComplete = getColumnProp('onCellEditComplete');
+      if (!submit && onCellEditCancel) {
+        onCellEditCancel(params);
+      }
+      var valid = true;
+      if ((!submit || cellEditValidateOnClose()) && cellEditValidator) {
+        valid = cellEditValidator(params);
+      }
+      if (valid) {
+        if (submit && onCellEditComplete) {
+          onCellEditComplete(params);
+        }
+        closeCell(event);
+      } else {
+        event.preventDefault();
+      }
+      setEditingRowDataState(newRowData);
     };
     var findNextSelectableCell = function findNextSelectableCell(cell) {
       var nextCell = cell.nextElementSibling;
@@ -1329,14 +1359,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       }
     };
     var focusOnElement = function focusOnElement() {
-      clearTimeout(tabindexTimeout.current);
-      tabindexTimeout.current = setTimeout(function () {
-        if (editingState) {
-          var focusableEl = props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : utils.DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
-          focusableEl && focusableEl.focus();
-        }
-        keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
-      }, 1);
+      if (editingState) {
+        var focusableEl = props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : utils.DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
+        focusableEl && focusableEl.focus();
+      }
+      keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
     };
     var focusOnInit = function focusOnInit() {
       clearTimeout(initFocusTimeout.current);
@@ -1378,6 +1405,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       if (currentData) {
         utils.ObjectUtils.mutateFieldData(currentData, field, val);
       }
+      editingRowDataStateRef.current = editingRowData;
     };
     var _onClick = function onClick(event) {
       var params = getCellCallbackParams(event);
@@ -1570,7 +1598,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     }, [props.editMode, props.editing, editingState]);
     hooks.useUpdateEffect(function () {
       if (props.editMode === 'cell' || props.editMode === 'row') {
-        setEditingRowDataState(getEditingRowData());
+        var editingRowData = getEditingRowData();
+        setEditingRowDataState(editingRowData);
+        editingRowDataStateRef.current = editingRowData;
       }
     }, [props.editingMeta]);
     React__namespace.useEffect(function () {
@@ -1647,7 +1677,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         if (showSelection) {
           var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
           var ariaLabelText = utils.ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
-          label = "".concat(props.selected ? PrimeReact$1.ariaLabel('unselectLabel') : PrimeReact$1.ariaLabel('selectLabel'), " ").concat(ariaLabelText);
+          label = "".concat(props.selected ? PrimeReact$1.ariaLabel('unselectRow') : PrimeReact$1.ariaLabel('selectRow'), " ").concat(ariaLabelText);
         }
         content = showSelection && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__namespace.createElement(RowRadioButton, {
           hostName: props.hostName,
@@ -1662,7 +1692,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           tableSelector: props.tableSelector,
           ariaLabel: label,
           ptCallbacks: props.ptCallbacks,
-          metaData: props.metaData
+          metaData: props.metaData,
+          unstyled: props.unstyled
         }), selectionMode === 'multiple' && /*#__PURE__*/React__namespace.createElement(RowCheckbox, {
           hostName: props.hostName,
           column: props.column,
@@ -1676,17 +1707,19 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           ariaLabel: label,
           checkIcon: props.checkIcon,
           ptCallbacks: props.ptCallbacks,
-          metaData: props.metaData
+          metaData: props.metaData,
+          unstyled: props.unstyled
         }));
       } else if (rowReorder) {
         var showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, {
           rowIndex: props.rowIndex,
           props: props.tableProps
         }) : true;
+        var customIcon = getColumnProp('rowReorderIcon');
         var rowReorderIconProps = mergeProps({
           className: cx('rowReorderIcon')
-        }, getColumnPTOptions('rowReorderIcon'));
-        var rowReorderIcon = getColumnProp('rowReorderIcon') || /*#__PURE__*/React__namespace.createElement(bars.BarsIcon, rowReorderIconProps);
+        }, customIcon ? null : getColumnPTOptions('rowReorderIcon'));
+        var rowReorderIcon = customIcon || /*#__PURE__*/React__namespace.createElement(bars.BarsIcon, rowReorderIconProps);
         content = showReorder ? utils.IconUtils.getJSXIcon(rowReorderIcon, _objectSpread$a({}, rowReorderIconProps), {
           props: props
         }) : null;
@@ -1838,7 +1871,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         }, editorKeyHelperProps), /*#__PURE__*/React__namespace.createElement("span", editorKeyHelperLabelProps));
         /* eslint-enable */
       }
-
       var bodyCellProps = mergeProps({
         style: style,
         className: utils.classNames(bodyClassName, getColumnProp('className'), cellClassName, cx('bodyCell', {
@@ -2130,7 +2162,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           focusedItem && focusedItem !== firstSelectedRow && (focusedItem.tabIndex = '-1');
         } else {
           rows[0].tabIndex = '0';
-          focusedItem !== rows[0] && (rows[rowIndex].tabIndex = '-1');
+          focusedItem !== rows[0] && (rows[props.rowIndex].tabIndex = '-1');
         }
       }
     };
@@ -2322,7 +2354,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             value: props.value,
             virtualScrollerOptions: props.virtualScrollerOptions,
             ptCallbacks: props.ptCallbacks,
-            metaData: props.metaData
+            metaData: props.metaData,
+            unstyled: props.unstyled
           });
         }
         return null;
@@ -2401,7 +2434,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     }, getBodyRowPTOptions('bodyRow'), {
       className: utils.classNames(rowClassName) // #5983 must be last so all unstyled merging takes place first
     });
-
     return /*#__PURE__*/React__namespace.createElement("tr", rowProps, content);
   });
   BodyRow.displayName = 'BodyRow';
@@ -3030,6 +3062,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       var event = e.originalEvent;
       if (!isUnsyled && utils.DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
         event.currentTarget.draggable = true;
+        event.target.draggable = false;
       } else {
         event.currentTarget.draggable = false;
       }
@@ -3108,7 +3141,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         event.dataTransfer.setData('text', 'b'); // For firefox
       }
     };
-
     var onRowDragOver = function onRowDragOver(e) {
       var event = e.originalEvent,
         index = e.index;
@@ -3330,7 +3362,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           expandedRowIcon: props.expandedRowIcon,
           collapsedRowIcon: props.collapsedRowIcon,
           ptCallbacks: props.ptCallbacks,
-          metaData: props.metaData
+          metaData: props.metaData,
+          unstyled: props.unstyled
         });
         var options = {
           index: rowIndex,
@@ -3435,7 +3468,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           value: props.value,
           virtualScrollerOptions: props.virtualScrollerOptions,
           ptCallbacks: props.ptCallbacks,
-          metaData: props.metaData
+          metaData: props.metaData,
+          unstyled: props.unstyled
         });
       }
     };
@@ -4032,6 +4066,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var getTarget = function getTarget() {
       return firstFocusableElementRef.current && firstFocusableElementRef.current.parentElement;
     };
+
+    /**
+     * This method sets the auto focus on the first focusable element within the target element.
+     * It first tries to find a focusable element using the autoFocusSelector. If no such element is found,
+     * it then tries to find a focusable element using the firstFocusableSelector.
+     * If the autoFocus prop is set to true and a focusable element is found, it sets the focus on that element.
+     *
+     * @param {HTMLElement} target - The target element within which to find a focusable element.
+     */
     var setAutoFocus = function setAutoFocus(target) {
       var _ref = props || {},
         _ref$autoFocusSelecto = _ref.autoFocusSelector,
@@ -4040,7 +4083,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         firstFocusableSelector = _ref$firstFocusableSe === void 0 ? '' : _ref$firstFocusableSe,
         _ref$autoFocus = _ref.autoFocus,
         autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
-      var focusableElement = utils.DomHandler.getFirstFocusableElement(target, "[autofocus]".concat(getComputedSelector(autoFocusSelector)));
+      var defaultAutoFocusSelector = "".concat(getComputedSelector(autoFocusSelector));
+      var computedAutoFocusSelector = "[autofocus]".concat(defaultAutoFocusSelector, ", [data-pc-autofocus='true']").concat(defaultAutoFocusSelector);
+      var focusableElement = utils.DomHandler.getFirstFocusableElement(target, computedAutoFocusSelector);
       autoFocus && !focusableElement && (focusableElement = utils.DomHandler.getFirstFocusableElement(target, getComputedSelector(firstFocusableSelector)));
       utils.DomHandler.focus(focusableElement);
     };
@@ -5156,7 +5201,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         column: props.column
       });
     };
-    var onResizerMouseDown = function onResizerMouseDown(event) {
+    var onResizeStart = function onResizeStart(event) {
       props.onColumnResizeStart({
         originalEvent: event,
         column: props.column
@@ -5193,7 +5238,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         var columnResizerProps = mergeProps({
           className: cx('columnResizer'),
           onMouseDown: function onMouseDown(e) {
-            return onResizerMouseDown(e);
+            return onResizeStart(e);
+          },
+          onTouchStart: function onTouchStart(e) {
+            return onResizeStart(e);
           },
           onClick: function onClick(e) {
             return onResizerClick(e);
@@ -5253,7 +5301,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           onChange: props.onColumnCheckboxChange,
           disabled: props.empty,
           ptCallbacks: ptCallbacks,
-          metaData: parentMetaData
+          metaData: parentMetaData,
+          unstyled: props.unstyled
         });
       }
       return null;
@@ -5719,29 +5768,40 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       setRowsState(props.rows);
       setD_rowsState(props.rows);
     }
+    var columnResizeStartListener = function columnResizeStartListener(event) {
+      return columnResizing.current && onColumnResize(event);
+    };
+    var columnResizeEndListener = function columnResizeEndListener() {
+      return columnResizing.current && (columnResizing.current = false, onColumnResizeEnd());
+    };
     var _useEventListener = hooks.useEventListener({
         type: 'mousemove',
-        listener: function listener(event) {
-          if (columnResizing.current) {
-            onColumnResize(event);
-          }
-        }
+        listener: columnResizeStartListener
       }),
       _useEventListener2 = _slicedToArray(_useEventListener, 2),
       bindDocumentMouseMoveListener = _useEventListener2[0],
       unbindDocumentMouseMoveListener = _useEventListener2[1];
     var _useEventListener3 = hooks.useEventListener({
         type: 'mouseup',
-        listener: function listener() {
-          if (columnResizing.current) {
-            columnResizing.current = false;
-            onColumnResizeEnd();
-          }
-        }
+        listener: columnResizeEndListener
       }),
       _useEventListener4 = _slicedToArray(_useEventListener3, 2),
       bindDocumentMouseUpListener = _useEventListener4[0],
       unbindDocumentMouseUpListener = _useEventListener4[1];
+    var _useEventListener5 = hooks.useEventListener({
+        type: 'touchmove',
+        listener: columnResizeStartListener
+      }),
+      _useEventListener6 = _slicedToArray(_useEventListener5, 2),
+      bindDocumentTouchMoveListener = _useEventListener6[0],
+      unbindDocumentTouchMoveListener = _useEventListener6[1];
+    var _useEventListener7 = hooks.useEventListener({
+        type: 'touchend',
+        listener: columnResizeEndListener
+      }),
+      _useEventListener8 = _slicedToArray(_useEventListener7, 2),
+      bindDocumentTouchEndListener = _useEventListener8[0],
+      unbindDocumentTouchEndListener = _useEventListener8[1];
     var isCustomStateStorage = function isCustomStateStorage() {
       return props.stateStorage === 'custom';
     };
@@ -5795,18 +5855,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       }
       return columns;
     };
-    var getStorage = function getStorage() {
-      switch (props.stateStorage) {
-        case 'local':
-          return window.localStorage;
-        case 'session':
-          return window.sessionStorage;
-        case 'custom':
-          return null;
-        default:
-          throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
-      }
-    };
     var saveState = function saveState() {
       var state = {};
       if (props.paginator) {
@@ -5842,7 +5890,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           props.customSaveState(state);
         }
       } else {
-        var storage = getStorage();
+        var storage = getStorage(props.stateStorage);
         if (utils.ObjectUtils.isNotEmpty(state)) {
           storage.setItem(props.stateKey, JSON.stringify(state));
         }
@@ -5852,7 +5900,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       }
     };
     var clearState = function clearState() {
-      var storage = getStorage();
+      var storage = getStorage(props.stateStorage);
       if (storage && props.stateKey) {
         storage.removeItem(props.stateKey);
       }
@@ -5864,7 +5912,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           restoredState = props.customRestoreState();
         }
       } else {
-        var storage = getStorage();
+        var storage = getStorage(props.stateStorage);
         var stateString = storage.getItem(props.stateKey);
         var dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
         var reviver = function reviver(key, value) {
@@ -6089,7 +6137,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       resizeColumn.current = column;
       resizeColumnElement.current = event.currentTarget.parentElement;
       columnResizing.current = true;
-      lastResizeHelperX.current = event.pageX - containerLeft + elementRef.current.scrollLeft;
+      lastResizeHelperX.current = (event.type === 'touchstart' ? event.changedTouches[0].clientX : event.pageX) - containerLeft + elementRef.current.scrollLeft;
       bindColumnResizeEvents();
     };
     var onColumnResize = function onColumnResize(event) {
@@ -6097,7 +6145,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       elementRef.current.setAttribute('data-p-unselectable-text', true);
       resizeHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
       resizeHelperRef.current.style.top = 0 + 'px';
-      resizeHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
+      resizeHelperRef.current.style.left = (event.type === 'touchmove' ? event.changedTouches[0].clientX : event.pageX) - containerLeft + elementRef.current.scrollLeft + 'px';
       resizeHelperRef.current.style.display = 'block';
     };
     var onColumnResizeEnd = function onColumnResizeEnd() {
@@ -6168,10 +6216,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var bindColumnResizeEvents = function bindColumnResizeEvents() {
       bindDocumentMouseMoveListener();
       bindDocumentMouseUpListener();
+      bindDocumentTouchMoveListener();
+      bindDocumentTouchEndListener();
     };
     var unbindColumnResizeEvents = function unbindColumnResizeEvents() {
       unbindDocumentMouseMoveListener();
       unbindDocumentMouseUpListener();
+      unbindDocumentTouchMoveListener();
+      unbindDocumentTouchEndListener();
     };
     var onColumnHeaderMouseDown = function onColumnHeaderMouseDown(e) {
       utils.DomHandler.clearSelection();
@@ -6237,7 +6289,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       draggedColumnElement.current = findParentHeader(event.currentTarget);
       event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
     };
-
     var onColumnHeaderDragOver = function onColumnHeaderDragOver(e) {
       var event = e.originalEvent,
         column = e.column;
@@ -7002,7 +7053,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           className: ptCallbacks.cx('loadingIcon')
         }, ptCallbacks.ptm('loadingIcon'));
         var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
-          spin: true
+          spin: true,
+          unstyled: props.unstyled
         }));
         var loadingIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
           props: props
@@ -7169,7 +7221,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         value: props.frozenValue,
         virtualScrollerOptions: options,
         ptCallbacks: ptCallbacks,
-        metaData: metaData
+        metaData: metaData,
+        unstyled: props.unstyled
       });
       var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
         hostName: "DataTable",
@@ -7252,7 +7305,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         virtualScrollerContentRef: contentRef,
         virtualScrollerOptions: options,
         ptCallbacks: ptCallbacks,
-        metaData: metaData
+        metaData: metaData,
+        unstyled: props.unstyled
       });
       var spacerBody = utils.ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React__namespace.createElement(TableBody, {
         hostName: "DataTable",
@@ -7261,7 +7315,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         },
         className: "p-datatable-virtualscroller-spacer",
         ptCallbacks: ptCallbacks,
-        metaData: metaData
+        metaData: metaData,
+        unstyled: props.unstyled
       }) : null;
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, frozenBody, body, spacerBody);
     };
@@ -7273,7 +7328,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         columns: columns,
         footerColumnGroup: props.footerColumnGroup,
         ptCallbacks: ptCallbacks,
-        metaData: metaData
+        metaData: metaData,
+        unstyled: props.unstyled
       });
     };
     var createContent = function createContent(processedData, columns, selectionModeInColumn, empty) {
@@ -7308,6 +7364,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           parent: metaData
         },
         showSpacer: false,
+        unstyled: props.unstyled,
         contentTemplate: function contentTemplate(options) {
           var ref = function ref(el) {
             tableRef.current = el;