primereact 10.8.1 → 10.8.3

package/datatable/datatable.js

@@ -261,7 +261,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
 
   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 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.p-datatable-gridlines .p-datatable-scrollable-table > .p-datatable-thead {\n        top: -1px;\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$2 = {
     root: function root(_ref) {
       var props = _ref.props,
@@ -1379,14 +1379,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         if (align === 'right') {
           var right = 0;
           var next = elementRef.current && elementRef.current.nextElementSibling;
-          if (next) {
+          if (next && next.classList.contains('p-frozen-column')) {
             right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
           styleObject.right = right + 'px';
         } else {
           var left = 0;
           var prev = elementRef.current && elementRef.current.previousElementSibling;
-          if (prev) {
+          if (prev && prev.classList.contains('p-frozen-column')) {
             left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
           }
           styleObject.left = left + 'px';
@@ -2445,8 +2445,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var _props$ptCallbacks = props.ptCallbacks,
       ptm = _props$ptCallbacks.ptm,
       ptmo = _props$ptCallbacks.ptmo,
-      cx = _props$ptCallbacks.cx,
-      isUnstyled = _props$ptCallbacks.isUnstyled;
+      cx = _props$ptCallbacks.cx;
+      _props$ptCallbacks.isUnstyled;
     var _onClick = function onClick(event) {
       props.onClick({
         originalEvent: event,
@@ -2469,8 +2469,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     };
     var rowGroupTogglerIconProps = mergeProps({
       className: cx('rowGroupTogglerIcon'),
-      'aria-hidden': true,
-      unstyled: isUnstyled()
+      'aria-hidden': true
     }, ptm('rowGroupTogglerIcon'), getColumnPTOptions('rowGroupTogglerIcon'));
     var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, rowGroupTogglerIconProps) : props.collapsedRowIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, rowGroupTogglerIconProps);
     var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$8({}, rowGroupTogglerIconProps), {
@@ -2484,8 +2483,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       },
       className: cx('rowGroupToggler'),
       tabIndex: props.tabIndex,
-      'aria-label': label,
-      unstyled: isUnstyled()
+      'aria-label': label
     }, ptm('rowGroupToggler'), getColumnPTOptions('rowGroupToggler'));
     return /*#__PURE__*/React__namespace.createElement("button", rowGroupTogglerProps, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
   });
@@ -3051,15 +3049,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     };
     var onRowMouseDown = function onRowMouseDown(e) {
       var event = e.originalEvent;
-      if (!isUnstyled() && utils.DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
-        event.currentTarget.draggable = true;
-        event.target.draggable = false;
-      } else if (isUnstyled() && utils.DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon') {
-        event.currentTarget.draggable = true;
-        event.target.draggable = false;
-      } else {
-        event.currentTarget.draggable = false;
-      }
+      var isDraggableHandle = isUnstyled() ? utils.DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || event.target.closest('[data-pc-section="rowreordericon"]') : utils.DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle') || event.target.closest('.p-datatable-reorderablerow-handle');
+      event.currentTarget.draggable = isDraggableHandle;
+      event.target.draggable = !isDraggableHandle;
       if (allowRowDrag(e)) {
         enableDragSelection(event);
         anchorRowIndex.current = e.index;
@@ -3163,7 +3155,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
             !isUnstyled() && utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
           }
-          droppedRowIndex.current = index + 1;
+          if (index + 1 !== draggedRowIndex.current) droppedRowIndex.current = index + 1;
           rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
           !isUnstyled() && utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
         }
@@ -3615,14 +3607,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         if (_align === 'right') {
           var right = 0;
           var next = elementRef.current.nextElementSibling;
-          if (next) {
+          if (next && next.classList.contains('p-frozen-column')) {
             right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
           styleObject.right = right + 'px';
         } else {
           var left = 0;
           var prev = elementRef.current.previousElementSibling;
-          if (prev) {
+          if (prev && prev.classList.contains('p-frozen-column')) {
             left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
           }
           styleObject.left = left + 'px';
@@ -4632,7 +4624,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         'aria-haspopup': true,
         'aria-expanded': overlayVisibleState,
         'aria-label': label,
-        'aria-controls': overlayId.current,
+        'aria-controls': overlayVisibleState ? overlayId.current : undefined,
         onClick: function onClick(e) {
           return toggleMenu();
         },
@@ -5123,14 +5115,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         if (align === 'right') {
           var right = 0;
           var next = elementRef.current.nextElementSibling;
-          if (next) {
+          if (next && next.classList.contains('p-frozen-column')) {
             right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
           styleObject.right = right + 'px';
         } else {
           var left = 0;
           var prev = elementRef.current.previousElementSibling;
-          if (prev) {
+          if (prev && prev.classList.contains('p-frozen-column')) {
             left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
           }
           styleObject.left = left + 'px';
@@ -5295,6 +5287,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         var allRowsSelected = props.allRowsSelected(props.value);
         return /*#__PURE__*/React__namespace.createElement(HeaderCheckbox, {
           hostName: props.hostName,
+          column: props.column,
           checked: allRowsSelected,
           onChange: props.onColumnCheckboxChange,
           disabled: props.empty,
@@ -5562,16 +5555,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         });
       });
     };
-    var createCheckbox = function createCheckbox(selectionMode) {
+    var createCheckbox = function createCheckbox(column, selectionMode) {
       if (props.showSelectAll && selectionMode === 'multiple') {
         var allRowsSelected = props.allRowsSelected(props.value);
         return /*#__PURE__*/React__namespace.createElement(HeaderCheckbox, {
           hostName: props.hostName,
+          column: column,
           checked: allRowsSelected,
           onChange: onCheckboxChange,
           disabled: props.empty,
           ptCallbacks: props.ptCallbacks,
-          metaData: props.metaData
+          metaData: props.metaData,
+          unstyled: props.unstyled
         });
       }
       return null;
@@ -5611,17 +5606,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             filter = _ColumnBase$getCProps.filter;
           var colStyle = _objectSpread$1(_objectSpread$1({}, filterHeaderStyle || {}), style || {});
           var colKey = columnKey || field || i;
-          var checkbox = createCheckbox(selectionMode);
+          var checkbox = createCheckbox(col, selectionMode);
           var filterRow = createFilter(col, filter);
           var headerCellProps = mergeProps({
             style: colStyle,
             className: utils.classNames(filterHeaderClassName, className, cx('headerCell', {
               frozen: frozen,
               column: col
-            })),
-            key: colKey
+            }))
           }, getColumnPTOptions(col, 'root'), getColumnPTOptions(col, 'headerCell'));
-          return /*#__PURE__*/React__namespace.createElement("th", headerCellProps, checkbox, filterRow);
+          return /*#__PURE__*/React__namespace.createElement("th", _extends({
+            key: colKey
+          }, headerCellProps), checkbox, filterRow);
         }
         return null;
       });
@@ -6997,7 +6993,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         filter(props.globalFilter, 'global', props.globalFilterMatchMode);
       } else {
         // #3819 was filtering but now reset filter state
-        setFiltersState(props.filters);
+        if (d_filtersState['global']) {
+          var filters = _objectSpread({}, d_filtersState);
+          delete filters['global'];
+          setD_filtersState(filters);
+          onFilterApply(filters);
+        }
       }
     }, [props.globalFilter, props.globalFilterMatchMode]);
     hooks.useUnmountEffect(function () {