primevue 4.2.5 → 4.3.0

package/datatable/index.mjs

@@ -1,7 +1,7 @@
-import { getFirstFocusableElement, invokeElementMethod, getAttribute, getNextElementSibling, getOuterWidth, getPreviousElementSibling, getOuterHeight, focus, addStyle, absolutePosition, isTouchDevice, getIndex, isClickable, clearSelection, findSingle, find, exportCSV, getOffset, isRTL, getHiddenElementOuterWidth, getHiddenElementOuterHeight, removeClass, addClass, setAttribute } from '@primeuix/utils/dom';
-import { resolveFieldData, equals, isNotEmpty, localeComparator, sort, findIndexInList, reorderArray, isEmpty } from '@primeuix/utils/object';
-import { FilterOperator, FilterService, FilterMatchMode } from '@primevue/core/api';
-import { getVNodeProp, UniqueComponentId, HelperSet, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
+import { getNextElementSibling, getOuterWidth, getPreviousElementSibling, getAttribute, getFirstFocusableElement, invokeElementMethod, getOuterHeight, isTouchDevice, addStyle, absolutePosition, focus, getIndex, setAttribute, find, removeClass, getOffset, addClass, getHiddenElementOuterWidth, getHiddenElementOuterHeight, isRTL, exportCSV, findSingle, clearSelection, isClickable } from '@primeuix/utils/dom';
+import { resolveFieldData, isNotEmpty, equals, isEmpty, reorderArray, findIndexInList, localeComparator, sort } from '@primeuix/utils/object';
+import { FilterOperator, FilterMatchMode, FilterService } from '@primevue/core/api';
+import { getVNodeProp, HelperSet, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import ArrowDownIcon from '@primevue/icons/arrowdown';
 import ArrowUpIcon from '@primevue/icons/arrowup';
 import SpinnerIcon from '@primevue/icons/spinner';
@@ -11,7 +11,7 @@ import BaseComponent from '@primevue/core/basecomponent';
 import DataTableStyle from 'primevue/datatable/style';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronRightIcon from '@primevue/icons/chevronright';
-import { mergeProps, resolveComponent, openBlock, createBlock, withCtx, resolveDynamicComponent, normalizeClass, createCommentVNode, resolveDirective, createElementBlock, Fragment, withDirectives, createTextVNode, toDisplayString, createElementVNode, withModifiers, renderList, createVNode, Transition, withKeys, normalizeProps, renderSlot, createSlots } from 'vue';
+import { mergeProps, resolveComponent, createBlock, openBlock, withCtx, createCommentVNode, resolveDynamicComponent, normalizeClass, resolveDirective, createElementBlock, withDirectives, Fragment, createTextVNode, toDisplayString, createElementVNode, withModifiers, renderList, createVNode, Transition, withKeys, normalizeProps, renderSlot, createSlots } from 'vue';
 import BarsIcon from '@primevue/icons/bars';
 import CheckIcon from '@primevue/icons/check';
 import PencilIcon from '@primevue/icons/pencil';
@@ -23,6 +23,7 @@ import Checkbox from 'primevue/checkbox';
 import RadioButton from 'primevue/radiobutton';
 import { ZIndex } from '@primeuix/utils/zindex';
 import FilterIcon from '@primevue/icons/filter';
+import FilterFillIcon from '@primevue/icons/filterfill';
 import FilterSlashIcon from '@primevue/icons/filterslash';
 import PlusIcon from '@primevue/icons/plus';
 import TrashIcon from '@primevue/icons/trash';
@@ -34,7 +35,7 @@ import SortAmountDownIcon from '@primevue/icons/sortamountdown';
 import SortAmountUpAltIcon from '@primevue/icons/sortamountupalt';
 import Badge from 'primevue/badge';
 
-var script$c = {
+var script$d = {
   name: 'BaseDataTable',
   "extends": BaseComponent,
   props: {
@@ -376,7 +377,7 @@ var script$c = {
   }
 };
 
-var script$b = {
+var script$c = {
   name: 'RowCheckbox',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -436,7 +437,7 @@ var script$b = {
   }
 };
 
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CheckIcon = resolveComponent("CheckIcon");
   var _component_Checkbox = resolveComponent("Checkbox");
   return openBlock(), createBlock(_component_Checkbox, {
@@ -462,9 +463,9 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["modelValue", "disabled", "aria-label", "onChange", "unstyled", "pt"]);
 }
 
-script$b.render = render$b;
+script$c.render = render$c;
 
-var script$a = {
+var script$b = {
   name: 'RowRadioButton',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -515,7 +516,7 @@ var script$a = {
   }
 };
 
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_RadioButton = resolveComponent("RadioButton");
   return openBlock(), createBlock(_component_RadioButton, {
     modelValue: $props.checked,
@@ -528,9 +529,13 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 8, ["modelValue", "disabled", "name", "onChange", "unstyled", "pt"]);
 }
 
-script$a.render = render$a;
+script$b.render = render$b;
 
-var script$9 = {
+function _typeof$c(o) { "@babel/helpers - typeof"; return _typeof$c = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$c(o); }
+function _regeneratorRuntime() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: true, configurable: true, writable: true }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof$c(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: true }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(true); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = false, next; return next.value = t, next.done = true, next; }; return i.next = i; } } throw new TypeError(_typeof$c(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: true }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: true }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = false, next; } return next.done = true, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = false, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = true; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, true); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, true); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+var script$a = {
   name: 'BodyCell',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -604,6 +609,7 @@ var script$9 = {
   documentEditListener: null,
   selfClick: false,
   overlayEventListener: null,
+  editCompleteTimeout: null,
   data: function data() {
     return {
       d_editing: this.editing,
@@ -702,19 +708,28 @@ var script$9 = {
       var _this2 = this;
       if (!this.documentEditListener) {
         this.documentEditListener = function (event) {
+          _this2.selfClick = _this2.$el && _this2.$el.contains(event.target);
+          if (_this2.editCompleteTimeout) {
+            clearTimeout(_this2.editCompleteTimeout);
+          }
           if (!_this2.selfClick) {
-            _this2.completeEdit(event, 'outside');
+            _this2.editCompleteTimeout = setTimeout(function () {
+              _this2.completeEdit(event, 'outside');
+            }, 1);
           }
-          _this2.selfClick = false;
         };
-        document.addEventListener('click', this.documentEditListener);
+        document.addEventListener('mousedown', this.documentEditListener);
       }
     },
     unbindDocumentEditListener: function unbindDocumentEditListener() {
       if (this.documentEditListener) {
-        document.removeEventListener('click', this.documentEditListener);
+        document.removeEventListener('mousedown', this.documentEditListener);
         this.documentEditListener = null;
         this.selfClick = false;
+        if (this.editCompleteTimeout) {
+          clearTimeout(this.editCompleteTimeout);
+          this.editCompleteTimeout = null;
+        }
       }
     },
     switchCellToViewMode: function switchCellToViewMode() {
@@ -726,7 +741,6 @@ var script$9 = {
     onClick: function onClick(event) {
       var _this3 = this;
       if (this.editMode === 'cell' && this.isEditable()) {
-        this.selfClick = true;
         if (!this.d_editing) {
           this.d_editing = true;
           this.bindDocumentEditListener();
@@ -737,9 +751,7 @@ var script$9 = {
             index: this.rowIndex
           });
           this.overlayEventListener = function (e) {
-            if (_this3.$el && _this3.$el.contains(e.target)) {
-              _this3.selfClick = true;
-            }
+            _this3.selfClick = _this3.$el && _this3.$el.contains(e.target);
           };
           OverlayEventBus.on('overlay-click', this.overlayEventListener);
         }
@@ -789,20 +801,54 @@ var script$9 = {
       }
     },
     moveToPreviousCell: function moveToPreviousCell(event) {
-      var currentCell = this.findCell(event.target);
-      var targetCell = this.findPreviousEditableColumn(currentCell);
-      if (targetCell) {
-        invokeElementMethod(targetCell, 'click');
-        event.preventDefault();
-      }
+      var _this4 = this;
+      return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var currentCell, targetCell;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              currentCell = _this4.findCell(event.target);
+              targetCell = _this4.findPreviousEditableColumn(currentCell);
+              if (!targetCell) {
+                _context.next = 7;
+                break;
+              }
+              _context.next = 5;
+              return _this4.$nextTick();
+            case 5:
+              invokeElementMethod(targetCell, 'click');
+              event.preventDefault();
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }))();
     },
     moveToNextCell: function moveToNextCell(event) {
-      var currentCell = this.findCell(event.target);
-      var targetCell = this.findNextEditableColumn(currentCell);
-      if (targetCell) {
-        invokeElementMethod(targetCell, 'click');
-        event.preventDefault();
-      }
+      var _this5 = this;
+      return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var currentCell, targetCell;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              currentCell = _this5.findCell(event.target);
+              targetCell = _this5.findNextEditableColumn(currentCell);
+              if (!targetCell) {
+                _context2.next = 7;
+                break;
+              }
+              _context2.next = 5;
+              return _this5.$nextTick();
+            case 5:
+              invokeElementMethod(targetCell, 'click');
+              event.preventDefault();
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }))();
     },
     findCell: function findCell(element) {
       if (element) {
@@ -918,14 +964,14 @@ var script$9 = {
           var pos = 0;
           var next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
           if (next) {
-            pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
+            pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);
           }
           this.styleObject.insetInlineEnd = pos + 'px';
         } else {
           var _pos = 0;
           var prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
           if (prev) {
-            _pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+            _pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);
           }
           this.styleObject.insetInlineStart = _pos + 'px';
         }
