primereact 10.6.6 → 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',
@@ -687,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
@@ -742,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 () {
@@ -908,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: {
@@ -1049,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({
@@ -1064,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({
@@ -1124,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);
   });
@@ -1150,7 +1179,6 @@ 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,
@@ -1187,7 +1215,7 @@ 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');
@@ -1331,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);
@@ -1380,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);
@@ -1572,14 +1598,11 @@ 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 () {
-      if (editingRowDataState) {
-        editingRowDataStateRef.current = editingRowDataState;
-      }
-    }, [editingRowDataState]);
     React__namespace.useEffect(function () {
       if (props.editMode === 'cell' || props.editMode === 'row') {
         var callbackParams = getCellCallbackParams();
@@ -1654,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,
@@ -1669,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,
@@ -1683,7 +1707,8 @@ 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, {
@@ -1846,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', {
@@ -2330,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;
@@ -2409,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';
@@ -3117,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;
@@ -3339,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,
@@ -3444,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
         });
       }
     };
@@ -4041,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,
@@ -4049,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);
     };
@@ -5165,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
@@ -5202,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);
@@ -5262,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;
@@ -5620,19 +5660,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
   });
   TableHeader.displayName = 'TableHeader';
 
-  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".');
-    }
-  };
-
   function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
   function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
   function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
@@ -5741,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';
     };
@@ -6099,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) {
@@ -6107,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() {
@@ -6178,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();
@@ -6247,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;
@@ -7012,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
@@ -7179,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",
@@ -7262,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",
@@ -7271,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);
     };
@@ -7283,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) {
@@ -7318,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;