primevue 3.32.0 → 3.32.2

package/datatable/BodyCell.vue

@@ -6,6 +6,8 @@
         v-else
         :style="containerStyle"
         :class="containerClass"
+        :colspan="columnProp('colspan')"
+        :rowspan="columnProp('rowspan')"
         @click="onClick"
         @keydown="onKeyDown"
         role="cell"

package/datatable/DataTable.d.ts

@@ -13,7 +13,7 @@ import { ColumnPassThroughOptionType } from '../column';
 import { ColumnGroupPassThroughOptionType } from '../columngroup';
 import { PaginatorPassThroughOptionType } from '../paginator';
 import { RowPassThroughOptionType } from '../row';
-import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, Nullable, PTOptions } from '../ts-helpers';
 import { VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
 
 export declare type DataTablePassThroughOptionType = DataTablePassThroughAttributes | ((options: DataTablePassThroughMethodOptions) => DataTablePassThroughAttributes | string) | string | null | undefined;
@@ -1069,7 +1069,7 @@ export interface DataTableProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {DataTablePassThroughOptions}
      */
-    pt?: DataTablePassThroughOptions;
+    pt?: PTOptions<DataTablePassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -1103,6 +1103,7 @@ export interface DataTableSlots {
     empty(): VNode[];
     /**
      * Custom group header template.
+     * @param {Object} scope - group header slot's params.
      */
     groupheader(scope: {
         /**
@@ -1130,6 +1131,7 @@ export interface DataTableSlots {
     }): VNode[];
     /**
      * Custom loading template.
+     * @param {Object} scope - loading slot's params.
      */
     loading(): VNode[];
     /**

package/datatable/DataTable.vue

@@ -467,7 +467,7 @@ export default {
                     DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
                     DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
                     DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' ||
-                    targetNode.closest('[data-p-sortable-column="true"]')
+                    (targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]'))
                 ) {
                     DomHandler.clearSelection();
 
@@ -516,17 +516,24 @@ export default {
             }
 
             let data = [...value];
+            let resolvedFieldDatas = new Map();
+
+            for (let item of data) {
+                resolvedFieldDatas.set(item, ObjectUtils.resolveFieldData(item, this.d_sortField));
+            }
+
+            const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
 
             data.sort((data1, data2) => {
-                let value1 = ObjectUtils.resolveFieldData(data1, this.d_sortField);
-                let value2 = ObjectUtils.resolveFieldData(data2, this.d_sortField);
+                let value1 = resolvedFieldDatas.get(data1);
+                let value2 = resolvedFieldDatas.get(data2);
 
                 let result = null;
 
                 if (value1 == null && value2 != null) result = -1;
                 else if (value1 != null && value2 == null) result = 1;
                 else if (value1 == null && value2 == null) result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
                 else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
                 return this.d_sortOrder * result;
@@ -562,7 +569,9 @@ export default {
 
             if (typeof value1 === 'string' || value1 instanceof String) {
                 if (value1.localeCompare && value1 !== value2) {
-                    return this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true });
+                    const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
+
+                    return this.d_multiSortMeta[index].order * comparer(value1, value2);
                 }
             } else {
                 result = value1 < value2 ? -1 : 1;
@@ -586,6 +595,26 @@ export default {
 
             this.d_multiSortMeta = [...this.d_multiSortMeta];
         },
+        getActiveFilters(filters) {
+            const removeEmptyFilters = ([key, value]) => {
+                if (value.constraints) {
+                    const filteredConstraints = value.constraints.filter((constraint) => constraint.value !== null);
+
+                    if (filteredConstraints.length > 0) {
+                        return [key, { ...value, constraints: filteredConstraints }];
+                    }
+                } else if (value.value !== null) {
+                    return [key, value];
+                }
+
+                return undefined;
+            };
+
+            const filterValidEntries = (entry) => entry !== undefined;
+            const entries = Object.entries(filters).map(removeEmptyFilters).filter(filterValidEntries);
+
+            return Object.fromEntries(entries);
+        },
         filter(data) {
             if (!data) {
                 return;
@@ -593,9 +622,10 @@ export default {
 
             this.clearEditingMetaData();
 
+            let activeFilters = this.getActiveFilters(this.filters);
             let globalFilterFieldsArray;
 
-            if (this.filters['global']) {
+            if (activeFilters['global']) {
                 globalFilterFieldsArray = this.globalFilterFields || this.columns.map((col) => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
             }
 
@@ -606,11 +636,11 @@ export default {
                 let globalMatch = false;
                 let localFiltered = false;
 
-                for (let prop in this.filters) {
-                    if (Object.prototype.hasOwnProperty.call(this.filters, prop) && prop !== 'global') {
+                for (let prop in activeFilters) {
+                    if (Object.prototype.hasOwnProperty.call(activeFilters, prop) && prop !== 'global') {
                         localFiltered = true;
                         let filterField = prop;
-                        let filterMeta = this.filters[filterField];
+                        let filterMeta = activeFilters[filterField];
 
                         if (filterMeta.operator) {
                             for (let filterConstraint of filterMeta.constraints) {
@@ -630,11 +660,11 @@ export default {
                     }
                 }
 
-                if (this.filters['global'] && !globalMatch && globalFilterFieldsArray) {
+                if (localMatch && activeFilters['global'] && !globalMatch && globalFilterFieldsArray) {
                     for (let j = 0; j < globalFilterFieldsArray.length; j++) {
                         let globalFilterField = globalFilterFieldsArray[j];
 
-                        globalMatch = FilterService.filters[this.filters['global'].matchMode || FilterMatchMode.CONTAINS](ObjectUtils.resolveFieldData(data[i], globalFilterField), this.filters['global'].value, this.filterLocale);
+                        globalMatch = FilterService.filters[activeFilters['global'].matchMode || FilterMatchMode.CONTAINS](ObjectUtils.resolveFieldData(data[i], globalFilterField), activeFilters['global'].value, this.filterLocale);
 
                         if (globalMatch) {
                             break;
@@ -644,7 +674,7 @@ export default {
 
                 let matches;
 
-                if (this.filters['global']) {
+                if (activeFilters['global']) {
                     matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
                 } else {
                     matches = localFiltered && localMatch;
@@ -655,7 +685,7 @@ export default {
                 }
             }
 
-            if (filteredValue.length === this.value.length) {
+            if (filteredValue.length === this.value.length || Object.keys(activeFilters).length == 0) {
                 filteredValue = data;
             }
 
@@ -1229,6 +1259,8 @@ export default {
                         !!el && (el.style.width = el.style.minWidth = tableWidth);
                     };
 
+                    // Reasoning: resize table cells before updating the table width so that it can use existing computed cell widths and adjust only the one column.
+                    this.resizeTableCells(newColumnWidth);
                     updateTableWidth(this.$refs.table);
 
                     if (!this.virtualScrollerDisabled) {
@@ -1238,8 +1270,6 @@ export default {
                         updateTableWidth(body);
                         updateTableWidth(frozenBody);
                     }
-
-                    this.resizeTableCells(newColumnWidth);
                 }
 
                 this.$emit('column-resize-end', {

package/datatable/TableBody.vue

@@ -349,7 +349,7 @@ export default {
         getRowIndex(index) {
             const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
 
-            return getItemOptions ? getItemOptions(index).index : this.first + index;
+            return getItemOptions ? getItemOptions(index).index : index;
         },
         getRowStyle(rowData) {
             if (this.rowStyle) {

package/datatable/datatable.cjs.js

@@ -1274,7 +1274,7 @@ function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) {
 function _defineProperty$9(obj, key, value) { key = _toPropertyKey$9(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey$9(arg) { var key = _toPrimitive$9(arg, "string"); return _typeof$9(key) === "symbol" ? key : String(key); }
 function _toPrimitive$9(input, hint) { if (_typeof$9(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$9(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var _hoisted_1$5 = ["data-p-selection-column", "data-p-editable-column", "data-p-cell-editing", "data-p-frozen-column"];
+var _hoisted_1$5 = ["colspan", "rowspan", "data-p-selection-column", "data-p-editable-column", "data-p-cell-editing", "data-p-frozen-column"];
 var _hoisted_2$2 = ["aria-expanded", "aria-controls", "aria-label"];
 var _hoisted_3$2 = ["aria-label"];
 var _hoisted_4$1 = ["aria-label"];
@@ -1302,6 +1302,8 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     key: 1,
     style: $options.containerStyle,
     "class": $options.containerClass,
+    colspan: $options.columnProp('colspan'),
+    rowspan: $options.columnProp('rowspan'),
     onClick: _cache[6] || (_cache[6] = function () {
       return $options.onClick && $options.onClick.apply($options, arguments);
     }),
@@ -1644,7 +1646,7 @@ var script$7 = {
     },
     getRowIndex: function getRowIndex(index) {
       var getItemOptions = this.getVirtualScrollerProp('getItemOptions');
-      return getItemOptions ? getItemOptions(index).index : this.first + index;
+      return getItemOptions ? getItemOptions(index).index : index;
     },
     getRowStyle: function getRowStyle(rowData) {
       if (this.rowStyle) {
@@ -4130,15 +4132,15 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 script$1.render = render$1;
 
 function _typeof$1(obj) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$1(obj); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty$1(obj, key, value) { key = _toPropertyKey$1(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey$1(arg) { var key = _toPrimitive$1(arg, "string"); return _typeof$1(key) === "symbol" ? key : String(key); }
 function _toPrimitive$1(input, hint) { if (_typeof$1(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$1(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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(_e2) { throw _e2; }, 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(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -4276,7 +4278,7 @@ var script = {
       if (this.columnProp(column, 'sortable')) {
         var targetNode = event.target;
         var columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
-        if (utils.DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' || targetNode.closest('[data-p-sortable-column="true"]')) {
+        if (utils.DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' || targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]')) {
           utils.DomHandler.clearSelection();
           if (this.sortMode === 'single') {
             if (this.d_sortField === columnField) {
@@ -4322,13 +4324,27 @@ var script = {
         return this.sortMultiple(value);
       }
       var data = _toConsumableArray(value);
+      var resolvedFieldDatas = new Map();
+      var _iterator = _createForOfIteratorHelper(data),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var item = _step.value;
+          resolvedFieldDatas.set(item, utils.ObjectUtils.resolveFieldData(item, this.d_sortField));
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var comparer = new Intl.Collator(undefined, {
+        numeric: true
+      }).compare;
       data.sort(function (data1, data2) {
-        var value1 = utils.ObjectUtils.resolveFieldData(data1, _this.d_sortField);
-        var value2 = utils.ObjectUtils.resolveFieldData(data2, _this.d_sortField);
+        var value1 = resolvedFieldDatas.get(data1);
+        var value2 = resolvedFieldDatas.get(data2);
         var result = null;
-        if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, {
-          numeric: true
-        });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+        if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
         return _this.d_sortOrder * result;
       });
       return data;
@@ -4355,9 +4371,10 @@ var script = {
       var result = null;
       if (typeof value1 === 'string' || value1 instanceof String) {
         if (value1.localeCompare && value1 !== value2) {
-          return this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, {
+          var comparer = new Intl.Collator(undefined, {
             numeric: true
-          });
+          }).compare;
+          return this.d_multiSortMeta[index].order * comparer(value1, value2);
         }
       } else {
         result = value1 < value2 ? -1 : 1;
@@ -4384,14 +4401,40 @@ var script = {
       }
       this.d_multiSortMeta = _toConsumableArray(this.d_multiSortMeta);
     },
+    getActiveFilters: function getActiveFilters(filters) {
+      var removeEmptyFilters = function removeEmptyFilters(_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+        if (value.constraints) {
+          var filteredConstraints = value.constraints.filter(function (constraint) {
+            return constraint.value !== null;
+          });
+          if (filteredConstraints.length > 0) {
+            return [key, _objectSpread$1(_objectSpread$1({}, value), {}, {
+              constraints: filteredConstraints
+            })];
+          }
+        } else if (value.value !== null) {
+          return [key, value];
+        }
+        return undefined;
+      };
+      var filterValidEntries = function filterValidEntries(entry) {
+        return entry !== undefined;
+      };
+      var entries = Object.entries(filters).map(removeEmptyFilters).filter(filterValidEntries);
+      return Object.fromEntries(entries);
+    },
     filter: function filter(data) {
       var _this3 = this;
       if (!data) {
         return;
       }
       this.clearEditingMetaData();
+      var activeFilters = this.getActiveFilters(this.filters);
       var globalFilterFieldsArray;
-      if (this.filters['global']) {
+      if (activeFilters['global']) {
         globalFilterFieldsArray = this.globalFilterFields || this.columns.map(function (col) {
           return _this3.columnProp(col, 'filterField') || _this3.columnProp(col, 'field');
         });
@@ -4401,26 +4444,26 @@ var script = {
         var localMatch = true;
         var globalMatch = false;
         var localFiltered = false;
-        for (var prop in this.filters) {
-          if (Object.prototype.hasOwnProperty.call(this.filters, prop) && prop !== 'global') {
+        for (var prop in activeFilters) {
+          if (Object.prototype.hasOwnProperty.call(activeFilters, prop) && prop !== 'global') {
             localFiltered = true;
             var filterField = prop;
-            var filterMeta = this.filters[filterField];
+            var filterMeta = activeFilters[filterField];
             if (filterMeta.operator) {
-              var _iterator = _createForOfIteratorHelper(filterMeta.constraints),
-                _step;
+              var _iterator2 = _createForOfIteratorHelper(filterMeta.constraints),
+                _step2;
               try {
-                for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                  var filterConstraint = _step.value;
+                for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                  var filterConstraint = _step2.value;
                   localMatch = this.executeLocalFilter(filterField, data[i], filterConstraint);
                   if (filterMeta.operator === api.FilterOperator.OR && localMatch || filterMeta.operator === api.FilterOperator.AND && !localMatch) {
                     break;
                   }
                 }
               } catch (err) {
-                _iterator.e(err);
+                _iterator2.e(err);
               } finally {
-                _iterator.f();
+                _iterator2.f();
               }
             } else {
               localMatch = this.executeLocalFilter(filterField, data[i], filterMeta);
@@ -4430,17 +4473,17 @@ var script = {
             }
           }
         }
-        if (this.filters['global'] && !globalMatch && globalFilterFieldsArray) {
+        if (localMatch && activeFilters['global'] && !globalMatch && globalFilterFieldsArray) {
           for (var j = 0; j < globalFilterFieldsArray.length; j++) {
             var globalFilterField = globalFilterFieldsArray[j];
-            globalMatch = api.FilterService.filters[this.filters['global'].matchMode || api.FilterMatchMode.CONTAINS](utils.ObjectUtils.resolveFieldData(data[i], globalFilterField), this.filters['global'].value, this.filterLocale);
+            globalMatch = api.FilterService.filters[activeFilters['global'].matchMode || api.FilterMatchMode.CONTAINS](utils.ObjectUtils.resolveFieldData(data[i], globalFilterField), activeFilters['global'].value, this.filterLocale);
             if (globalMatch) {
               break;
             }
           }
         }
         var matches = void 0;
-        if (this.filters['global']) {
+        if (activeFilters['global']) {
           matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
         } else {
           matches = localFiltered && localMatch;
@@ -4449,7 +4492,7 @@ var script = {
           filteredValue.push(data[i]);
         }
       }
-      if (filteredValue.length === this.value.length) {
+      if (filteredValue.length === this.value.length || Object.keys(activeFilters).length == 0) {
         filteredValue = data;
       }
       var filterEvent = this.createLazyLoadEvent();
@@ -4843,17 +4886,17 @@ var script = {
     updateSelectionKeys: function updateSelectionKeys(selection) {
       this.d_selectionKeys = {};
       if (Array.isArray(selection)) {
-        var _iterator2 = _createForOfIteratorHelper(selection),
-          _step2;
+        var _iterator3 = _createForOfIteratorHelper(selection),
+          _step3;
         try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            var data = _step2.value;
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var data = _step3.value;
             this.d_selectionKeys[String(utils.ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
           }
         } catch (err) {
-          _iterator2.e(err);
+          _iterator3.e(err);
         } finally {
-          _iterator2.f();
+          _iterator3.f();
         }
       } else {
         this.d_selectionKeys[String(utils.ObjectUtils.resolveFieldData(selection, this.dataKey))] = 1;
@@ -4862,17 +4905,17 @@ var script = {
     updateExpandedRowKeys: function updateExpandedRowKeys(expandedRows) {
       if (expandedRows && expandedRows.length) {
         this.d_expandedRowKeys = {};
-        var _iterator3 = _createForOfIteratorHelper(expandedRows),
-          _step3;
+        var _iterator4 = _createForOfIteratorHelper(expandedRows),
+          _step4;
         try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var data = _step3.value;
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            var data = _step4.value;
             this.d_expandedRowKeys[String(utils.ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
           }
         } catch (err) {
-          _iterator3.e(err);
+          _iterator4.e(err);
         } finally {
-          _iterator3.f();
+          _iterator4.f();
         }
       } else {
         this.d_expandedRowKeys = null;
@@ -4881,17 +4924,17 @@ var script = {
     updateEditingRowKeys: function updateEditingRowKeys(editingRows) {
       if (editingRows && editingRows.length) {
         this.d_editingRowKeys = {};
-        var _iterator4 = _createForOfIteratorHelper(editingRows),
-          _step4;
+        var _iterator5 = _createForOfIteratorHelper(editingRows),
+          _step5;
         try {
-          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-            var data = _step4.value;
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+            var data = _step5.value;
             this.d_editingRowKeys[String(utils.ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
           }
         } catch (err) {
-          _iterator4.e(err);
+          _iterator5.e(err);
         } finally {
-          _iterator4.f();
+          _iterator5.f();
         }
       } else {
         this.d_editingRowKeys = null;
@@ -4952,8 +4995,8 @@ var script = {
         data.forEach(function (record) {
           csv += '\n';
           var rowInitiated = false;
-          for (var _i = 0; _i < _this4.columns.length; _i++) {
-            var _column = _this4.columns[_i];
+          for (var _i2 = 0; _i2 < _this4.columns.length; _i2++) {
+            var _column = _this4.columns[_i2];
             if (_this4.columnProp(_column, 'exportable') !== false && _this4.columnProp(_column, 'field')) {
               if (rowInitiated) csv += _this4.csvSeparator;else rowInitiated = true;
               var cellData = utils.ObjectUtils.resolveFieldData(record, _this4.columnProp(_column, 'field'));
@@ -4973,9 +5016,9 @@ var script = {
 
       //footers
       var footerInitiated = false;
-      for (var _i2 = 0; _i2 < this.columns.length; _i2++) {
-        var _column2 = this.columns[_i2];
-        if (_i2 === 0) csv += '\n';
+      for (var _i3 = 0; _i3 < this.columns.length; _i3++) {
+        var _column2 = this.columns[_i3];
+        if (_i3 === 0) csv += '\n';
         if (this.columnProp(_column2, 'exportable') !== false && this.columnProp(_column2, 'exportFooter')) {
           if (footerInitiated) csv += this.csvSeparator;else footerInitiated = true;
           csv += '"' + (this.columnProp(_column2, 'exportFooter') || this.columnProp(_column2, 'footer') || this.columnProp(_column2, 'field')) + '"';
@@ -5020,6 +5063,9 @@ var script = {
           var updateTableWidth = function updateTableWidth(el) {
             !!el && (el.style.width = el.style.minWidth = tableWidth);
           };
+
+          // Reasoning: resize table cells before updating the table width so that it can use existing computed cell widths and adjust only the one column.
+          this.resizeTableCells(newColumnWidth);
           updateTableWidth(this.$refs.table);
           if (!this.virtualScrollerDisabled) {
             var body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
@@ -5027,7 +5073,6 @@ var script = {
             updateTableWidth(body);
             updateTableWidth(frozenBody);
           }
-          this.resizeTableCells(newColumnWidth);
         }
         this.$emit('column-resize-end', {
           element: this.resizeColumnElement,
@@ -5535,10 +5580,10 @@ var script = {
     cloneFilters: function cloneFilters() {
       var cloned = {};
       if (this.filters) {
-        Object.entries(this.filters).forEach(function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 2),
-            prop = _ref2[0],
-            value = _ref2[1];
+        Object.entries(this.filters).forEach(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            prop = _ref4[0],
+            value = _ref4[1];
           cloned[prop] = value.operator ? {
             operator: value.operator,
             constraints: value.constraints.map(function (constraint) {
@@ -5630,20 +5675,20 @@ var script = {
       var cols = this.recursiveGetChildren(children, []);
       if (this.reorderableColumns && this.d_columnOrder) {
         var orderedColumns = [];
-        var _iterator5 = _createForOfIteratorHelper(this.d_columnOrder),
-          _step5;
+        var _iterator6 = _createForOfIteratorHelper(this.d_columnOrder),
+          _step6;
         try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            var columnKey = _step5.value;
+          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+            var columnKey = _step6.value;
             var column = this.findColumnByKey(cols, columnKey);
             if (column && !this.columnProp(column, 'hidden')) {
               orderedColumns.push(column);
             }
           }
         } catch (err) {
-          _iterator5.e(err);
+          _iterator6.e(err);
         } finally {
-          _iterator5.f();
+          _iterator6.f();
         }
         return [].concat(orderedColumns, _toConsumableArray(cols.filter(function (item) {
           return orderedColumns.indexOf(item) < 0;
@@ -5654,19 +5699,19 @@ var script = {
     headerColumnGroup: function headerColumnGroup() {
       var children = this.getChildren();
       if (children) {
-        var _iterator6 = _createForOfIteratorHelper(children),
-          _step6;
+        var _iterator7 = _createForOfIteratorHelper(children),
+          _step7;
         try {
-          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-            var child = _step6.value;
+          for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+            var child = _step7.value;
             if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'header') {
               return child;
             }
           }
         } catch (err) {
-          _iterator6.e(err);
+          _iterator7.e(err);
         } finally {
-          _iterator6.f();
+          _iterator7.f();
         }
       }
       return null;
@@ -5674,19 +5719,19 @@ var script = {
     footerColumnGroup: function footerColumnGroup() {
       var children = this.getChildren();
       if (children) {
-        var _iterator7 = _createForOfIteratorHelper(children),
-          _step7;
+        var _iterator8 = _createForOfIteratorHelper(children),
+          _step8;
         try {
-          for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-            var child = _step7.value;
+          for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+            var child = _step8.value;
             if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'footer') {
               return child;
             }
           }
         } catch (err) {
-          _iterator7.e(err);
+          _iterator8.e(err);
         } finally {
-          _iterator7.f();
+          _iterator8.f();
         }
       }
       return null;