@@ -979,8 +1025,8 @@ var script$9 = {
     }
   },
   components: {
-    DTRadioButton: script$a,
-    DTCheckbox: script$b,
+    DTRadioButton: script$b,
+    DTCheckbox: script$c,
     Button: Button,
     ChevronDownIcon: ChevronDownIcon,
     ChevronRightIcon: ChevronRightIcon,
@@ -994,15 +1040,15 @@ var script$9 = {
   }
 };
 
-function _typeof$a(o) { "@babel/helpers - typeof"; return _typeof$a = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$a(o); }
-function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$a(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$a(e, r, t) { return (r = _toPropertyKey$a(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey$a(t) { var i = _toPrimitive$a(t, "string"); return "symbol" == _typeof$a(i) ? i : i + ""; }
-function _toPrimitive$a(t, r) { if ("object" != _typeof$a(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$a(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1$4 = ["colspan", "rowspan", "data-p-selection-column", "data-p-editable-column", "data-p-cell-editing", "data-p-frozen-column"];
+function _typeof$b(o) { "@babel/helpers - typeof"; return _typeof$b = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$b(o); }
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty$b(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$b(e, r, t) { return (r = _toPropertyKey$b(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$b(t) { var i = _toPrimitive$b(t, "string"); return "symbol" == _typeof$b(i) ? i : i + ""; }
+function _toPrimitive$b(t, r) { if ("object" != _typeof$b(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$b(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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"];
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_DTRadioButton = resolveComponent("DTRadioButton");
   var _component_DTCheckbox = resolveComponent("DTCheckbox");
   var _component_BarsIcon = resolveComponent("BarsIcon");
@@ -1015,7 +1061,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
     style: $options.containerStyle,
     "class": $options.containerClass,
     role: "cell"
-  }, _objectSpread$a(_objectSpread$a({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children.loading), {
+  }, _objectSpread$b(_objectSpread$b({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children.loading), {
     data: $props.rowData,
     column: $props.column,
     field: $options.field,
@@ -1035,7 +1081,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
       return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
     }),
     role: "cell"
-  }, _objectSpread$a(_objectSpread$a({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell')), {
+  }, _objectSpread$b(_objectSpread$b({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell')), {
     "data-p-selection-column": $options.columnProp('selectionMode') != null,
     "data-p-editable-column": $options.isEditable(),
     "data-p-cell-editing": $data.d_editing,
@@ -1185,21 +1231,21 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["class", "aria-label", "unstyled", "onClick", "pt"])) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, {
     key: 7
-  }, [createTextVNode(toDisplayString($options.resolveFieldData()), 1)], 64))], 16, _hoisted_1$4));
+  }, [createTextVNode(toDisplayString($options.resolveFieldData()), 1)], 64))], 16, _hoisted_1$5));
 }
 
-script$9.render = render$9;
+script$a.render = render$a;
 
-function _typeof$9(o) { "@babel/helpers - typeof"; return _typeof$9 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$9(o); }
-function _createForOfIteratorHelper$2(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$2(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _typeof$a(o) { "@babel/helpers - typeof"; return _typeof$a = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$a(o); }
+function _createForOfIteratorHelper$2(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$2(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$2(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$2(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$2(r, a) : void 0; } }
 function _arrayLikeToArray$2(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$9(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$9(e, r, t) { return (r = _toPropertyKey$9(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey$9(t) { var i = _toPrimitive$9(t, "string"); return "symbol" == _typeof$9(i) ? i : i + ""; }
-function _toPrimitive$9(t, r) { if ("object" != _typeof$9(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$9(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var script$8 = {
+function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty$a(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$a(e, r, t) { return (r = _toPropertyKey$a(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$a(t) { var i = _toPrimitive$a(t, "string"); return "symbol" == _typeof$a(i) ? i : i + ""; }
+function _toPrimitive$a(t, r) { if ("object" != _typeof$a(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$a(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var script$9 = {
   name: 'BodyRow',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -1527,7 +1573,7 @@ var script$8 = {
     },
     onRowToggle: function onRowToggle(event) {
       this.d_rowExpanded = !this.d_rowExpanded;
-      this.$emit('row-toggle', _objectSpread$9(_objectSpread$9({}, event), {}, {
+      this.$emit('row-toggle', _objectSpread$a(_objectSpread$a({}, event), {}, {
         expanded: this.d_rowExpanded
       }));
     },
@@ -1669,7 +1715,6 @@ var script$8 = {
       if (this.columns) {
         var hiddenColLength = 0;
         this.columns.forEach(function (column) {
-          if (_this2.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
           if (_this2.columnProp(column, 'hidden')) hiddenColLength++;
         });
         return this.columns.length - hiddenColLength;
@@ -1678,25 +1723,25 @@ var script$8 = {
     }
   },
   components: {
-    DTBodyCell: script$9,
+    DTBodyCell: script$a,
     ChevronDownIcon: ChevronDownIcon,
     ChevronRightIcon: ChevronRightIcon
   }
 };
 
-function _typeof$8(o) { "@babel/helpers - typeof"; return _typeof$8 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$8(o); }
-function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty$8(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$8(e, r, t) { return (r = _toPropertyKey$8(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey$8(t) { var i = _toPrimitive$8(t, "string"); return "symbol" == _typeof$8(i) ? i : i + ""; }
-function _toPrimitive$8(t, r) { if ("object" != _typeof$8(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$8(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1$3 = ["colspan"];
+function _typeof$9(o) { "@babel/helpers - typeof"; return _typeof$9 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$9(o); }
+function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty$9(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$9(e, r, t) { return (r = _toPropertyKey$9(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$9(t) { var i = _toPrimitive$9(t, "string"); return "symbol" == _typeof$9(i) ? i : i + ""; }
+function _toPrimitive$9(t, r) { if ("object" != _typeof$9(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$9(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _hoisted_1$4 = ["colspan"];
 var _hoisted_2$1 = ["tabindex", "aria-selected", "data-p-index", "data-p-selectable-row", "data-p-selected", "data-p-selected-contextmenu"];
 var _hoisted_3 = ["id"];
 var _hoisted_4 = ["colspan"];
 var _hoisted_5 = ["colspan"];
 var _hoisted_6 = ["colspan"];
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
   var _component_ChevronRightIcon = resolveComponent("ChevronRightIcon");
   var _component_DTBodyCell = resolveComponent("DTBodyCell");
@@ -1709,7 +1754,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     role: "row"
   }, _ctx.ptm('rowGroupHeader')), [createElementVNode("td", mergeProps({
     colspan: $options.columnsLength - 1
-  }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowGroupHeaderCell'))), [$props.expandableRowGroups ? (openBlock(), createElementBlock("button", mergeProps({
+  }, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowGroupHeaderCell'))), [$props.expandableRowGroups ? (openBlock(), createElementBlock("button", mergeProps({
     key: 0,
     "class": _ctx.cx('rowToggleButton'),
     onClick: _cache[0] || (_cache[0] = function () {
@@ -1736,7 +1781,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.ptm('rowToggleIcon')), null, 16, ["class"])) : createCommentVNode("", true)], 64))], 16)) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupheader']), {
     data: $props.rowData,
     index: $options.rowIndex
-  }, null, 8, ["data", "index"]))], 16, _hoisted_1$3)], 16)) : createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded : true) ? (openBlock(), createElementBlock("tr", mergeProps({
+  }, null, 8, ["data", "index"]))], 16, _hoisted_1$4)], 16)) : createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded : true) ? (openBlock(), createElementBlock("tr", mergeProps({
     key: 1,
     "class": $options.rowClasses,
     style: $options.rowStyles,
@@ -1821,7 +1866,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     role: "row"
   }, _ctx.ptm('rowExpansion')), [createElementVNode("td", mergeProps({
     colspan: $options.columnsLength
-  }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowExpansionCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.templates['expansion']), {
+  }, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowExpansionCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.templates['expansion']), {
     data: $props.rowData,
     index: $options.rowIndex
   }, null, 8, ["data", "index"]))], 16, _hoisted_4)], 16, _hoisted_3)) : createCommentVNode("", true), $props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter ? (openBlock(), createElementBlock("tr", mergeProps({
@@ -1830,7 +1875,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     role: "row"
   }, _ctx.ptm('rowGroupFooter')), [createElementVNode("td", mergeProps({
     colspan: $options.columnsLength - 1
-  }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowGroupFooterCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.templates['groupfooter']), {
+  }, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowGroupFooterCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.templates['groupfooter']), {
     data: $props.rowData,
     index: $options.rowIndex
   }, null, 8, ["data", "index"]))], 16, _hoisted_5)], 16)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("tr", mergeProps({
@@ -1839,14 +1884,14 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     role: "row"
   }, _ctx.ptm('emptyMessage')), [createElementVNode("td", mergeProps({
     colspan: $options.columnsLength
-  }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('emptyMessageCell'))), [$props.templates.empty ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.empty), {
+  }, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('bodycell')), _ctx.ptm('emptyMessageCell'))), [$props.templates.empty ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.empty), {
     key: 0
   })) : createCommentVNode("", true)], 16, _hoisted_6)], 16));
 }
 
-script$8.render = render$8;
+script$9.render = render$9;
 
-var script$7 = {
+var script$8 = {
   name: 'TableBody',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -2034,20 +2079,14 @@ var script$7 = {
           scrollable: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.scrollable
         }
       };
-    },
-    expandedRowId: function expandedRowId() {
-      return UniqueComponentId();
-    },
-    nameAttributeSelector: function nameAttributeSelector() {
-      return UniqueComponentId();
     }
   },
   components: {
-    DTBodyRow: script$8
+    DTBodyRow: script$9
   }
 };
 
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_DTBodyRow = resolveComponent("DTBodyRow");
   return openBlock(), createElementBlock("tbody", mergeProps({
     ref: $options.bodyRef,
@@ -2092,8 +2131,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       isVirtualScrollerDisabled: $props.isVirtualScrollerDisabled,
       editingMeta: $props.editingMeta,
       rowGroupHeaderStyle: $options.rowGroupHeaderStyle,
-      expandedRowId: $options.expandedRowId,
-      nameAttributeSelector: $options.nameAttributeSelector,
+      expandedRowId: _ctx.$id,
+      nameAttributeSelector: _ctx.$attrSelector,
       onRowgroupToggle: _cache[0] || (_cache[0] = function ($event) {
         return _ctx.$emit('rowgroup-toggle', $event);
       }),
@@ -2173,9 +2212,9 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 8, ["empty", "columns", "templates", "unstyled", "pt"]))], 16);
 }
 
-script$7.render = render$7;
+script$8.render = render$8;
 
-var script$6 = {
+var script$7 = {
   name: 'FooterCell',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -2237,14 +2276,14 @@ var script$6 = {
           var pos = 0;
           var next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
           if (next) {
-            pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
+            pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);
           }
           this.styleObject.insetInlineEnd = pos + 'px';
         } else {
           var _pos = 0;
           var prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
           if (prev) {
-            _pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+            _pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);
           }
           this.styleObject.insetInlineStart = _pos + 'px';
         }
@@ -2263,21 +2302,21 @@ var script$6 = {
   }
 };
 
-function _typeof$7(o) { "@babel/helpers - typeof"; return _typeof$7 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$7(o); }
-function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty$7(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$7(e, r, t) { return (r = _toPropertyKey$7(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey$7(t) { var i = _toPrimitive$7(t, "string"); return "symbol" == _typeof$7(i) ? i : i + ""; }
-function _toPrimitive$7(t, r) { if ("object" != _typeof$7(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$7(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1$2 = ["colspan", "rowspan", "data-p-frozen-column"];
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function _typeof$8(o) { "@babel/helpers - typeof"; return _typeof$8 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$8(o); }
+function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty$8(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$8(e, r, t) { return (r = _toPropertyKey$8(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$8(t) { var i = _toPrimitive$8(t, "string"); return "symbol" == _typeof$8(i) ? i : i + ""; }
+function _toPrimitive$8(t, r) { if ("object" != _typeof$8(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$8(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _hoisted_1$3 = ["colspan", "rowspan", "data-p-frozen-column"];
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("td", mergeProps({
     style: $options.containerStyle,
     "class": $options.containerClass,
     role: "cell",
     colspan: $options.columnProp('colspan'),
     rowspan: $options.columnProp('rowspan')
-  }, _objectSpread$7(_objectSpread$7({}, $options.getColumnPT('root')), $options.getColumnPT('footerCell')), {
+  }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('root')), $options.getColumnPT('footerCell')), {
     "data-p-frozen-column": $options.columnProp('frozen')
   }), [$props.column.children && $props.column.children.footer ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.footer), {
     key: 0,
@@ -2285,15 +2324,15 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 8, ["column"])) : createCommentVNode("", true), $options.columnProp('footer') ? (openBlock(), createElementBlock("span", mergeProps({
     key: 1,
     "class": _ctx.cx('columnFooter')
-  }, $options.getColumnPT('columnFooter')), toDisplayString($options.columnProp('footer')), 17)) : createCommentVNode("", true)], 16, _hoisted_1$2);
+  }, $options.getColumnPT('columnFooter')), toDisplayString($options.columnProp('footer')), 17)) : createCommentVNode("", true)], 16, _hoisted_1$3);
 }
 
-script$6.render = render$6;
+script$7.render = render$7;
 
-function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0; } }
 function _arrayLikeToArray$1(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-var script$5 = {
+var script$6 = {
   name: 'TableFooter',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -2413,24 +2452,24 @@ var script$5 = {
     }
   },
   components: {
-    DTFooterCell: script$6
+    DTFooterCell: script$7
   }
 };
 
-function _typeof$6(o) { "@babel/helpers - typeof"; return _typeof$6 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$6(o); }
-function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$6(e, r, t) { return (r = _toPropertyKey$6(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey$6(t) { var i = _toPrimitive$6(t, "string"); return "symbol" == _typeof$6(i) ? i : i + ""; }
-function _toPrimitive$6(t, r) { if ("object" != _typeof$6(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$6(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function _typeof$7(o) { "@babel/helpers - typeof"; return _typeof$7 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$7(o); }
+function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), true).forEach(function (r) { _defineProperty$7(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$7(e, r, t) { return (r = _toPropertyKey$7(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$7(t) { var i = _toPrimitive$7(t, "string"); return "symbol" == _typeof$7(i) ? i : i + ""; }
+function _toPrimitive$7(t, r) { if ("object" != _typeof$7(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$7(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_DTFooterCell = resolveComponent("DTFooterCell");
   return $options.hasFooter ? (openBlock(), createElementBlock("tfoot", mergeProps({
     key: 0,
     "class": _ctx.cx('tfoot'),
     style: _ctx.sx('tfoot'),
     role: "rowgroup"
-  }, $props.columnGroup ? _objectSpread$6(_objectSpread$6({}, _ctx.ptm('tfoot', $options.ptmTFootOptions)), $options.getColumnGroupPT('root')) : _ctx.ptm('tfoot', $options.ptmTFootOptions), {
+  }, $props.columnGroup ? _objectSpread$7(_objectSpread$7({}, _ctx.ptm('tfoot', $options.ptmTFootOptions)), $options.getColumnGroupPT('root')) : _ctx.ptm('tfoot', $options.ptmTFootOptions), {
     "data-pc-section": "tfoot"
   }), [!$props.columnGroup ? (openBlock(), createElementBlock("tr", mergeProps({
     key: 0,
@@ -2450,7 +2489,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
       key: i,
       role: "row",
       ref_for: true
-    }, _objectSpread$6(_objectSpread$6({}, _ctx.ptm('footerRow')), $options.getRowPT(row, 'root', i))), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.getFooterColumns(row), function (col, j) {
+    }, _objectSpread$7(_objectSpread$7({}, _ctx.ptm('footerRow')), $options.getRowPT(row, 'root', i))), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.getFooterColumns(row), function (col, j) {
       return openBlock(), createElementBlock(Fragment, {
         key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || j
       }, [!$options.columnProp(col, 'hidden') ? (openBlock(), createBlock(_component_DTFooterCell, {
@@ -2463,15 +2502,15 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   }), 128))], 16)) : createCommentVNode("", true);
 }
 
-script$5.render = render$5;
+script$6.render = render$6;
 
-function _typeof$5(o) { "@babel/helpers - typeof"; return _typeof$5 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$5(o); }
-function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty$5(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$5(e, r, t) { return (r = _toPropertyKey$5(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey$5(t) { var i = _toPrimitive$5(t, "string"); return "symbol" == _typeof$5(i) ? i : i + ""; }
-function _toPrimitive$5(t, r) { if ("object" != _typeof$5(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$5(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var script$4 = {
+function _typeof$6(o) { "@babel/helpers - typeof"; return _typeof$6 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$6(o); }
+function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$6(e, r, t) { return (r = _toPropertyKey$6(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$6(t) { var i = _toPrimitive$6(t, "string"); return "symbol" == _typeof$6(i) ? i : i + ""; }
+function _toPrimitive$6(t, r) { if ("object" != _typeof$6(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$6(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var script$5 = {
   name: 'ColumnFilter',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -2503,7 +2542,7 @@ var script$4 = {
     },
     showClearButton: {
       type: Boolean,
-      "default": true
+      "default": false
     },
     showApplyButton: {
       type: Boolean,
@@ -2589,17 +2628,11 @@ var script$4 = {
   },
   data: function data() {
     return {
-      id: this.$attrs.id,
       overlayVisible: false,
       defaultMatchMode: null,
       defaultOperator: null
     };
   },
-  watch: {
-    '$attrs.id': function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    }
-  },
   overlay: null,
   selfClick: false,
   overlayEventListener: null,
@@ -2614,7 +2647,6 @@ var script$4 = {
     }
   },
   mounted: function mounted() {
-    this.id = this.id || UniqueComponentId();
     if (this.filters && this.filters[this.field]) {
       var fieldFilters = this.filters[this.field];
       if (fieldFilters.operator) {
@@ -2627,7 +2659,7 @@ var script$4 = {
   },
   methods: {
     getColumnPT: function getColumnPT(key, params) {
-      var columnMetaData = _objectSpread$5({
+      var columnMetaData = _objectSpread$6({
         props: this.column.props,
         parent: {
           instance: this,
@@ -2650,7 +2682,7 @@ var script$4 = {
       };
     },
     clearFilter: function clearFilter() {
-      var _filters = _objectSpread$5({}, this.filters);
+      var _filters = _objectSpread$6({}, this.filters);
       if (_filters[this.field].operator) {
         _filters[this.field].constraints.splice(1);
         _filters[this.field].operator = this.defaultOperator;
@@ -2710,7 +2742,7 @@ var script$4 = {
       }
     },
     onRowMatchModeChange: function onRowMatchModeChange(matchMode) {
-      var _filters = _objectSpread$5({}, this.filters);
+      var _filters = _objectSpread$6({}, this.filters);
       _filters[this.field].matchMode = matchMode;
       this.$emit('matchmode-change', {
         field: this.field,
@@ -2747,7 +2779,7 @@ var script$4 = {
       return this.filters[this.field].matchMode === matchMode;
     },
     onOperatorChange: function onOperatorChange(value) {
-      var _filters = _objectSpread$5({}, this.filters);
+      var _filters = _objectSpread$6({}, this.filters);
       _filters[this.field].operator = value;
       this.$emit('filter-change', _filters);
       this.$emit('operator-change', {
@@ -2759,7 +2791,7 @@ var script$4 = {
       }
     },
     onMenuMatchModeChange: function onMenuMatchModeChange(value, index) {
-      var _filters = _objectSpread$5({}, this.filters);
+      var _filters = _objectSpread$6({}, this.filters);
       _filters[this.field].constraints[index].matchMode = value;
       this.$emit('matchmode-change', {
         field: this.field,
@@ -2771,7 +2803,7 @@ var script$4 = {
       }
     },
     addConstraint: function addConstraint() {
-      var _filters = _objectSpread$5({}, this.filters);
+      var _filters = _objectSpread$6({}, this.filters);
       var newConstraint = {
         value: null,
         matchMode: this.defaultMatchMode
@@ -2787,7 +2819,7 @@ var script$4 = {
       }
     },
     removeConstraint: function removeConstraint(index) {
-      var _filters = _objectSpread$5({}, this.filters);
+      var _filters = _objectSpread$6({}, this.filters);
       var removedConstraint = _filters[this.field].constraints.splice(index, 1);
       this.$emit('constraint-remove', {
         field: this.field,
@@ -2881,12 +2913,12 @@ var script$4 = {
           }
           _this2.selfClick = false;
         };
-        document.addEventListener('click', this.outsideClickListener);
+        document.addEventListener('click', this.outsideClickListener, true);
       }
     },
     unbindOutsideClickListener: function unbindOutsideClickListener() {
       if (this.outsideClickListener) {
-        document.removeEventListener('click', this.outsideClickListener);
+        document.removeEventListener('click', this.outsideClickListener, true);
         this.outsideClickListener = null;
         this.selfClick = false;
       }
@@ -2930,7 +2962,7 @@ var script$4 = {
       return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
     },
     overlayId: function overlayId() {
-      return this.id + '_overlay';
+      return this.$id + '_overlay';
     },
     matchModes: function matchModes() {
       var _this5 = this;
@@ -3013,6 +3045,7 @@ var script$4 = {
     Button: Button,
     Portal: Portal,
     FilterSlashIcon: FilterSlashIcon,
+    FilterFillIcon: FilterFillIcon,
     FilterIcon: FilterIcon,
     TrashIcon: TrashIcon,
     PlusIcon: PlusIcon
@@ -3022,15 +3055,15 @@ var script$4 = {
   }
 };
 
-function _typeof$4(o) { "@babel/helpers - typeof"; return _typeof$4 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$4(o); }
-function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$4(e, r, t) { return (r = _toPropertyKey$4(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey$4(t) { var i = _toPrimitive$4(t, "string"); return "symbol" == _typeof$4(i) ? i : i + ""; }
-function _toPrimitive$4(t, r) { if ("object" != _typeof$4(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$4(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1$1 = ["id", "aria-modal"];
+function _typeof$5(o) { "@babel/helpers - typeof"; return _typeof$5 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$5(o); }
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty$5(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$5(e, r, t) { return (r = _toPropertyKey$5(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$5(t) { var i = _toPrimitive$5(t, "string"); return "symbol" == _typeof$5(i) ? i : i + ""; }
+function _toPrimitive$5(t, r) { if ("object" != _typeof$5(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$5(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _hoisted_1$2 = ["id", "aria-modal"];
 var _hoisted_2 = ["onClick", "onKeydown", "tabindex"];
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_Button = resolveComponent("Button");
   var _component_Select = resolveComponent("Select");
   var _component_Portal = resolveComponent("Portal");
@@ -3040,7 +3073,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   }, $options.getColumnPT('filter')), [$props.display === 'row' ? (openBlock(), createElementBlock("div", mergeProps({
     key: 0,
     "class": _ctx.cx('filterElementContainer')
-  }, _objectSpread$4(_objectSpread$4({}, $props.filterInputProps), $options.getColumnPT('filterElementContainer'))), [(openBlock(), createBlock(resolveDynamicComponent($props.filterElement), {
+  }, _objectSpread$5(_objectSpread$5({}, $props.filterInputProps), $options.getColumnPT('filterElementContainer'))), [(openBlock(), createBlock(resolveDynamicComponent($props.filterElement), {
     field: $props.field,
     filterModel: $props.filters[$props.field],
     filterCallback: $options.filterCallback
@@ -3059,9 +3092,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[1] || (_cache[1] = function ($event) {
       return $options.onToggleButtonKeyDown($event);
     })
-  }, _objectSpread$4(_objectSpread$4({}, $options.getColumnPT('pcColumnFilterButton', $options.ptmFilterMenuParams)), $props.filterButtonProps.filter)), {
+  }, _objectSpread$5(_objectSpread$5({}, $options.getColumnPT('pcColumnFilterButton', $options.ptmFilterMenuParams)), $props.filterButtonProps.filter)), {
     icon: withCtx(function (slotProps) {
-      return [(openBlock(), createBlock(resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon'), mergeProps({
+      return [(openBlock(), createBlock(resolveDynamicComponent($props.filterIconTemplate || ($options.hasFilter() ? 'FilterFillIcon' : 'FilterIcon')), mergeProps({
         "class": slotProps["class"]
       }, $options.getColumnPT('filterMenuIcon')), null, 16, ["class"]))];
     }),
@@ -3073,7 +3106,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     onClick: _cache[2] || (_cache[2] = function ($event) {
       return $options.clearFilter();
     })
-  }, _objectSpread$4(_objectSpread$4({}, $options.getColumnPT('pcColumnFilterClearButton', $options.ptmHeaderFilterClearParams)), $props.filterButtonProps.inline.clear)), {
+  }, _objectSpread$5(_objectSpread$5({}, $options.getColumnPT('pcColumnFilterClearButton', $options.ptmHeaderFilterClearParams)), $props.filterButtonProps.inline.clear)), {
     icon: withCtx(function (slotProps) {
       return [(openBlock(), createBlock(resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon'), mergeProps({
         "class": slotProps["class"]
@@ -3266,7 +3299,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
             field: $props.field,
             filterModel: $props.filters[$props.field],
             filterCallback: $options.filterCallback
-          }, null, 8, ["field", "filterModel", "filterCallback"]))], 16, _hoisted_1$1)), [[_directive_focustrap]]) : createCommentVNode("", true)];
+          }, null, 8, ["field", "filterModel", "filterCallback"]))], 16, _hoisted_1$2)), [[_directive_focustrap]]) : createCommentVNode("", true)];
         }),
         _: 1
       }, 16, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])];
@@ -3275,9 +3308,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   })], 16);
 }
 
-script$4.render = render$4;
+script$5.render = render$5;
 
-var script$3 = {
+var script$4 = {
   name: 'HeaderCheckbox',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -3330,7 +3363,7 @@ var script$3 = {
   }
 };
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CheckIcon = resolveComponent("CheckIcon");
   var _component_Checkbox = resolveComponent("Checkbox");
   return openBlock(), createBlock(_component_Checkbox, {
@@ -3356,6 +3389,216 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["modelValue", "disabled", "aria-label", "onChange", "unstyled", "pt"]);
 }
 
+script$4.render = render$4;
+
+var script$3 = {
+  name: 'FilterHeaderCell',
+  hostName: 'DataTable',
+  "extends": BaseComponent,
+  emits: ['checkbox-change', 'filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'apply-click'],
+  props: {
+    column: {
+      type: Object,
+      "default": null
+    },
+    index: {
+      type: Number,
+      "default": null
+    },
+    allRowsSelected: {
+      type: Boolean,
+      "default": false
+    },
+    empty: {
+      type: Boolean,
+      "default": false
+    },
+    display: {
+      type: String,
+      "default": 'row'
+    },
+    filters: {
+      type: Object,
+      "default": null
+    },
+    filtersStore: {
+      type: Object,
+      "default": null
+    },
+    rowGroupMode: {
+      type: String,
+      "default": null
+    },
+    groupRowsBy: {
+      type: [Array, String, Function],
+      "default": null
+    },
+    filterInputProps: {
+      type: null,
+      "default": null
+    },
+    filterButtonProps: {
+      type: null,
+      "default": null
+    }
+  },
+  data: function data() {
+    return {
+      styleObject: {}
+    };
+  },
+  mounted: function mounted() {
+    if (this.columnProp('frozen')) {
+      this.updateStickyPosition();
+    }
+  },
+  updated: function updated() {
+    if (this.columnProp('frozen')) {
+      this.updateStickyPosition();
+    }
+  },
+  methods: {
+    columnProp: function columnProp(prop) {
+      return getVNodeProp(this.column, prop);
+    },
+    getColumnPT: function getColumnPT(key) {
+      if (!this.column) return null;
+      var columnMetaData = {
+        props: this.column.props,
+        parent: {
+          instance: this,
+          props: this.$props,
+          state: this.$data
+        },
+        context: {
+          index: this.index
+        }
+      };
+      return mergeProps(this.ptm("column.".concat(key), {
+        column: columnMetaData
+      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
+    },
+    getColumnProp: function getColumnProp() {
+      return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
+    },
+    updateStickyPosition: function updateStickyPosition() {
+      if (this.columnProp('frozen')) {
+        var align = this.columnProp('alignFrozen');
+        if (align === 'right') {
+          var pos = 0;
+          var next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
+          if (next) {
+            pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);
+          }
+          this.styleObject.insetInlineEnd = pos + 'px';
+        } else {
+          var _pos = 0;
+          var prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
+          if (prev) {
+            _pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);
+          }
+          this.styleObject.insetInlineStart = _pos + 'px';
+        }
+      }
+    }
+  },
+  computed: {
+    getFilterColumnHeaderClass: function getFilterColumnHeaderClass() {
+      return [this.cx('headerCell', {
+        column: this.column
+      }), this.columnProp('filterHeaderClass'), this.columnProp('class')];
+    },
+    getFilterColumnHeaderStyle: function getFilterColumnHeaderStyle() {
+      return this.columnProp('frozen') ? [this.columnProp('filterHeaderStyle'), this.columnProp('style'), this.styleObject] : [this.columnProp('filterHeaderStyle'), this.columnProp('style')];
+    }
+  },
+  components: {
+    DTHeaderCheckbox: script$4,
+    DTColumnFilter: script$5
+  }
+};
+
+function _typeof$4(o) { "@babel/helpers - typeof"; return _typeof$4 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$4(o); }
+function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$4(e, r, t) { return (r = _toPropertyKey$4(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$4(t) { var i = _toPrimitive$4(t, "string"); return "symbol" == _typeof$4(i) ? i : i + ""; }
+function _toPrimitive$4(t, r) { if ("object" != _typeof$4(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$4(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _hoisted_1$1 = ["data-p-frozen-column"];
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_DTHeaderCheckbox = resolveComponent("DTHeaderCheckbox");
+  var _component_DTColumnFilter = resolveComponent("DTColumnFilter");
+  return !$options.columnProp('hidden') && ($props.rowGroupMode !== 'subheader' || $props.groupRowsBy !== $options.columnProp('field')) ? (openBlock(), createElementBlock("th", mergeProps({
+    key: 0,
+    style: $options.getFilterColumnHeaderStyle,
+    "class": $options.getFilterColumnHeaderClass
+  }, _objectSpread$4(_objectSpread$4({}, $options.getColumnPT('root')), $options.getColumnPT('headerCell')), {
+    "data-p-frozen-column": $options.columnProp('frozen')
+  }), [$options.columnProp('selectionMode') === 'multiple' ? (openBlock(), createBlock(_component_DTHeaderCheckbox, {
+    key: 0,
+    checked: $props.allRowsSelected,
+    disabled: $props.empty,
+    onChange: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('checkbox-change', $event);
+    }),
+    column: $props.column,
+    unstyled: _ctx.unstyled,
+    pt: _ctx.pt
+  }, null, 8, ["checked", "disabled", "column", "unstyled", "pt"])) : createCommentVNode("", true), $props.column.children && $props.column.children.filter ? (openBlock(), createBlock(_component_DTColumnFilter, {
+    key: 1,
+    field: $options.columnProp('filterField') || $options.columnProp('field'),
+    type: $options.columnProp('dataType'),
+    display: "row",
+    showMenu: $options.columnProp('showFilterMenu'),
+    filterElement: $props.column.children && $props.column.children.filter,
+    filterHeaderTemplate: $props.column.children && $props.column.children.filterheader,
+    filterFooterTemplate: $props.column.children && $props.column.children.filterfooter,
+    filterClearTemplate: $props.column.children && $props.column.children.filterclear,
+    filterApplyTemplate: $props.column.children && $props.column.children.filterapply,
+    filterIconTemplate: $props.column.children && $props.column.children.filtericon,
+    filterAddIconTemplate: $props.column.children && $props.column.children.filteraddicon,
+    filterRemoveIconTemplate: $props.column.children && $props.column.children.filterremoveicon,
+    filterClearIconTemplate: $props.column.children && $props.column.children.filterclearicon,
+    filters: $props.filters,
+    filtersStore: $props.filtersStore,
+    filterInputProps: $props.filterInputProps,
+    filterButtonProps: $props.filterButtonProps,
+    onFilterChange: _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.$emit('filter-change', $event);
+    }),
+    onFilterApply: _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.$emit('filter-apply');
+    }),
+    filterMenuStyle: $options.columnProp('filterMenuStyle'),
+    filterMenuClass: $options.columnProp('filterMenuClass'),
+    showOperator: $options.columnProp('showFilterOperator'),
+    showClearButton: $options.columnProp('showClearButton'),
+    showApplyButton: $options.columnProp('showApplyButton'),
+    showMatchModes: $options.columnProp('showFilterMatchModes'),
+    showAddButton: $options.columnProp('showAddButton'),
+    matchModeOptions: $options.columnProp('filterMatchModeOptions'),
+    maxConstraints: $options.columnProp('maxConstraints'),
+    onOperatorChange: _cache[3] || (_cache[3] = function ($event) {
+      return _ctx.$emit('operator-change', $event);
+    }),
+    onMatchmodeChange: _cache[4] || (_cache[4] = function ($event) {
+      return _ctx.$emit('matchmode-change', $event);
+    }),
+    onConstraintAdd: _cache[5] || (_cache[5] = function ($event) {
+      return _ctx.$emit('constraint-add', $event);
+    }),
+    onConstraintRemove: _cache[6] || (_cache[6] = function ($event) {
+      return _ctx.$emit('constraint-remove', $event);
+    }),
+    onApplyClick: _cache[7] || (_cache[7] = function ($event) {
+      return _ctx.$emit('apply-click', $event);
+    }),
+    column: $props.column,
+    unstyled: _ctx.unstyled,
+    pt: _ctx.pt
+  }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filterIconTemplate", "filterAddIconTemplate", "filterRemoveIconTemplate", "filterClearIconTemplate", "filters", "filtersStore", "filterInputProps", "filterButtonProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints", "column", "unstyled", "pt"])) : createCommentVNode("", true)], 16, _hoisted_1$1)) : createCommentVNode("", true);
+}
+
 script$3.render = render$3;
 
 var script$2 = {
@@ -3552,14 +3795,14 @@ var script$2 = {
           var pos = 0;
           var next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
           if (next) {
-            pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
+            pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);
           }
           this.styleObject.insetInlineEnd = pos + 'px';
         } else {
           var _pos = 0;
           var prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
           if (prev) {
-            _pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+            _pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);
           }
           this.styleObject.insetInlineStart = _pos + 'px';
         }
@@ -3567,8 +3810,8 @@ var script$2 = {
         if (filterRow) {
           var index = getIndex(this.$el);
           if (filterRow.children[index]) {
-            filterRow.children[index].style.left = this.styleObject.left;
-            filterRow.children[index].style.right = this.styleObject.right;
+            filterRow.children[index].style['inset-inline-start'] = this.styleObject['inset-inline-start'];
+            filterRow.children[index].style['inset-inline-end'] = this.styleObject['inset-inline-end'];
           }
         }
       }
@@ -3624,8 +3867,8 @@ var script$2 = {
   },
   components: {
     Badge: Badge,
-    DTHeaderCheckbox: script$3,
-    DTColumnFilter: script$4,
+    DTHeaderCheckbox: script$4,
+    DTColumnFilter: script$5,
     SortAltIcon: SortAltIcon,
     SortAmountUpAltIcon: SortAmountUpAltIcon,
     SortAmountDownIcon: SortAmountDownIcon
@@ -3634,10 +3877,10 @@ var script$2 = {
 
 function _typeof$3(o) { "@babel/helpers - typeof"; return _typeof$3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$3(o); }
 function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$3(e, r, t) { return (r = _toPropertyKey$3(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$3(e, r, t) { return (r = _toPropertyKey$3(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey$3(t) { var i = _toPrimitive$3(t, "string"); return "symbol" == _typeof$3(i) ? i : i + ""; }
-function _toPrimitive$3(t, r) { if ("object" != _typeof$3(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$3(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive$3(t, r) { if ("object" != _typeof$3(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$3(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var _hoisted_1 = ["tabindex", "colspan", "rowspan", "aria-sort", "data-p-sortable-column", "data-p-resizable-column", "data-p-sorted", "data-p-filter-column", "data-p-frozen-column", "data-p-reorderable-column"];
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_Badge = resolveComponent("Badge");
@@ -3966,21 +4209,19 @@ var script$1 = {
   },
   components: {
     DTHeaderCell: script$2,
-    DTHeaderCheckbox: script$3,
-    DTColumnFilter: script$4
+    DTFilterHeaderCell: script$3
   }
 };
 
 function _typeof$2(o) { "@babel/helpers - typeof"; return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$2(o); }
 function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$2(e, r, t) { return (r = _toPropertyKey$2(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$2(e, r, t) { return (r = _toPropertyKey$2(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey$2(t) { var i = _toPrimitive$2(t, "string"); return "symbol" == _typeof$2(i) ? i : i + ""; }
-function _toPrimitive$2(t, r) { if ("object" != _typeof$2(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$2(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive$2(t, r) { if ("object" != _typeof$2(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$2(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_DTHeaderCell = resolveComponent("DTHeaderCell");
-  var _component_DTHeaderCheckbox = resolveComponent("DTHeaderCheckbox");
-  var _component_DTColumnFilter = resolveComponent("DTColumnFilter");
+  var _component_DTFilterHeaderCell = resolveComponent("DTFilterHeaderCell");
   return openBlock(), createElementBlock("thead", mergeProps({
     "class": _ctx.cx('thead'),
     style: _ctx.sx('thead'),
@@ -4125,74 +4366,44 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.ptm('headerRow')), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, function (col, i) {
     return openBlock(), createElementBlock(Fragment, {
       key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
-    }, [!$options.columnProp(col, 'hidden') && ($props.rowGroupMode !== 'subheader' || $props.groupRowsBy !== $options.columnProp(col, 'field')) ? (openBlock(), createElementBlock("th", mergeProps({
+    }, [!$options.columnProp(col, 'hidden') && ($props.rowGroupMode !== 'subheader' || $props.groupRowsBy !== $options.columnProp(col, 'field')) ? (openBlock(), createBlock(_component_DTFilterHeaderCell, {
       key: 0,
-      style: $options.getFilterColumnHeaderStyle(col),
-      "class": $options.getFilterColumnHeaderClass(col),
-      ref_for: true
-    }, _objectSpread$2(_objectSpread$2({}, $options.getColumnPT(col, 'root', i)), $options.getColumnPT(col, 'headerCell', i))), [$options.columnProp(col, 'selectionMode') === 'multiple' ? (openBlock(), createBlock(_component_DTHeaderCheckbox, {
-      key: 0,
-      checked: $props.allRowsSelected,
-      disabled: $props.empty,
-      onChange: _cache[25] || (_cache[25] = function ($event) {
-        return _ctx.$emit('checkbox-change', $event);
-      }),
       column: col,
-      unstyled: _ctx.unstyled,
-      pt: _ctx.pt
-    }, null, 8, ["checked", "disabled", "column", "unstyled", "pt"])) : createCommentVNode("", true), col.children && col.children.filter ? (openBlock(), createBlock(_component_DTColumnFilter, {
-      key: 1,
-      field: $options.columnProp(col, 'filterField') || $options.columnProp(col, 'field'),
-      type: $options.columnProp(col, 'dataType'),
+      index: i,
+      allRowsSelected: $props.allRowsSelected,
+      empty: $props.empty,
       display: "row",
-      showMenu: $options.columnProp(col, 'showFilterMenu'),
-      filterElement: col.children && col.children.filter,
-      filterHeaderTemplate: col.children && col.children.filterheader,
-      filterFooterTemplate: col.children && col.children.filterfooter,
-      filterClearTemplate: col.children && col.children.filterclear,
-      filterApplyTemplate: col.children && col.children.filterapply,
-      filterIconTemplate: col.children && col.children.filtericon,
-      filterAddIconTemplate: col.children && col.children.filteraddicon,
-      filterRemoveIconTemplate: col.children && col.children.filterremoveicon,
-      filterClearIconTemplate: col.children && col.children.filterclearicon,
       filters: $props.filters,
       filtersStore: $props.filtersStore,
       filterInputProps: $props.filterInputProps,
       filterButtonProps: $props.filterButtonProps,
-      onFilterChange: _cache[26] || (_cache[26] = function ($event) {
+      onFilterChange: _cache[25] || (_cache[25] = function ($event) {
         return _ctx.$emit('filter-change', $event);
       }),
-      onFilterApply: _cache[27] || (_cache[27] = function ($event) {
+      onFilterApply: _cache[26] || (_cache[26] = function ($event) {
         return _ctx.$emit('filter-apply');
       }),
-      filterMenuStyle: $options.columnProp(col, 'filterMenuStyle'),
-      filterMenuClass: $options.columnProp(col, 'filterMenuClass'),
-      showOperator: $options.columnProp(col, 'showFilterOperator'),
-      showClearButton: $options.columnProp(col, 'showClearButton'),
-      showApplyButton: $options.columnProp(col, 'showApplyButton'),
-      showMatchModes: $options.columnProp(col, 'showFilterMatchModes'),
-      showAddButton: $options.columnProp(col, 'showAddButton'),
-      matchModeOptions: $options.columnProp(col, 'filterMatchModeOptions'),
-      maxConstraints: $options.columnProp(col, 'maxConstraints'),
-      onOperatorChange: _cache[28] || (_cache[28] = function ($event) {
+      onOperatorChange: _cache[27] || (_cache[27] = function ($event) {
         return _ctx.$emit('operator-change', $event);
       }),
-      onMatchmodeChange: _cache[29] || (_cache[29] = function ($event) {
+      onMatchmodeChange: _cache[28] || (_cache[28] = function ($event) {
         return _ctx.$emit('matchmode-change', $event);
       }),
-      onConstraintAdd: _cache[30] || (_cache[30] = function ($event) {
+      onConstraintAdd: _cache[29] || (_cache[29] = function ($event) {
         return _ctx.$emit('constraint-add', $event);
       }),
-      onConstraintRemove: _cache[31] || (_cache[31] = function ($event) {
+      onConstraintRemove: _cache[30] || (_cache[30] = function ($event) {
         return _ctx.$emit('constraint-remove', $event);
       }),
-      onApplyClick: _cache[32] || (_cache[32] = function ($event) {
+      onApplyClick: _cache[31] || (_cache[31] = function ($event) {
         return _ctx.$emit('apply-click', $event);
       }),
-      column: col,
+      onChange: _cache[32] || (_cache[32] = function ($event) {
+        return _ctx.$emit('checkbox-change', $event);
+      }),
       unstyled: _ctx.unstyled,
       pt: _ctx.pt
-    }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filterIconTemplate", "filterAddIconTemplate", "filterRemoveIconTemplate", "filterClearIconTemplate", "filters", "filtersStore", "filterInputProps", "filterButtonProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints", "column", "unstyled", "pt"])) : createCommentVNode("", true)], 16)) : createCommentVNode("", true)], 64);
+    }, null, 8, ["column", "index", "allRowsSelected", "empty", "filters", "filtersStore", "filterInputProps", "filterButtonProps", "unstyled", "pt"])) : createCommentVNode("", true)], 64);
   }), 128))], 16)) : createCommentVNode("", true)], 16);
 }
 
@@ -4200,18 +4411,18 @@ script$1.render = render$1;
 
 function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
 var _excluded = ["expanded"];
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$1(e, r, t) { return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$1(e, r, t) { return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
-function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = true, o = false; try { if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = true, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -4220,7 +4431,7 @@ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var script = {
   name: 'DataTable',
-  "extends": script$c,
+  "extends": script$d,
   inheritAttrs: false,
   emits: ['value-change', 'update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'row-click', 'row-dblclick', 'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all', 'select-all-change', 'column-resize-end', 'column-reorder', 'row-reorder', 'update:expandedRows', 'row-collapse', 'row-expand', 'update:expandedRowGroups', 'rowgroup-collapse', 'rowgroup-expand', 'update:filters', 'state-restore', 'state-save', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel'],
   provide: function provide() {
@@ -4568,9 +4779,7 @@ var script = {
       var filterEvent = this.createLazyLoadEvent();
       filterEvent.filteredValue = filteredValue;
       this.$emit('filter', filterEvent);
-      this.$nextTick(function () {
-        _this5.$emit('value-change', _this5.processedData);
-      });
+      this.$emit('value-change', filteredValue);
       return filteredValue;
     },
     executeLocalFilter: function executeLocalFilter(field, rowData, filterMeta) {
@@ -4741,7 +4950,8 @@ var script = {
               var data = this.dataToRender(slotProps.rows);
               this.$emit('update:selection', data);
             }
-            event.preventDefault();
+            var isCopyShortcut = event.code === 'KeyC' && metaKey;
+            if (!isCopyShortcut) event.preventDefault();
             break;
         }
       }
@@ -5013,8 +5223,8 @@ var script = {
         rangeEnd = this.rangeRowIndex;
       }
       if (this.lazy && this.paginator) {
-        rangeStart -= this.first;
-        rangeEnd -= this.first;
+        rangeStart -= this.d_first;
+        rangeEnd -= this.d_first;
       }
       var value = this.processedData;
       var _selection = [];
@@ -5879,8 +6089,8 @@ var script = {
   components: {
     DTPaginator: Paginator,
     DTTableHeader: script$1,
-    DTTableBody: script$7,
-    DTTableFooter: script$5,
+    DTTableBody: script$8,
+    DTTableFooter: script$6,
     DTVirtualScroller: VirtualScroller,
     ArrowDownIcon: ArrowDownIcon,
     ArrowUpIcon: ArrowUpIcon,
@@ -5890,10 +6100,10 @@ var script = {
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(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) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_SpinnerIcon = resolveComponent("SpinnerIcon");
   var _component_DTPaginator = resolveComponent("DTPaginator");