primevue 3.43.0 → 3.45.0

package/datatable/datatable.esm.js

@@ -3,7 +3,7 @@ import ArrowDownIcon from 'primevue/icons/arrowdown';
 import ArrowUpIcon from 'primevue/icons/arrowup';
 import SpinnerIcon from 'primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
-import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, ConnectedOverlayScrollHandler } from 'primevue/utils';
+import { DomHandler, ObjectUtils, UniqueComponentId, HelperSet, ZIndexUtils, ConnectedOverlayScrollHandler } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
 import BaseComponent from 'primevue/basecomponent';
 import DataTableStyle from 'primevue/datatable/style';
@@ -28,7 +28,7 @@ import SortAltIcon from 'primevue/icons/sortalt';
 import SortAmountDownIcon from 'primevue/icons/sortamountdown';
 import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
 
-var script$b = {
+var script$c = {
   name: 'BaseDataTable',
   "extends": BaseComponent,
   props: {
@@ -150,7 +150,7 @@ var script$b = {
     },
     metaKeySelection: {
       type: Boolean,
-      "default": true
+      "default": false
     },
     contextMenu: {
       type: Boolean,
@@ -193,7 +193,7 @@ var script$b = {
       "default": false
     },
     expandedRows: {
-      type: Array,
+      type: [Array, Object],
       "default": null
     },
     expandedRowIcon: {
@@ -305,7 +305,7 @@ var script$b = {
   }
 };
 
-var script$a = {
+var script$b = {
   name: 'RowCheckbox',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -360,6 +360,7 @@ var script$a = {
         DomHandler.focus(this.$refs.input);
       }
       event.preventDefault();
+      event.stopPropagation();
     },
     onFocus: function onFocus() {
       this.focused = true;
@@ -388,7 +389,7 @@ var script$a = {
 };
 
 var _hoisted_1$7 = ["checked", "disabled", "tabindex", "aria-label"];
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CheckIcon = resolveComponent("CheckIcon");
   return openBlock(), createElementBlock("div", mergeProps({
     "class": _ctx.cx('checkboxWrapper'),
@@ -428,9 +429,9 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   }, $options.getColumnPT('checkboxIcon')), null, 16, ["class"])) : createCommentVNode("", true)], 16)], 16);
 }
 
-script$a.render = render$a;
+script$b.render = render$b;
 
-var script$9 = {
+var script$a = {
   name: 'RowRadioButton',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -495,7 +496,7 @@ var script$9 = {
 };
 
 var _hoisted_1$6 = ["checked", "disabled", "name"];
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", mergeProps({
     "class": _ctx.cx('radiobuttonWrapper'),
     onClick: _cache[3] || (_cache[3] = function () {
@@ -529,9 +530,9 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   }, $options.getColumnPT('radiobuttonIcon')), null, 16)], 16)], 16);
 }
 
-script$9.render = render$9;
+script$a.render = render$a;
 
-var script$8 = {
+var script$9 = {
   name: 'BodyCell',
   hostName: 'DataTable',
   "extends": BaseComponent,
@@ -983,8 +984,8 @@ var script$8 = {
     }
   },
   components: {
-    DTRadioButton: script$9,
-    DTCheckbox: script$a,
+    DTRadioButton: script$a,
+    DTCheckbox: script$b,
     ChevronDownIcon: ChevronDownIcon,
     ChevronRightIcon: ChevronRightIcon,
     BarsIcon: BarsIcon,
@@ -997,18 +998,18 @@ var script$8 = {
   }
 };
 
-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), !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(obj, key, value) { key = _toPropertyKey$9(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$9(arg) { var key = _toPrimitive$9(arg, "string"); return _typeof$9(key) === "symbol" ? key : String(key); }
-function _toPrimitive$9(input, hint) { if (_typeof$9(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$9(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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(obj, key, value) { key = _toPropertyKey$a(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$a(t) { var i = _toPrimitive$a(t, "string"); return "symbol" == _typeof$a(i) ? i : String(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$5 = ["colspan", "rowspan", "data-p-selection-column", "data-p-editable-column", "data-p-cell-editing", "data-p-frozen-column"];
 var _hoisted_2$2 = ["aria-expanded", "aria-controls", "aria-label"];
 var _hoisted_3$2 = ["aria-label"];
 var _hoisted_4$1 = ["aria-label"];
 var _hoisted_5$1 = ["aria-label"];
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_DTRadioButton = resolveComponent("DTRadioButton");
   var _component_DTCheckbox = resolveComponent("DTCheckbox");
   var _component_BarsIcon = resolveComponent("BarsIcon");
@@ -1020,7 +1021,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     style: $options.containerStyle,
     "class": $options.containerClass,
     role: "cell"
-  }, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children.loading), {
+  }, _objectSpread$a(_objectSpread$a({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children.loading), {
     data: $props.rowData,
     column: $props.column,
     field: $options.field,
@@ -1040,7 +1041,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
       return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
     }),
     role: "cell"
-  }, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell')), {
+  }, _objectSpread$a(_objectSpread$a({}, $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,
@@ -1183,14 +1184,28 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createTextVNode(toDisplayString($options.resolveFieldData()), 1)], 64))], 16, _hoisted_1$5));
 }
 
-script$8.render = render$8;
+script$9.render = render$9;
 
-var script$7 = {
-  name: 'TableBody',
+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), !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(obj, key, value) { key = _toPropertyKey$9(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$9(t) { var i = _toPrimitive$9(t, "string"); return "symbol" == _typeof$9(i) ? i : String(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 = {
+  name: 'BodyRow',
   hostName: 'DataTable',
   "extends": BaseComponent,
   emits: ['rowgroup-toggle', 'row-click', 'row-dblclick', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown', 'row-dragstart', 'row-dragover', 'row-dragleave', 'row-dragend', 'row-drop', 'row-toggle', 'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-meta-change'],
   props: {
+    rowData: {
+      type: Object,
+      "default": null
+    },
+    index: {
+      type: Number,
+      "default": 0
+    },
     value: {
       type: Array,
       "default": null
@@ -1240,11 +1255,7 @@ var script$7 = {
       "default": null
     },
     expandedRows: {
-      type: Array,
-      "default": null
-    },
-    expandedRowKeys: {
-      type: null,
+      type: [Array, Object],
       "default": null
     },
     selection: {
@@ -1275,6 +1286,10 @@ var script$7 = {
       type: null,
       "default": null
     },
+    rowGroupHeaderStyle: {
+      type: null,
+      "default": null
+    },
     editMode: {
       type: String,
       "default": null
@@ -1314,35 +1329,34 @@ var script$7 = {
     isVirtualScrollerDisabled: {
       type: Boolean,
       "default": false
+    },
+    expandedRowId: {
+      type: String,
+      "default": null
+    },
+    nameAttributeSelector: {
+      type: String,
+      "default": null
     }
   },
   data: function data() {
     return {
-      rowGroupHeaderStyleObject: {},
-      tabindexArray: [],
-      isARowSelected: false
+      d_rowExpanded: false
     };
   },
-  mounted: function mounted() {
-    if (this.frozenRow) {
-      this.updateFrozenRowStickyPosition();
-    }
-    if (this.scrollable && this.rowGroupMode === 'subheader') {
-      this.updateFrozenRowGroupHeaderStickyPosition();
-    }
-  },
-  updated: function updated() {
-    if (this.frozenRow) {
-      this.updateFrozenRowStickyPosition();
-    }
-    if (this.scrollable && this.rowGroupMode === 'subheader') {
-      this.updateFrozenRowGroupHeaderStickyPosition();
+  watch: {
+    expandedRows: function expandedRows(newValue) {
+      var _this = this;
+      this.d_rowExpanded = this.dataKey ? (newValue === null || newValue === void 0 ? void 0 : newValue[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)]) !== undefined : newValue === null || newValue === void 0 ? void 0 : newValue.some(function (d) {
+        return _this.equals(_this.rowData, d);
+      });
     }
   },
   methods: {
     columnProp: function columnProp(col, prop) {
       return ObjectUtils.getVNodeProp(col, prop);
     },
+    //@todo - update this method
     getColumnPT: function getColumnPT(key) {
       var columnMetaData = {
         parent: {
@@ -1353,80 +1367,33 @@ var script$7 = {
       };
       return mergeProps(this.ptm("column.".concat(key), {
         column: columnMetaData
-      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp({}), key, columnMetaData));
-    },
-    getColumnProp: function getColumnProp(column) {
-      return column.props && column.props.pt ? column.props.pt : undefined; //@todo
+      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.columnProp({}, 'pt'), key, columnMetaData));
     },
-    getBodyRowPTOptions: function getBodyRowPTOptions(key, rowdata, index) {
-      var _this$$parentInstance, _this$$parentInstance2, _this$$parentInstance3;
+    //@todo - update this method
+    getBodyRowPTOptions: function getBodyRowPTOptions(key) {
+      var _this$$parentInstance;
+      var datatable = (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.$parentInstance;
       return this.ptm(key, {
         context: {
-          index: index,
-          selectable: ((_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.rowHover) || ((_this$$parentInstance2 = this.$parentInstance) === null || _this$$parentInstance2 === void 0 || (_this$$parentInstance2 = _this$$parentInstance2.$parentInstance) === null || _this$$parentInstance2 === void 0 ? void 0 : _this$$parentInstance2.selectionMode),
-          selected: this.isSelected(rowdata),
-          stripedRows: ((_this$$parentInstance3 = this.$parentInstance) === null || _this$$parentInstance3 === void 0 || (_this$$parentInstance3 = _this$$parentInstance3.$parentInstance) === null || _this$$parentInstance3 === void 0 ? void 0 : _this$$parentInstance3.stripedRows) || false
+          index: this.rowIndex,
+          selectable: (datatable === null || datatable === void 0 ? void 0 : datatable.rowHover) || (datatable === null || datatable === void 0 ? void 0 : datatable.selectionMode),
+          selected: this.isSelected,
+          stripedRows: (datatable === null || datatable === void 0 ? void 0 : datatable.stripedRows) || false
         }
       });
     },
-    shouldRenderRowGroupHeader: function shouldRenderRowGroupHeader(value, rowData, i) {
-      var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
-      var prevRowData = value[i - 1];
-      if (prevRowData) {
-        var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
-        return currentRowFieldData !== previousRowFieldData;
-      } else {
-        return true;
-      }
-    },
-    getRowKey: function getRowKey(rowData, index) {
-      return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey) : this.getRowIndex(index);
-    },
-    getRowIndex: function getRowIndex(index) {
-      var getItemOptions = this.getVirtualScrollerProp('getItemOptions');
-      return getItemOptions ? getItemOptions(index).index : index;
-    },
-    getRowStyle: function getRowStyle(rowData) {
-      if (this.rowStyle) {
-        return this.rowStyle(rowData);
-      }
-    },
-    getRowClass: function getRowClass(rowData) {
-      var rowStyleClass = [];
-      if (this.rowClass) {
-        var rowClassValue = this.rowClass(rowData);
-        if (rowClassValue) {
-          rowStyleClass.push(rowClassValue);
-        }
-      }
-      return [this.cx('row', {
-        rowData: rowData
-      }), rowStyleClass];
-    },
-    shouldRenderRowGroupFooter: function shouldRenderRowGroupFooter(value, rowData, i) {
-      if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
-        return false;
-      } else {
-        var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
-        var nextRowData = value[i + 1];
-        if (nextRowData) {
-          var nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
-          return currentRowFieldData !== nextRowFieldData;
-        } else {
-          return true;
-        }
-      }
-    },
-    shouldRenderBodyCell: function shouldRenderBodyCell(value, column, i) {
-      if (this.rowGroupMode) {
+    shouldRenderBodyCell: function shouldRenderBodyCell(column) {
+      var isHidden = this.columnProp(column, 'hidden');
+      if (this.rowGroupMode && !isHidden) {
+        var field = this.columnProp(column, 'field');
         if (this.rowGroupMode === 'subheader') {
-          return this.groupRowsBy !== this.columnProp(column, 'field');
+          return this.groupRowsBy !== field;
         } else if (this.rowGroupMode === 'rowspan') {
           if (this.isGrouped(column)) {
-            var prevRowData = value[i - 1];
+            var prevRowData = this.value[this.rowIndex - 1];
             if (prevRowData) {
-              var currentRowFieldData = ObjectUtils.resolveFieldData(value[i], this.columnProp(column, 'field'));
-              var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.columnProp(column, 'field'));
+              var currentRowFieldData = ObjectUtils.resolveFieldData(this.value[this.rowIndex], field);
+              var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, field);
               return currentRowFieldData !== previousRowFieldData;
             } else {
               return true;
@@ -1436,19 +1403,21 @@ var script$7 = {
           }
         }
       } else {
-        return !this.columnProp(column, 'hidden');
+        return !isHidden;
       }
     },
-    calculateRowGroupSize: function calculateRowGroupSize(value, column, index) {
+    calculateRowGroupSize: function calculateRowGroupSize(column) {
       if (this.isGrouped(column)) {
-        var currentRowFieldData = ObjectUtils.resolveFieldData(value[index], this.columnProp(column, 'field'));
+        var index = this.rowIndex;
+        var field = this.columnProp(column, 'field');
+        var currentRowFieldData = ObjectUtils.resolveFieldData(this.value[index], field);
         var nextRowFieldData = currentRowFieldData;
         var groupRowSpan = 0;
         while (currentRowFieldData === nextRowFieldData) {
           groupRowSpan++;
-          var nextRowData = value[++index];
+          var nextRowData = this.value[++index];
           if (nextRowData) {
-            nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.columnProp(column, 'field'));
+            nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, field);
           } else {
             break;
           }
@@ -1459,55 +1428,21 @@ var script$7 = {
       }
     },
     isGrouped: function isGrouped(column) {
-      if (this.groupRowsBy && this.columnProp(column, 'field')) {
-        if (Array.isArray(this.groupRowsBy)) return this.groupRowsBy.indexOf(column.props.field) > -1;else return this.groupRowsBy === column.props.field;
+      var field = this.columnProp(column, 'field');
+      if (this.groupRowsBy && field) {
+        if (Array.isArray(this.groupRowsBy)) return this.groupRowsBy.indexOf(field) > -1;else return this.groupRowsBy === field;
       } else {
         return false;
       }
     },
-    isRowEditing: function isRowEditing(rowData) {
-      if (rowData && this.editingRows) {
-        if (this.dataKey) return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;else return this.findIndex(rowData, this.editingRows) > -1;
-      }
-      return false;
-    },
-    isRowExpanded: function isRowExpanded(rowData) {
-      if (rowData && this.expandedRows) {
-        if (this.dataKey) return this.expandedRowKeys ? this.expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;else return this.findIndex(rowData, this.expandedRows) > -1;
-      }
-      return false;
-    },
-    isRowGroupExpanded: function isRowGroupExpanded(rowData) {
-      if (this.expandableRowGroups && this.expandedRowGroups) {
-        var groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
-        return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
-      }
-      return false;
-    },
-    isSelected: function isSelected(rowData) {
-      if (rowData && this.selection) {
-        if (this.dataKey) {
-          return this.selectionKeys ? this.selectionKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-        } else {
-          if (this.selection instanceof Array) return this.findIndexInSelection(rowData) > -1;else return this.equals(rowData, this.selection);
-        }
-      }
-      return false;
+    findIndexInSelection: function findIndexInSelection(data) {
+      return this.findIndex(data, this.selection);
     },
-    isSelectedWithContextMenu: function isSelectedWithContextMenu(rowData) {
-      if (rowData && this.contextMenuSelection) {
-        return this.equals(rowData, this.contextMenuSelection, this.dataKey);
-      }
-      return false;
-    },
-    findIndexInSelection: function findIndexInSelection(rowData) {
-      return this.findIndex(rowData, this.selection);
-    },
-    findIndex: function findIndex(rowData, collection) {
+    findIndex: function findIndex(data, collection) {
       var index = -1;
       if (collection && collection.length) {
         for (var i = 0; i < collection.length; i++) {
-          if (this.equals(rowData, collection[i])) {
+          if (this.equals(data, collection[i])) {
             index = i;
             break;
           }
@@ -1518,56 +1453,56 @@ var script$7 = {
     equals: function equals(data1, data2) {
       return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey);
     },
-    onRowGroupToggle: function onRowGroupToggle(event, data) {
+    onRowGroupToggle: function onRowGroupToggle(event) {
       this.$emit('rowgroup-toggle', {
         originalEvent: event,
-        data: data
+        data: this.rowData
       });
     },
-    onRowClick: function onRowClick(event, rowData, rowIndex) {
+    onRowClick: function onRowClick(event) {
       this.$emit('row-click', {
         originalEvent: event,
-        data: rowData,
-        index: rowIndex
+        data: this.rowData,
+        index: this.rowIndex
       });
     },
-    onRowDblClick: function onRowDblClick(event, rowData, rowIndex) {
+    onRowDblClick: function onRowDblClick(event) {
       this.$emit('row-dblclick', {
         originalEvent: event,
-        data: rowData,
-        index: rowIndex
+        data: this.rowData,
+        index: this.rowIndex
       });
     },
-    onRowRightClick: function onRowRightClick(event, rowData, rowIndex) {
+    onRowRightClick: function onRowRightClick(event) {
       this.$emit('row-rightclick', {
         originalEvent: event,
-        data: rowData,
-        index: rowIndex
+        data: this.rowData,
+        index: this.rowIndex
       });
     },
     onRowTouchEnd: function onRowTouchEnd(event) {
       this.$emit('row-touchend', event);
     },
-    onRowKeyDown: function onRowKeyDown(event, rowData, rowIndex) {
+    onRowKeyDown: function onRowKeyDown(event) {
       this.$emit('row-keydown', {
         originalEvent: event,
-        data: rowData,
-        index: rowIndex
+        data: this.rowData,
+        index: this.rowIndex
       });
     },
     onRowMouseDown: function onRowMouseDown(event) {
       this.$emit('row-mousedown', event);
     },
-    onRowDragStart: function onRowDragStart(event, rowIndex) {
+    onRowDragStart: function onRowDragStart(event) {
       this.$emit('row-dragstart', {
         originalEvent: event,
-        index: rowIndex
+        index: this.rowIndex
       });
     },
-    onRowDragOver: function onRowDragOver(event, rowIndex) {
+    onRowDragOver: function onRowDragOver(event) {
       this.$emit('row-dragover', {
         originalEvent: event,
-        index: rowIndex
+        index: this.rowIndex
       });
     },
     onRowDragLeave: function onRowDragLeave(event) {
@@ -1580,7 +1515,10 @@ var script$7 = {
       this.$emit('row-drop', event);
     },
     onRowToggle: function onRowToggle(event) {
-      this.$emit('row-toggle', event);
+      this.d_rowExpanded = !this.d_rowExpanded;
+      this.$emit('row-toggle', _objectSpread$9(_objectSpread$9({}, event), {}, {
+        expanded: this.d_rowExpanded
+      }));
     },
     onRadioChange: function onRadioChange(event) {
       this.$emit('radio-change', event);
@@ -1609,6 +1547,420 @@ var script$7 = {
     onEditingMetaChange: function onEditingMetaChange(event) {
       this.$emit('editing-meta-change', event);
     },
+    getVirtualScrollerProp: function getVirtualScrollerProp(option, options) {
+      options = options || this.virtualScrollerContentProps;
+      return options ? options[option] : null;
+    }
+  },
+  computed: {
+    rowIndex: function rowIndex() {
+      var getItemOptions = this.getVirtualScrollerProp('getItemOptions');
+      return getItemOptions ? getItemOptions(this.index).index : this.index;
+    },
+    rowStyles: function rowStyles() {
+      var _this$rowStyle;
+      return (_this$rowStyle = this.rowStyle) === null || _this$rowStyle === void 0 ? void 0 : _this$rowStyle.call(this, this.rowData);
+    },
+    rowClasses: function rowClasses() {
+      var rowStyleClass = [];
+      if (this.rowClass) {
+        var rowClassValue = this.rowClass(this.rowData);
+        if (rowClassValue) {
+          rowStyleClass.push(rowClassValue);
+        }
+      }
+      return [this.cx('row', {
+        rowData: this.rowData,
+        index: this.rowIndex
+      }), rowStyleClass];
+    },
+    rowTabindex: function rowTabindex() {
+      if (this.selection === null && (this.selectionMode === 'single' || this.selectionMode === 'multiple')) {
+        return this.rowIndex === 0 ? 0 : -1;
+      }
+      return -1;
+    },
+    isRowEditing: function isRowEditing() {
+      if (this.rowData && this.editingRows) {
+        if (this.dataKey) return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : false;else return this.findIndex(this.rowData, this.editingRows) > -1;
+      }
+      return false;
+    },
+    isRowGroupExpanded: function isRowGroupExpanded() {
+      if (this.expandableRowGroups && this.expandedRowGroups) {
+        var groupFieldValue = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
+        return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
+      }
+      return false;
+    },
+    isSelected: function isSelected() {
+      if (this.rowData && this.selection) {
+        if (this.dataKey) {
+          return this.selectionKeys ? this.selectionKeys[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : false;
+        } else {
+          if (this.selection instanceof Array) return this.findIndexInSelection(this.rowData) > -1;else return this.equals(this.rowData, this.selection);
+        }
+      }
+      return false;
+    },
+    isSelectedWithContextMenu: function isSelectedWithContextMenu() {
+      if (this.rowData && this.contextMenuSelection) {
+        return this.equals(this.rowData, this.contextMenuSelection, this.dataKey);
+      }
+      return false;
+    },
+    shouldRenderRowGroupHeader: function shouldRenderRowGroupHeader() {
+      var currentRowFieldData = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
+      var prevRowData = this.value[this.rowIndex - 1];
+      if (prevRowData) {
+        var previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
+        return currentRowFieldData !== previousRowFieldData;
+      } else {
+        return true;
+      }
+    },
+    shouldRenderRowGroupFooter: function shouldRenderRowGroupFooter() {
+      if (this.expandableRowGroups && !this.isRowGroupExpanded) {
+        return false;
+      } else {
+        var currentRowFieldData = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
+        var nextRowData = this.value[this.rowIndex + 1];
+        if (nextRowData) {
+          var nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
+          return currentRowFieldData !== nextRowFieldData;
+        } else {
+          return true;
+        }
+      }
+    },
+    columnsLength: function columnsLength() {
+      var _this2 = this;
+      var hiddenColLength = 0;
+      this.columns.forEach(function (column) {
+        if (_this2.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
+        if (_this2.columnProp(column, 'hidden')) hiddenColLength++;
+      });
+      return this.columns ? this.columns.length - hiddenColLength : 0;
+    }
+  },
+  components: {
+    DTBodyCell: script$9,
+    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(obj, key, value) { key = _toPropertyKey$8(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$8(t) { var i = _toPrimitive$8(t, "string"); return "symbol" == _typeof$8(i) ? i : String(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$4 = ["colspan"];
+var _hoisted_2$1 = ["tabindex", "aria-selected", "data-p-index", "data-p-selectable-row", "data-p-highlight", "data-p-highlight-contextmenu"];
+var _hoisted_3$1 = ["id"];
+var _hoisted_4 = ["colspan"];
+var _hoisted_5 = ["colspan"];
+var _hoisted_6 = ["colspan"];
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
+  var _component_ChevronRightIcon = resolveComponent("ChevronRightIcon");
+  var _component_DTBodyCell = resolveComponent("DTBodyCell");
+  return !$props.empty ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [$props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader ? (openBlock(), createElementBlock("tr", mergeProps({
+    key: 0,
+    "class": _ctx.cx('rowGroupHeader'),
+    style: $props.rowGroupHeaderStyle,
+    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({
+    key: 0,
+    "class": _ctx.cx('rowGroupToggler'),
+    onClick: _cache[0] || (_cache[0] = function () {
+      return $options.onRowGroupToggle && $options.onRowGroupToggle.apply($options, arguments);
+    }),
+    type: "button"
+  }, _ctx.ptm('rowGroupToggler')), [$props.templates['rowgrouptogglericon'] ? (openBlock(), createBlock(resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
+    key: 0,
+    expanded: $options.isRowGroupExpanded
+  }, null, 8, ["expanded"])) : (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [$options.isRowGroupExpanded && $props.expandedRowIcon ? (openBlock(), createElementBlock("span", mergeProps({
+    key: 0,
+    "class": [_ctx.cx('rowGroupTogglerIcon'), $props.expandedRowIcon]
+  }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : $options.isRowGroupExpanded && !$props.expandedRowIcon ? (openBlock(), createBlock(_component_ChevronDownIcon, mergeProps({
+    key: 1,
+    "class": _ctx.cx('rowGroupTogglerIcon')
+  }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : !$options.isRowGroupExpanded && $props.collapsedRowIcon ? (openBlock(), createElementBlock("span", mergeProps({
+    key: 2,
+    "class": [_ctx.cx('rowGroupTogglerIcon'), $props.collapsedRowIcon]
+  }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : !$options.isRowGroupExpanded && !$props.collapsedRowIcon ? (openBlock(), createBlock(_component_ChevronRightIcon, mergeProps({
+    key: 3,
+    "class": _ctx.cx('rowGroupTogglerIcon')
+  }, _ctx.ptm('rowGroupTogglerIcon')), 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$4)], 16)) : createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded : true) ? (openBlock(), createElementBlock("tr", mergeProps({
+    key: 1,
+    "class": $options.rowClasses,
+    style: $options.rowStyles,
+    tabindex: $options.rowTabindex,
+    role: "row",
+    "aria-selected": $props.selectionMode ? $options.isSelected : null,
+    onClick: _cache[1] || (_cache[1] = function () {
+      return $options.onRowClick && $options.onRowClick.apply($options, arguments);
+    }),
+    onDblclick: _cache[2] || (_cache[2] = function () {
+      return $options.onRowDblClick && $options.onRowDblClick.apply($options, arguments);
+    }),
+    onContextmenu: _cache[3] || (_cache[3] = function () {
+      return $options.onRowRightClick && $options.onRowRightClick.apply($options, arguments);
+    }),
+    onTouchend: _cache[4] || (_cache[4] = function () {
+      return $options.onRowTouchEnd && $options.onRowTouchEnd.apply($options, arguments);
+    }),
+    onKeydown: _cache[5] || (_cache[5] = withModifiers(function () {
+      return $options.onRowKeyDown && $options.onRowKeyDown.apply($options, arguments);
+    }, ["self"])),
+    onMousedown: _cache[6] || (_cache[6] = function () {
+      return $options.onRowMouseDown && $options.onRowMouseDown.apply($options, arguments);
+    }),
+    onDragstart: _cache[7] || (_cache[7] = function () {
+      return $options.onRowDragStart && $options.onRowDragStart.apply($options, arguments);
+    }),
+    onDragover: _cache[8] || (_cache[8] = function () {
+      return $options.onRowDragOver && $options.onRowDragOver.apply($options, arguments);
+    }),
+    onDragleave: _cache[9] || (_cache[9] = function () {
+      return $options.onRowDragLeave && $options.onRowDragLeave.apply($options, arguments);
+    }),
+    onDragend: _cache[10] || (_cache[10] = function () {
+      return $options.onRowDragEnd && $options.onRowDragEnd.apply($options, arguments);
+    }),
+    onDrop: _cache[11] || (_cache[11] = function () {
+      return $options.onRowDrop && $options.onRowDrop.apply($options, arguments);
+    })
+  }, $options.getBodyRowPTOptions('bodyRow'), {
+    "data-p-index": $options.rowIndex,
+    "data-p-selectable-row": $props.selectionMode ? true : false,
+    "data-p-highlight": $props.selection && $options.isSelected,
+    "data-p-highlight-contextmenu": $props.contextMenuSelection && $options.isSelectedWithContextMenu
+  }), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, function (col, i) {
+    return openBlock(), createElementBlock(Fragment, null, [$options.shouldRenderBodyCell(col) ? (openBlock(), createBlock(_component_DTBodyCell, {
+      key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i,
+      rowData: $props.rowData,
+      column: col,
+      rowIndex: $options.rowIndex,
+      index: i,
+      selected: $options.isSelected,
+      frozenRow: $props.frozenRow,
+      rowspan: $props.rowGroupMode === 'rowspan' ? $options.calculateRowGroupSize(col) : null,
+      editMode: $props.editMode,
+      editing: $props.editMode === 'row' && $options.isRowEditing,
+      editingMeta: $props.editingMeta,
+      responsiveLayout: $props.responsiveLayout,
+      virtualScrollerContentProps: $props.virtualScrollerContentProps,
+      ariaControls: $props.expandedRowId + '_' + $options.rowIndex + '_expansion',
+      name: $props.nameAttributeSelector,
+      isRowExpanded: $data.d_rowExpanded,
+      expandedRowIcon: $props.expandedRowIcon,
+      collapsedRowIcon: $props.collapsedRowIcon,
+      onRadioChange: $options.onRadioChange,
+      onCheckboxChange: $options.onCheckboxChange,
+      onRowToggle: $options.onRowToggle,
+      onCellEditInit: $options.onCellEditInit,
+      onCellEditComplete: $options.onCellEditComplete,
+      onCellEditCancel: $options.onCellEditCancel,
+      onRowEditInit: $options.onRowEditInit,
+      onRowEditSave: $options.onRowEditSave,
+      onRowEditCancel: $options.onRowEditCancel,
+      onEditingMetaChange: $options.onEditingMetaChange,
+      unstyled: _ctx.unstyled,
+      pt: _ctx.pt
+    }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "frozenRow", "rowspan", "editMode", "editing", "editingMeta", "responsiveLayout", "virtualScrollerContentProps", "ariaControls", "name", "isRowExpanded", "expandedRowIcon", "collapsedRowIcon", "onRadioChange", "onCheckboxChange", "onRowToggle", "onCellEditInit", "onCellEditComplete", "onCellEditCancel", "onRowEditInit", "onRowEditSave", "onRowEditCancel", "onEditingMetaChange", "unstyled", "pt"])) : createCommentVNode("", true)], 64);
+  }), 256))], 16, _hoisted_2$1)) : createCommentVNode("", true), $props.templates['expansion'] && $props.expandedRows && $data.d_rowExpanded ? (openBlock(), createElementBlock("tr", mergeProps({
+    key: 2,
+    id: $props.expandedRowId + '_' + $options.rowIndex + '_expansion',
+    "class": _ctx.cx('rowExpansion'),
+    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']), {
+    data: $props.rowData,
+    index: $options.rowIndex
+  }, null, 8, ["data", "index"]))], 16, _hoisted_4)], 16, _hoisted_3$1)) : createCommentVNode("", true), $props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter ? (openBlock(), createElementBlock("tr", mergeProps({
+    key: 3,
+    "class": _ctx.cx('rowGroupFooter'),
+    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']), {
+    data: $props.rowData,
+    index: $options.rowIndex
+  }, null, 8, ["data", "index"]))], 16, _hoisted_5)], 16)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("tr", mergeProps({
+    key: 1,
+    "class": _ctx.cx('emptyMessage'),
+    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), {
+    key: 0
+  })) : createCommentVNode("", true)], 16, _hoisted_6)], 16));
+}
+
+script$8.render = render$8;
+
+var script$7 = {
+  name: 'TableBody',
+  hostName: 'DataTable',
+  "extends": BaseComponent,
+  emits: ['rowgroup-toggle', 'row-click', 'row-dblclick', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown', 'row-dragstart', 'row-dragover', 'row-dragleave', 'row-dragend', 'row-drop', 'row-toggle', 'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-meta-change'],
+  props: {
+    value: {
+      type: Array,
+      "default": null
+    },
+    columns: {
+      type: null,
+      "default": null
+    },
+    frozenRow: {
+      type: Boolean,
+      "default": false
+    },
+    empty: {
+      type: Boolean,
+      "default": false
+    },
+    rowGroupMode: {
+      type: String,
+      "default": null
+    },
+    groupRowsBy: {
+      type: [Array, String, Function],
+      "default": null
+    },
+    expandableRowGroups: {
+      type: Boolean,
+      "default": false
+    },
+    expandedRowGroups: {
+      type: Array,
+      "default": null
+    },
+    first: {
+      type: Number,
+      "default": 0
+    },
+    dataKey: {
+      type: [String, Function],
+      "default": null
+    },
+    expandedRowIcon: {
+      type: String,
+      "default": null
+    },
+    collapsedRowIcon: {
+      type: String,
+      "default": null
+    },
+    expandedRows: {
+      type: [Array, Object],
+      "default": null
+    },
+    selection: {
+      type: [Array, Object],
+      "default": null
+    },
+    selectionKeys: {
+      type: null,
+      "default": null
+    },
+    selectionMode: {
+      type: String,
+      "default": null
+    },
+    contextMenu: {
+      type: Boolean,
+      "default": false
+    },
+    contextMenuSelection: {
+      type: Object,
+      "default": null
+    },
+    rowClass: {
+      type: null,
+      "default": null
+    },
+    rowStyle: {
+      type: null,
+      "default": null
+    },
+    editMode: {
+      type: String,
+      "default": null
+    },
+    compareSelectionBy: {
+      type: String,
+      "default": 'deepEquals'
+    },
+    editingRows: {
+      type: Array,
+      "default": null
+    },
+    editingRowKeys: {
+      type: null,
+      "default": null
+    },
+    editingMeta: {
+      type: Object,
+      "default": null
+    },
+    templates: {
+      type: null,
+      "default": null
+    },
+    scrollable: {
+      type: Boolean,
+      "default": false
+    },
+    responsiveLayout: {
+      type: String,
+      "default": 'stack'
+    },
+    virtualScrollerContentProps: {
+      type: Object,
+      "default": null
+    },
+    isVirtualScrollerDisabled: {
+      type: Boolean,
+      "default": false
+    }
+  },
+  data: function data() {
+    return {
+      rowGroupHeaderStyleObject: {}
+    };
+  },
+  mounted: function mounted() {
+    if (this.frozenRow) {
+      this.updateFrozenRowStickyPosition();
+    }
+    if (this.scrollable && this.rowGroupMode === 'subheader') {
+      this.updateFrozenRowGroupHeaderStickyPosition();
+    }
+  },
+  updated: function updated() {
+    if (this.frozenRow) {
+      this.updateFrozenRowStickyPosition();
+    }
+    if (this.scrollable && this.rowGroupMode === 'subheader') {
+      this.updateFrozenRowGroupHeaderStickyPosition();
+    }
+  },
+  methods: {
     updateFrozenRowStickyPosition: function updateFrozenRowStickyPosition() {
       this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
     },
@@ -1624,74 +1976,42 @@ var script$7 = {
       // For VirtualScroller
       var contentRef = this.getVirtualScrollerProp('contentRef');
       contentRef && contentRef(el);
-    },
-    setRowTabindex: function setRowTabindex(index) {
-      if (this.selection === null && (this.selectionMode === 'single' || this.selectionMode === 'multiple')) {
-        return index === 0 ? 0 : -1;
-      }
-      return -1;
     }
   },
   computed: {
-    columnsLength: function columnsLength() {
-      var _this = this;
-      var hiddenColLength = 0;
-      this.columns.forEach(function (column) {
-        if (_this.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
-        if (_this.columnProp(column, 'hidden')) hiddenColLength++;
-      });
-      return this.columns ? this.columns.length - hiddenColLength : 0;
-    },
     rowGroupHeaderStyle: function rowGroupHeaderStyle() {
       if (this.scrollable) {
         return {
           top: this.rowGroupHeaderStyleObject.top
         };
       }
-      return null;
-    },
-    bodyStyle: function bodyStyle() {
-      return this.getVirtualScrollerProp('contentStyle');
-    },
-    expandedRowId: function expandedRowId() {
-      return UniqueComponentId();
+      return null;
     },
-    nameAttributeSelector: function nameAttributeSelector() {
-      return UniqueComponentId();
+    bodyStyle: function bodyStyle() {
+      return this.getVirtualScrollerProp('contentStyle');
     },
     ptmTBodyOptions: function ptmTBodyOptions() {
-      var _this$$parentInstance4;
+      var _this$$parentInstance;
       return {
         context: {
-          scrollable: (_this$$parentInstance4 = this.$parentInstance) === null || _this$$parentInstance4 === void 0 || (_this$$parentInstance4 = _this$$parentInstance4.$parentInstance) === null || _this$$parentInstance4 === void 0 ? void 0 : _this$$parentInstance4.scrollable
+          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: {
-    DTBodyCell: script$8,
-    ChevronDownIcon: ChevronDownIcon,
-    ChevronRightIcon: ChevronRightIcon
+    DTBodyRow: script$8
   }
 };
 
-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(obj, key, value) { key = _toPropertyKey$8(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$8(arg) { var key = _toPrimitive$8(arg, "string"); return _typeof$8(key) === "symbol" ? key : String(key); }
-function _toPrimitive$8(input, hint) { if (_typeof$8(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$8(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var _hoisted_1$4 = ["colspan"];
-var _hoisted_2$1 = ["onClick"];
-var _hoisted_3$1 = ["tabindex", "aria-selected", "onClick", "onDblclick", "onContextmenu", "onKeydown", "onDragstart", "onDragover", "data-p-selectable-row", "data-p-highlight", "data-p-highlight-contextmenu"];
-var _hoisted_4 = ["id"];
-var _hoisted_5 = ["colspan"];
-var _hoisted_6 = ["colspan"];
-var _hoisted_7 = ["colspan"];
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_ChevronDownIcon = resolveComponent("ChevronDownIcon");
-  var _component_ChevronRightIcon = resolveComponent("ChevronRightIcon");
-  var _component_DTBodyCell = resolveComponent("DTBodyCell");
+  var _component_DTBodyRow = resolveComponent("DTBodyRow");
   return openBlock(), createElementBlock("tbody", mergeProps({
     ref: $options.bodyRef,
     "class": _ctx.cx('tbody'),
@@ -1699,165 +2019,119 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     style: $options.bodyStyle
   }, _ctx.ptm('tbody', $options.ptmTBodyOptions)), [!$props.empty ? (openBlock(true), createElementBlock(Fragment, {
     key: 0
-  }, renderList($props.value, function (rowData, index) {
-    return openBlock(), createElementBlock(Fragment, null, [$props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader($props.value, rowData, $options.getRowIndex(index)) ? (openBlock(), createElementBlock("tr", mergeProps({
-      key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subheader',
-      "class": _ctx.cx('rowGroupHeader'),
-      style: $options.rowGroupHeaderStyle,
-      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({
-      key: 0,
-      "class": _ctx.cx('rowGroupToggler'),
-      onClick: function onClick($event) {
-        return $options.onRowGroupToggle($event, rowData);
-      },
-      type: "button"
-    }, _ctx.ptm('rowGroupToggler')), [$props.templates['rowgrouptogglericon'] ? (openBlock(), createBlock(resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
-      key: 0,
-      expanded: $options.isRowGroupExpanded(rowData)
-    }, null, 8, ["expanded"])) : (openBlock(), createElementBlock(Fragment, {
-      key: 1
-    }, [$options.isRowGroupExpanded(rowData) && $props.expandedRowIcon ? (openBlock(), createElementBlock("span", mergeProps({
-      key: 0,
-      "class": [_ctx.cx('rowGroupTogglerIcon'), $props.expandedRowIcon]
-    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : $options.isRowGroupExpanded(rowData) && !$props.expandedRowIcon ? (openBlock(), createBlock(_component_ChevronDownIcon, mergeProps({
-      key: 1,
-      "class": _ctx.cx('rowGroupTogglerIcon')
-    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : !$options.isRowGroupExpanded(rowData) && $props.collapsedRowIcon ? (openBlock(), createElementBlock("span", mergeProps({
-      key: 2,
-      "class": [_ctx.cx('rowGroupTogglerIcon'), $props.collapsedRowIcon]
-    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : !$options.isRowGroupExpanded(rowData) && !$props.collapsedRowIcon ? (openBlock(), createBlock(_component_ChevronRightIcon, mergeProps({
-      key: 3,
-      "class": _ctx.cx('rowGroupTogglerIcon')
-    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : createCommentVNode("", true)], 64))], 16, _hoisted_2$1)) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupheader']), {
-      data: rowData,
-      index: $options.getRowIndex(index)
-    }, null, 8, ["data", "index"]))], 16, _hoisted_1$4)], 16)) : createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData) : true) ? (openBlock(), createElementBlock("tr", mergeProps({
-      key: $options.getRowKey(rowData, $options.getRowIndex(index)),
-      "class": $options.getRowClass(rowData),
-      style: $options.getRowStyle(rowData),
-      tabindex: $options.setRowTabindex(index),
-      role: "row",
-      "aria-selected": $props.selectionMode ? $options.isSelected(rowData) : null,
-      onClick: function onClick($event) {
-        return $options.onRowClick($event, rowData, $options.getRowIndex(index));
-      },
-      onDblclick: function onDblclick($event) {
-        return $options.onRowDblClick($event, rowData, $options.getRowIndex(index));
-      },
-      onContextmenu: function onContextmenu($event) {
-        return $options.onRowRightClick($event, rowData, $options.getRowIndex(index));
-      },
-      onTouchend: _cache[9] || (_cache[9] = function ($event) {
-        return $options.onRowTouchEnd($event);
+  }, renderList($props.value, function (rowData, rowIndex) {
+    return openBlock(), createBlock(_component_DTBodyRow, {
+      key: rowIndex,
+      rowData: rowData,
+      index: rowIndex,
+      value: $props.value,
+      columns: $props.columns,
+      frozenRow: $props.frozenRow,
+      empty: $props.empty,
+      first: $props.first,
+      dataKey: $props.dataKey,
+      selection: $props.selection,
+      selectionKeys: $props.selectionKeys,
+      selectionMode: $props.selectionMode,
+      contextMenu: $props.contextMenu,
+      contextMenuSelection: $props.contextMenuSelection,
+      rowGroupMode: $props.rowGroupMode,
+      groupRowsBy: $props.groupRowsBy,
+      expandableRowGroups: $props.expandableRowGroups,
+      rowClass: $props.rowClass,
+      rowStyle: $props.rowStyle,
+      editMode: $props.editMode,
+      compareSelectionBy: $props.compareSelectionBy,
+      scrollable: $props.scrollable,
+      expandedRowIcon: $props.expandedRowIcon,
+      collapsedRowIcon: $props.collapsedRowIcon,
+      expandedRows: $props.expandedRows,
+      expandedRowGroups: $props.expandedRowGroups,
+      editingRows: $props.editingRows,
+      editingRowKeys: $props.editingRowKeys,
+      templates: $props.templates,
+      responsiveLayout: $props.responsiveLayout,
+      virtualScrollerContentProps: $props.virtualScrollerContentProps,
+      isVirtualScrollerDisabled: $props.isVirtualScrollerDisabled,
+      editingMeta: $props.editingMeta,
+      rowGroupHeaderStyle: $options.rowGroupHeaderStyle,
+      expandedRowId: $options.expandedRowId,
+      nameAttributeSelector: $options.nameAttributeSelector,
+      onRowgroupToggle: _cache[0] || (_cache[0] = function ($event) {
+        return _ctx.$emit('rowgroup-toggle', $event);
       }),
-      onKeydown: withModifiers(function ($event) {
-        return $options.onRowKeyDown($event, rowData, $options.getRowIndex(index));
-      }, ["self"]),
-      onMousedown: _cache[10] || (_cache[10] = function ($event) {
-        return $options.onRowMouseDown($event);
+      onRowClick: _cache[1] || (_cache[1] = function ($event) {
+        return _ctx.$emit('row-click', $event);
       }),
-      onDragstart: function onDragstart($event) {
-        return $options.onRowDragStart($event, $options.getRowIndex(index));
-      },
-      onDragover: function onDragover($event) {
-        return $options.onRowDragOver($event, $options.getRowIndex(index));
-      },
-      onDragleave: _cache[11] || (_cache[11] = function ($event) {
-        return $options.onRowDragLeave($event);
+      onRowDblclick: _cache[2] || (_cache[2] = function ($event) {
+        return _ctx.$emit('row-dblclick', $event);
       }),
-      onDragend: _cache[12] || (_cache[12] = function ($event) {
-        return $options.onRowDragEnd($event);
+      onRowRightclick: _cache[3] || (_cache[3] = function ($event) {
+        return _ctx.$emit('row-rightclick', $event);
       }),
-      onDrop: _cache[13] || (_cache[13] = function ($event) {
-        return $options.onRowDrop($event);
-      })
-    }, $options.getBodyRowPTOptions('bodyRow', rowData, index), {
-      "data-p-selectable-row": $props.selectionMode ? true : false,
-      "data-p-highlight": $props.selection && $options.isSelected(rowData),
-      "data-p-highlight-contextmenu": $props.contextMenuSelection && $options.isSelectedWithContextMenu(rowData)
-    }), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, function (col, i) {
-      return openBlock(), createElementBlock(Fragment, null, [$options.shouldRenderBodyCell($props.value, col, $options.getRowIndex(index)) ? (openBlock(), createBlock(_component_DTBodyCell, {
-        key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i,
-        rowData: rowData,
-        column: col,
-        rowIndex: $options.getRowIndex(index),
-        index: i,
-        selected: $options.isSelected(rowData),
-        frozenRow: $props.frozenRow,
-        rowspan: $props.rowGroupMode === 'rowspan' ? $options.calculateRowGroupSize($props.value, col, $options.getRowIndex(index)) : null,
-        editMode: $props.editMode,
-        editing: $props.editMode === 'row' && $options.isRowEditing(rowData),
-        editingMeta: $props.editingMeta,
-        responsiveLayout: $props.responsiveLayout,
-        virtualScrollerContentProps: $props.virtualScrollerContentProps,
-        ariaControls: $options.expandedRowId + '_' + index + '_expansion',
-        name: $options.nameAttributeSelector,
-        isRowExpanded: $options.isRowExpanded(rowData),
-        expandedRowIcon: $props.expandedRowIcon,
-        collapsedRowIcon: $props.collapsedRowIcon,
-        onRadioChange: _cache[0] || (_cache[0] = function ($event) {
-          return $options.onRadioChange($event);
-        }),
-        onCheckboxChange: _cache[1] || (_cache[1] = function ($event) {
-          return $options.onCheckboxChange($event);
-        }),
-        onRowToggle: _cache[2] || (_cache[2] = function ($event) {
-          return $options.onRowToggle($event);
-        }),
-        onCellEditInit: _cache[3] || (_cache[3] = function ($event) {
-          return $options.onCellEditInit($event);
-        }),
-        onCellEditComplete: _cache[4] || (_cache[4] = function ($event) {
-          return $options.onCellEditComplete($event);
-        }),
-        onCellEditCancel: _cache[5] || (_cache[5] = function ($event) {
-          return $options.onCellEditCancel($event);
-        }),
-        onRowEditInit: _cache[6] || (_cache[6] = function ($event) {
-          return $options.onRowEditInit($event);
-        }),
-        onRowEditSave: _cache[7] || (_cache[7] = function ($event) {
-          return $options.onRowEditSave($event);
-        }),
-        onRowEditCancel: _cache[8] || (_cache[8] = function ($event) {
-          return $options.onRowEditCancel($event);
-        }),
-        onEditingMetaChange: $options.onEditingMetaChange,
-        unstyled: _ctx.unstyled,
-        pt: _ctx.pt
-      }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "frozenRow", "rowspan", "editMode", "editing", "editingMeta", "responsiveLayout", "virtualScrollerContentProps", "ariaControls", "name", "isRowExpanded", "expandedRowIcon", "collapsedRowIcon", "onEditingMetaChange", "unstyled", "pt"])) : createCommentVNode("", true)], 64);
-    }), 256))], 16, _hoisted_3$1)) : createCommentVNode("", true), $props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData) ? (openBlock(), createElementBlock("tr", mergeProps({
-      key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_expansion',
-      id: $options.expandedRowId + '_' + index + '_expansion',
-      "class": _ctx.cx('rowExpansion'),
-      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']), {
-      data: rowData,
-      index: $options.getRowIndex(index)
-    }, null, 8, ["data", "index"]))], 16, _hoisted_5)], 16, _hoisted_4)) : createCommentVNode("", true), $props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)) ? (openBlock(), createElementBlock("tr", mergeProps({
-      key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subfooter',
-      "class": _ctx.cx('rowGroupFooter'),
-      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']), {
-      data: rowData,
-      index: $options.getRowIndex(index)
-    }, null, 8, ["data", "index"]))], 16, _hoisted_6)], 16)) : createCommentVNode("", true)], 64);
-  }), 256)) : (openBlock(), createElementBlock("tr", mergeProps({
+      onRowTouchend: _cache[4] || (_cache[4] = function ($event) {
+        return _ctx.$emit('row-touchend', $event);
+      }),
+      onRowKeydown: _cache[5] || (_cache[5] = function ($event) {
+        return _ctx.$emit('row-keydown', $event);
+      }),
+      onRowMousedown: _cache[6] || (_cache[6] = function ($event) {
+        return _ctx.$emit('row-mousedown', $event);
+      }),
+      onRowDragstart: _cache[7] || (_cache[7] = function ($event) {
+        return _ctx.$emit('row-dragstart', $event);
+      }),
+      onRowDragover: _cache[8] || (_cache[8] = function ($event) {
+        return _ctx.$emit('row-dragover', $event);
+      }),
+      onRowDragleave: _cache[9] || (_cache[9] = function ($event) {
+        return _ctx.$emit('row-dragleave', $event);
+      }),
+      onRowDragend: _cache[10] || (_cache[10] = function ($event) {
+        return _ctx.$emit('row-dragend', $event);
+      }),
+      onRowDrop: _cache[11] || (_cache[11] = function ($event) {
+        return _ctx.$emit('row-drop', $event);
+      }),
+      onRowToggle: _cache[12] || (_cache[12] = function ($event) {
+        return _ctx.$emit('row-toggle', $event);
+      }),
+      onRadioChange: _cache[13] || (_cache[13] = function ($event) {
+        return _ctx.$emit('radio-change', $event);
+      }),
+      onCheckboxChange: _cache[14] || (_cache[14] = function ($event) {
+        return _ctx.$emit('checkbox-change', $event);
+      }),
+      onCellEditInit: _cache[15] || (_cache[15] = function ($event) {
+        return _ctx.$emit('cell-edit-init', $event);
+      }),
+      onCellEditComplete: _cache[16] || (_cache[16] = function ($event) {
+        return _ctx.$emit('cell-edit-complete', $event);
+      }),
+      onCellEditCancel: _cache[17] || (_cache[17] = function ($event) {
+        return _ctx.$emit('cell-edit-cancel', $event);
+      }),
+      onRowEditInit: _cache[18] || (_cache[18] = function ($event) {
+        return _ctx.$emit('row-edit-init', $event);
+      }),
+      onRowEditSave: _cache[19] || (_cache[19] = function ($event) {
+        return _ctx.$emit('row-edit-save', $event);
+      }),
+      onRowEditCancel: _cache[20] || (_cache[20] = function ($event) {
+        return _ctx.$emit('row-edit-cancel', $event);
+      }),
+      onEditingMetaChange: _cache[21] || (_cache[21] = function ($event) {
+        return _ctx.$emit('editing-meta-change', $event);
+      }),
+      unstyled: _ctx.unstyled,
+      pt: _ctx.pt
+    }, null, 8, ["rowData", "index", "value", "columns", "frozenRow", "empty", "first", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "virtualScrollerContentProps", "isVirtualScrollerDisabled", "editingMeta", "rowGroupHeaderStyle", "expandedRowId", "nameAttributeSelector", "unstyled", "pt"]);
+  }), 128)) : (openBlock(), createBlock(_component_DTBodyRow, {
     key: 1,
-    "class": _ctx.cx('emptyMessage'),
-    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), {
-    key: 0
-  })) : createCommentVNode("", true)], 16, _hoisted_7)], 16))], 16);
+    empty: $props.empty,
+    columns: $props.columns,
+    templates: $props.templates
+  }, null, 8, ["empty", "columns", "templates"]))], 16);
 }
 
 script$7.render = render$7;
@@ -1954,8 +2228,8 @@ function _typeof$7(o) { "@babel/helpers - typeof"; return _typeof$7 = "function"
 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(obj, key, value) { key = _toPropertyKey$7(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$7(arg) { var key = _toPrimitive$7(arg, "string"); return _typeof$7(key) === "symbol" ? key : String(key); }
-function _toPrimitive$7(input, hint) { if (_typeof$7(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$7(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey$7(t) { var i = _toPrimitive$7(t, "string"); return "symbol" == _typeof$7(i) ? i : String(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$3 = ["colspan", "rowspan", "data-p-frozen-column"];
 function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("td", mergeProps({
@@ -1974,13 +2248,9 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
 
 script$6.render = render$6;
 
-function _toConsumableArray$2(arr) { return _arrayWithoutHoles$2(arr) || _iterableToArray$2(arr) || _unsupportedIterableToArray$2(arr) || _nonIterableSpread$2(); }
-function _nonIterableSpread$2() { 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 _iterableToArray$2(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles$2(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$2(arr); }
-function _createForOfIteratorHelper$2(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); }
-function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
+function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var script$5 = {
   name: 'TableFooter',
   hostName: 'DataTable',
@@ -1995,6 +2265,26 @@ var script$5 = {
       "default": null
     }
   },
+  provide: function provide() {
+    return {
+      $rows: this.d_footerRows,
+      $columns: this.d_footerColumns
+    };
+  },
+  data: function data() {
+    return {
+      d_footerRows: new HelperSet({
+        type: 'Row'
+      }),
+      d_footerColumns: new HelperSet({
+        type: 'Column'
+      })
+    };
+  },
+  beforeUnmount: function beforeUnmount() {
+    this.d_footerRows.clear();
+    this.d_footerColumns.clear();
+  },
   methods: {
     columnProp: function columnProp(col, prop) {
       return ObjectUtils.getVNodeProp(col, prop);
@@ -2039,36 +2329,12 @@ var script$5 = {
       return row.props && row.props.pt ? row.props.pt : undefined; //@todo
     },
     getFooterRows: function getFooterRows() {
-      var rows = [];
-      var columnGroup = this.columnGroup;
-      if (columnGroup.children && columnGroup.children["default"]) {
-        var _iterator = _createForOfIteratorHelper$2(columnGroup.children["default"]()),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var child = _step.value;
-            if (child.type.name === 'Row') {
-              rows.push(child);
-            } else if (child.children && child.children instanceof Array) {
-              rows = child.children;
-            }
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
-        return rows;
-      }
+      var _this$d_footerRows;
+      return (_this$d_footerRows = this.d_footerRows) === null || _this$d_footerRows === void 0 ? void 0 : _this$d_footerRows.get(this.columnGroup, this.columnGroup.children);
     },
     getFooterColumns: function getFooterColumns(row) {
-      var cols = [];
-      if (row.children && row.children["default"]) {
-        row.children["default"]().forEach(function (child) {
-          if (child.children && child.children instanceof Array) cols = [].concat(_toConsumableArray$2(cols), _toConsumableArray$2(child.children));else if (child.type.name === 'Column') cols.push(child);
-        });
-        return cols;
-      }
+      var _this$d_footerColumns;
+      return (_this$d_footerColumns = this.d_footerColumns) === null || _this$d_footerColumns === void 0 ? void 0 : _this$d_footerColumns.get(row, row.children);
     }
   },
   computed: {
@@ -2077,20 +2343,20 @@ var script$5 = {
       if (this.columnGroup) {
         hasFooter = true;
       } else if (this.columns) {
-        var _iterator2 = _createForOfIteratorHelper$2(this.columns),
-          _step2;
+        var _iterator = _createForOfIteratorHelper$1(this.columns),
+          _step;
         try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            var col = _step2.value;
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var col = _step.value;
             if (this.columnProp(col, 'footer') || col.children && col.children.footer) {
               hasFooter = true;
               break;
             }
           }
         } catch (err) {
-          _iterator2.e(err);
+          _iterator.e(err);
         } finally {
-          _iterator2.f();
+          _iterator.f();
         }
       }
       return hasFooter;
@@ -2113,8 +2379,8 @@ function _typeof$6(o) { "@babel/helpers - typeof"; return _typeof$6 = "function"
 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(obj, key, value) { key = _toPropertyKey$6(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$6(arg) { var key = _toPrimitive$6(arg, "string"); return _typeof$6(key) === "symbol" ? key : String(key); }
-function _toPrimitive$6(input, hint) { if (_typeof$6(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$6(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey$6(t) { var i = _toPrimitive$6(t, "string"); return "symbol" == _typeof$6(i) ? i : String(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) {
   var _component_DTFooterCell = resolveComponent("DTFooterCell");
   return $options.hasFooter ? (openBlock(), createElementBlock("tfoot", mergeProps({
@@ -2160,8 +2426,8 @@ function _typeof$5(o) { "@babel/helpers - typeof"; return _typeof$5 = "function"
 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(obj, key, value) { key = _toPropertyKey$5(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$5(arg) { var key = _toPrimitive$5(arg, "string"); return _typeof$5(key) === "symbol" ? key : String(key); }
-function _toPrimitive$5(input, hint) { if (_typeof$5(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$5(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey$5(t) { var i = _toPrimitive$5(t, "string"); return "symbol" == _typeof$5(i) ? i : String(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 = {
   name: 'ColumnFilter',
   hostName: 'DataTable',
@@ -2380,6 +2646,7 @@ var script$4 = {
     onToggleButtonKeyDown: function onToggleButtonKeyDown(event) {
       switch (event.code) {
         case 'Enter':
+        case 'NumpadEnter':
         case 'Space':
           this.toggleMenu(event);
           break;
@@ -2701,8 +2968,8 @@ function _typeof$4(o) { "@babel/helpers - typeof"; return _typeof$4 = "function"
 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(obj, key, value) { key = _toPropertyKey$4(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$4(arg) { var key = _toPrimitive$4(arg, "string"); return _typeof$4(key) === "symbol" ? key : String(key); }
-function _toPrimitive$4(input, hint) { if (_typeof$4(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$4(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey$4(t) { var i = _toPrimitive$4(t, "string"); return "symbol" == _typeof$4(i) ? i : String(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$2 = ["aria-label", "aria-expanded", "aria-controls"];
 var _hoisted_2 = ["id", "aria-modal"];
 var _hoisted_3 = ["onClick", "onKeydown", "tabindex"];
@@ -3181,7 +3448,7 @@ var script$2 = {
       });
     },
     onKeyDown: function onKeyDown(event) {
-      if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
+      if ((event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
         this.$emit('column-click', {
           originalEvent: event,
           column: this.column
@@ -3196,16 +3463,28 @@ var script$2 = {
       });
     },
     onDragStart: function onDragStart(event) {
-      this.$emit('column-dragstart', event);
+      this.$emit('column-dragstart', {
+        originalEvent: event,
+        column: this.column
+      });
     },
     onDragOver: function onDragOver(event) {
-      this.$emit('column-dragover', event);
+      this.$emit('column-dragover', {
+        originalEvent: event,
+        column: this.column
+      });
     },
     onDragLeave: function onDragLeave(event) {
-      this.$emit('column-dragleave', event);
+      this.$emit('column-dragleave', {
+        originalEvent: event,
+        column: this.column
+      });
     },
     onDrop: function onDrop(event) {
-      this.$emit('column-drop', event);
+      this.$emit('column-drop', {
+        originalEvent: event,
+        column: this.column
+      });
     },
     onResizeStart: function onResizeStart(event) {
       this.$emit('column-resizestart', event);
@@ -3247,8 +3526,10 @@ var script$2 = {
         var filterRow = this.$el.parentElement.nextElementSibling;
         if (filterRow) {
           var index = DomHandler.index(this.$el);
-          filterRow.children[index].style.left = this.styleObject.left;
-          filterRow.children[index].style.right = this.styleObject.right;
+          if (filterRow.children[index]) {
+            filterRow.children[index].style.left = this.styleObject.left;
+            filterRow.children[index].style.right = this.styleObject.right;
+          }
         }
       }
     },
@@ -3314,8 +3595,8 @@ function _typeof$3(o) { "@babel/helpers - typeof"; return _typeof$3 = "function"
 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(obj, key, value) { key = _toPropertyKey$3(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$3(arg) { var key = _toPrimitive$3(arg, "string"); return _typeof$3(key) === "symbol" ? key : String(key); }
-function _toPrimitive$3(input, hint) { if (_typeof$3(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$3(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey$3(t) { var i = _toPrimitive$3(t, "string"); return "symbol" == _typeof$3(i) ? i : String(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); }
 var _hoisted_1 = ["tabindex", "colspan", "rowspan", "aria-sort", "data-p-sortable-column", "data-p-resizable-column", "data-p-highlight", "data-p-filter-column", "data-p-frozen-column", "data-p-reorderable-column"];
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_DTHeaderCheckbox = resolveComponent("DTHeaderCheckbox");
@@ -3445,13 +3726,6 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
 
 script$2.render = render$2;
 
-function _toConsumableArray$1(arr) { return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread$1(); }
-function _nonIterableSpread$1() { 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 _iterableToArray$1(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles$1(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
-function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
-function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var script$1 = {
   name: 'TableHeader',
   hostName: 'DataTable',
@@ -3527,6 +3801,26 @@ var script$1 = {
       "default": null
     }
   },
+  provide: function provide() {
+    return {
+      $rows: this.d_headerRows,
+      $columns: this.d_headerColumns
+    };
+  },
+  data: function data() {
+    return {
+      d_headerRows: new HelperSet({
+        type: 'Row'
+      }),
+      d_headerColumns: new HelperSet({
+        type: 'Column'
+      })
+    };
+  },
+  beforeUnmount: function beforeUnmount() {
+    this.d_headerRows.clear();
+    this.d_headerColumns.clear();
+  },
   methods: {
     columnProp: function columnProp(col, prop) {
       return ObjectUtils.getVNodeProp(col, prop);
@@ -3599,36 +3893,12 @@ var script$1 = {
       return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];
     },
     getHeaderRows: function getHeaderRows() {
-      var rows = [];
-      var columnGroup = this.columnGroup;
-      if (columnGroup.children && columnGroup.children["default"]) {
-        var _iterator = _createForOfIteratorHelper$1(columnGroup.children["default"]()),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var child = _step.value;
-            if (child.type.name === 'Row') {
-              rows.push(child);
-            } else if (child.children && child.children instanceof Array) {
-              rows = child.children;
-            }
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
-        return rows;
-      }
+      var _this$d_headerRows;
+      return (_this$d_headerRows = this.d_headerRows) === null || _this$d_headerRows === void 0 ? void 0 : _this$d_headerRows.get(this.columnGroup, this.columnGroup.children);
     },
     getHeaderColumns: function getHeaderColumns(row) {
-      var cols = [];
-      if (row.children && row.children["default"]) {
-        row.children["default"]().forEach(function (child) {
-          if (child.children && child.children instanceof Array) cols = [].concat(_toConsumableArray$1(cols), _toConsumableArray$1(child.children));else if (child.type.name === 'Column') cols.push(child);
-        });
-        return cols;
-      }
+      var _this$d_headerColumns;
+      return (_this$d_headerColumns = this.d_headerColumns) === null || _this$d_headerColumns === void 0 ? void 0 : _this$d_headerColumns.get(row, row.children);
     }
   },
   computed: {
@@ -3652,8 +3922,8 @@ function _typeof$2(o) { "@babel/helpers - typeof"; return _typeof$2 = "function"
 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(obj, key, value) { key = _toPropertyKey$2(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$2(arg) { var key = _toPrimitive$2(arg, "string"); return _typeof$2(key) === "symbol" ? key : String(key); }
-function _toPrimitive$2(input, hint) { if (_typeof$2(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$2(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey$2(t) { var i = _toPrimitive$2(t, "string"); return "symbol" == _typeof$2(i) ? i : String(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 render$1(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_DTHeaderCell = resolveComponent("DTHeaderCell");
   var _component_DTHeaderCheckbox = resolveComponent("DTHeaderCheckbox");
@@ -3869,11 +4139,14 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 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(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 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(obj, key, value) { key = _toPropertyKey$1(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$1(arg) { var key = _toPrimitive$1(arg, "string"); return _typeof$1(key) === "symbol" ? key : String(key); }
-function _toPrimitive$1(input, hint) { if (_typeof$1(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$1(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : String(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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArrayLimit(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) { if (Object(t) !== t) return; f = !1; } 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; } }
@@ -3887,8 +4160,14 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var script = {
   name: 'DataTable',
-  "extends": script$b,
+  "extends": script$c,
   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() {
+    return {
+      $columns: this.d_columns,
+      $columnGroups: this.d_columnGroups
+    };
+  },
   data: function data() {
     return {
       d_first: this.first,
@@ -3899,11 +4178,16 @@ var script = {
       d_multiSortMeta: this.multiSortMeta ? _toConsumableArray(this.multiSortMeta) : [],
       d_groupRowsSortMeta: null,
       d_selectionKeys: null,
-      d_expandedRowKeys: null,
       d_columnOrder: null,
       d_editingRowKeys: null,
       d_editingMeta: {},
-      d_filters: this.cloneFilters(this.filters)
+      d_filters: this.cloneFilters(this.filters),
+      d_columns: new HelperSet({
+        type: 'Column'
+      }),
+      d_columnGroups: new HelperSet({
+        type: 'ColumnGroup'
+      })
     };
   },
   rowTouched: false,
@@ -3917,6 +4201,7 @@ var script = {
   colReorderIconWidth: null,
   colReorderIconHeight: null,
   draggedColumn: null,
+  draggedColumnElement: null,
   draggedRowIndex: null,
   droppedRowIndex: null,
   rowDragging: null,
@@ -3950,11 +4235,6 @@ var script = {
         }
       }
     },
-    expandedRows: function expandedRows(newValue) {
-      if (this.dataKey) {
-        this.updateExpandedRowKeys(newValue);
-      }
-    },
     editingRows: {
       immediate: true,
       handler: function handler(newValue) {
@@ -3987,6 +4267,8 @@ var script = {
     this.unbindColumnResizeEvents();
     this.destroyStyleElement();
     this.destroyResponsiveStyle();
+    this.d_columns.clear();
+    this.d_columnGroups.clear();
   },
   updated: function updated() {
     if (this.isStateful()) {
@@ -4001,6 +4283,7 @@ var script = {
       return ObjectUtils.getVNodeProp(col, prop);
     },
     onPage: function onPage(event) {
+      var _this = this;
       this.clearEditingMetaData();
       this.d_first = event.first;
       this.d_rows = event.rows;
@@ -4010,15 +4293,18 @@ var script = {
       this.$emit('update:first', this.d_first);
       this.$emit('update:rows', this.d_rows);
       this.$emit('page', pageEvent);
-      this.$emit('value-change', this.processedData);
+      this.$nextTick(function () {
+        _this.$emit('value-change', _this.processedData);
+      });
     },
     onColumnHeaderClick: function onColumnHeaderClick(e) {
+      var _this2 = this;
       var event = e.originalEvent;
       var column = e.column;
       if (this.columnProp(column, 'sortable')) {
         var targetNode = event.target;
         var columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
-        if (DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' || targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]')) {
+        if (DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' || targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]') && !DomHandler.isClickable(event.target)) {
           DomHandler.clearSelection();
           if (this.sortMode === 'single') {
             if (this.d_sortField === columnField) {
@@ -4046,12 +4332,14 @@ var script = {
             this.$emit('update:multiSortMeta', this.d_multiSortMeta);
           }
           this.$emit('sort', this.createLazyLoadEvent(event));
-          this.$emit('value-change', this.processedData);
+          this.$nextTick(function () {
+            _this2.$emit('value-change', _this2.processedData);
+          });
         }
       }
     },
     sortSingle: function sortSingle(value) {
-      var _this = this;
+      var _this3 = this;
       this.clearEditingMetaData();
       if (this.groupRowsBy && this.groupRowsBy === this.sortField) {
         this.d_multiSortMeta = [{
@@ -4081,12 +4369,12 @@ var script = {
       data.sort(function (data1, data2) {
         var value1 = resolvedFieldData.get(data1);
         var value2 = resolvedFieldData.get(data2);
-        return ObjectUtils.sort(value1, value2, _this.d_sortOrder, comparer, _this.d_nullSortOrder);
+        return ObjectUtils.sort(value1, value2, _this3.d_sortOrder, comparer, _this3.d_nullSortOrder);
       });
       return data;
     },
     sortMultiple: function sortMultiple(value) {
-      var _this2 = this;
+      var _this4 = this;
       this.clearEditingMetaData();
       if (this.groupRowsBy && (this.d_groupRowsSortMeta || this.d_multiSortMeta.length && this.groupRowsBy === this.d_multiSortMeta[0].field)) {
         var firstSortMeta = this.d_multiSortMeta[0];
@@ -4097,7 +4385,7 @@ var script = {
       }
       var data = _toConsumableArray(value);
       data.sort(function (data1, data2) {
-        return _this2.multisortField(data1, data2, 0);
+        return _this4.multisortField(data1, data2, 0);
       });
       return data;
     },
@@ -4153,7 +4441,7 @@ var script = {
       return Object.fromEntries(entries);
     },
     filter: function filter(data) {
-      var _this3 = this;
+      var _this5 = this;
       if (!data) {
         return;
       }
@@ -4162,7 +4450,7 @@ var script = {
       var globalFilterFieldsArray;
       if (activeFilters['global']) {
         globalFilterFieldsArray = this.globalFilterFields || this.columns.map(function (col) {
-          return _this3.columnProp(col, 'filterField') || _this3.columnProp(col, 'field');
+          return _this5.columnProp(col, 'filterField') || _this5.columnProp(col, 'field');
         });
       }
       var filteredValue = [];
@@ -4224,7 +4512,9 @@ var script = {
       var filterEvent = this.createLazyLoadEvent();
       filterEvent.filteredValue = filteredValue;
       this.$emit('filter', filterEvent);
-      this.$emit('value-change', filteredValue);
+      this.$nextTick(function () {
+        _this5.$emit('value-change', _this5.processedData);
+      });
       return filteredValue;
     },
     executeLocalFilter: function executeLocalFilter(field, rowData, filterMeta) {
@@ -4380,6 +4670,7 @@ var script = {
             this.onEndKey(event, row, rowIndex, slotProps);
             break;
           case 'Enter':
+          case 'NumpadEnter':
             this.onEnterKey(event, rowData, rowIndex);
             break;
           case 'Space':
@@ -4630,40 +4921,21 @@ var script = {
         this.d_selectionKeys[String(ObjectUtils.resolveFieldData(selection, this.dataKey))] = 1;
       }
     },
-    updateExpandedRowKeys: function updateExpandedRowKeys(expandedRows) {
-      if (expandedRows && expandedRows.length) {
-        this.d_expandedRowKeys = {};
-        var _iterator4 = _createForOfIteratorHelper(expandedRows),
+    updateEditingRowKeys: function updateEditingRowKeys(editingRows) {
+      if (editingRows && editingRows.length) {
+        this.d_editingRowKeys = {};
+        var _iterator4 = _createForOfIteratorHelper(editingRows),
           _step4;
         try {
           for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
             var data = _step4.value;
-            this.d_expandedRowKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
+            this.d_editingRowKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
           }
         } catch (err) {
           _iterator4.e(err);
         } finally {
           _iterator4.f();
         }
-      } else {
-        this.d_expandedRowKeys = null;
-      }
-    },
-    updateEditingRowKeys: function updateEditingRowKeys(editingRows) {
-      if (editingRows && editingRows.length) {
-        this.d_editingRowKeys = {};
-        var _iterator5 = _createForOfIteratorHelper(editingRows),
-          _step5;
-        try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            var data = _step5.value;
-            this.d_editingRowKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
-          }
-        } catch (err) {
-          _iterator5.e(err);
-        } finally {
-          _iterator5.f();
-        }
       } else {
         this.d_editingRowKeys = null;
       }
@@ -4701,7 +4973,7 @@ var script = {
       this.$emit('update:selection', _selection);
     },
     exportCSV: function exportCSV(options, data) {
-      var _this4 = this;
+      var _this6 = this;
       var csv = "\uFEFF";
       if (!data) {
         data = this.processedData;
@@ -4723,16 +4995,16 @@ var script = {
         data.forEach(function (record) {
           csv += '\n';
           var rowInitiated = false;
-          for (var _i = 0; _i < _this4.columns.length; _i++) {
-            var _column = _this4.columns[_i];
-            if (_this4.columnProp(_column, 'exportable') !== false && _this4.columnProp(_column, 'field')) {
-              if (rowInitiated) csv += _this4.csvSeparator;else rowInitiated = true;
-              var cellData = ObjectUtils.resolveFieldData(record, _this4.columnProp(_column, 'field'));
+          for (var _i = 0; _i < _this6.columns.length; _i++) {
+            var _column = _this6.columns[_i];
+            if (_this6.columnProp(_column, 'exportable') !== false && _this6.columnProp(_column, 'field')) {
+              if (rowInitiated) csv += _this6.csvSeparator;else rowInitiated = true;
+              var cellData = ObjectUtils.resolveFieldData(record, _this6.columnProp(_column, 'field'));
               if (cellData != null) {
-                if (_this4.exportFunction) {
-                  cellData = _this4.exportFunction({
+                if (_this6.exportFunction) {
+                  cellData = _this6.exportFunction({
                     data: cellData,
-                    field: _this4.columnProp(_column, 'field')
+                    field: _this6.columnProp(_column, 'field')
                   });
                 } else cellData = String(cellData).replace(/"/g, '""');
               } else cellData = '';
@@ -4835,19 +5107,19 @@ var script = {
       this.styleElement.innerHTML = innerHTML;
     },
     bindColumnResizeEvents: function bindColumnResizeEvents() {
-      var _this5 = this;
+      var _this7 = this;
       if (!this.documentColumnResizeListener) {
         this.documentColumnResizeListener = document.addEventListener('mousemove', function () {
-          if (_this5.columnResizing) {
-            _this5.onColumnResize(event);
+          if (_this7.columnResizing) {
+            _this7.onColumnResize(event);
           }
         });
       }
       if (!this.documentColumnResizeEndListener) {
         this.documentColumnResizeEndListener = document.addEventListener('mouseup', function () {
-          if (_this5.columnResizing) {
-            _this5.columnResizing = false;
-            _this5.onColumnResizeEnd();
+          if (_this7.columnResizing) {
+            _this7.columnResizing = false;
+            _this7.onColumnResizeEnd();
           }
         });
       }
@@ -4869,23 +5141,28 @@ var script = {
         if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.getAttribute(event.target, '[data-pc-section="columnresizer"]')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true;
       }
     },
-    onColumnHeaderDragStart: function onColumnHeaderDragStart(event) {
+    onColumnHeaderDragStart: function onColumnHeaderDragStart(e) {
+      var event = e.originalEvent,
+        column = e.column;
       if (this.columnResizing) {
         event.preventDefault();
         return;
       }
       this.colReorderIconWidth = DomHandler.getHiddenElementOuterWidth(this.$refs.reorderIndicatorUp);
       this.colReorderIconHeight = DomHandler.getHiddenElementOuterHeight(this.$refs.reorderIndicatorUp);
-      this.draggedColumn = this.findParentHeader(event.target);
+      this.draggedColumn = column;
+      this.draggedColumnElement = this.findParentHeader(event.target);
       event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
     },
-    onColumnHeaderDragOver: function onColumnHeaderDragOver(event) {
+    onColumnHeaderDragOver: function onColumnHeaderDragOver(e) {
+      var event = e.originalEvent,
+        column = e.column;
       var dropHeader = this.findParentHeader(event.target);
-      if (this.reorderableColumns && this.draggedColumn && dropHeader) {
+      if (this.reorderableColumns && this.draggedColumnElement && dropHeader && !this.columnProp(column, 'frozen')) {
         event.preventDefault();
         var containerOffset = DomHandler.getOffset(this.$el);
         var dropHeaderOffset = DomHandler.getOffset(dropHeader);
-        if (this.draggedColumn !== dropHeader) {
+        if (this.draggedColumnElement !== dropHeader) {
           var targetLeft = dropHeaderOffset.left - containerOffset.left;
           var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
           this.$refs.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.colReorderIconHeight - 1) + 'px';
@@ -4904,34 +5181,67 @@ var script = {
         }
       }
     },
-    onColumnHeaderDragLeave: function onColumnHeaderDragLeave(event) {
-      if (this.reorderableColumns && this.draggedColumn) {
+    onColumnHeaderDragLeave: function onColumnHeaderDragLeave(e) {
+      var event = e.originalEvent;
+      if (this.reorderableColumns && this.draggedColumnElement) {
         event.preventDefault();
         this.$refs.reorderIndicatorUp.style.display = 'none';
         this.$refs.reorderIndicatorDown.style.display = 'none';
       }
     },
-    onColumnHeaderDrop: function onColumnHeaderDrop(event) {
+    onColumnHeaderDrop: function onColumnHeaderDrop(e) {
+      var _this8 = this;
+      var event = e.originalEvent,
+        column = e.column;
       event.preventDefault();
-      if (this.draggedColumn) {
-        var dragIndex = DomHandler.index(this.draggedColumn);
+      if (this.draggedColumnElement) {
+        var dragIndex = DomHandler.index(this.draggedColumnElement);
         var dropIndex = DomHandler.index(this.findParentHeader(event.target));
         var allowDrop = dragIndex !== dropIndex;
         if (allowDrop && (dropIndex - dragIndex === 1 && this.dropPosition === -1 || dropIndex - dragIndex === -1 && this.dropPosition === 1)) {
           allowDrop = false;
         }
         if (allowDrop) {
-          ObjectUtils.reorderArray(this.columns, dragIndex, dropIndex);
+          var isSameColumn = function isSameColumn(col1, col2) {
+            return _this8.columnProp(col1, 'columnKey') || _this8.columnProp(col2, 'columnKey') ? _this8.columnProp(col1, 'columnKey') === _this8.columnProp(col2, 'columnKey') : _this8.columnProp(col1, 'field') === _this8.columnProp(col2, 'field');
+          };
+          var dragColIndex = this.columns.findIndex(function (child) {
+            return isSameColumn(child, _this8.draggedColumn);
+          });
+          var dropColIndex = this.columns.findIndex(function (child) {
+            return isSameColumn(child, column);
+          });
+          var widths = [];
+          var headers = DomHandler.find(this.$el, 'thead[data-pc-section="thead"] > tr > th');
+          headers.forEach(function (header) {
+            return widths.push(DomHandler.getOuterWidth(header));
+          });
+          var movedItem = widths.find(function (_, index) {
+            return index === dragColIndex;
+          });
+          var remainingItems = widths.filter(function (_, index) {
+            return index !== dragColIndex;
+          });
+          var reorderedWidths = [].concat(_toConsumableArray(remainingItems.slice(0, dropColIndex)), [movedItem], _toConsumableArray(remainingItems.slice(dropColIndex)));
+          this.addColumnWidthStyles(reorderedWidths);
+          if (dropColIndex < dragColIndex && this.dropPosition === 1) {
+            dropColIndex++;
+          }
+          if (dropColIndex > dragColIndex && this.dropPosition === -1) {
+            dropColIndex--;
+          }
+          ObjectUtils.reorderArray(this.columns, dragColIndex, dropColIndex);
           this.updateReorderableColumns();
           this.$emit('column-reorder', {
             originalEvent: event,
-            dragIndex: dragIndex,
-            dropIndex: dropIndex
+            dragIndex: dragColIndex,
+            dropIndex: dropColIndex
           });
         }
         this.$refs.reorderIndicatorUp.style.display = 'none';
         this.$refs.reorderIndicatorDown.style.display = 'none';
-        this.draggedColumn.draggable = false;
+        this.draggedColumnElement.draggable = false;
+        this.draggedColumnElement = null;
         this.draggedColumn = null;
         this.dropPosition = null;
       }
@@ -5041,28 +5351,23 @@ var script = {
       event.preventDefault();
     },
     toggleRow: function toggleRow(event) {
+      var _this9 = this;
+      var expanded = event.expanded,
+        rest = _objectWithoutProperties(event, _excluded);
       var rowData = event.data;
-      var expanded;
-      var expandedRowIndex;
-      var _expandedRows = this.expandedRows ? _toConsumableArray(this.expandedRows) : [];
+      var expandedRows;
       if (this.dataKey) {
-        expanded = this.d_expandedRowKeys ? this.d_expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-      } else {
-        expandedRowIndex = this.findIndex(rowData, this.expandedRows);
-        expanded = expandedRowIndex > -1;
-      }
-      if (expanded) {
-        if (expandedRowIndex == null) {
-          expandedRowIndex = this.findIndex(rowData, this.expandedRows);
-        }
-        _expandedRows.splice(expandedRowIndex, 1);
-        this.$emit('update:expandedRows', _expandedRows);
-        this.$emit('row-collapse', event);
+        var value = ObjectUtils.resolveFieldData(rowData, this.dataKey);
+        expandedRows = this.expandedRows ? _objectSpread$1({}, this.expandedRows) : {};
+        expanded ? expandedRows[value] = true : delete expandedRows[value];
       } else {
-        _expandedRows.push(rowData);
-        this.$emit('update:expandedRows', _expandedRows);
-        this.$emit('row-expand', event);
+        expandedRows = this.expandedRows ? _toConsumableArray(this.expandedRows) : [];
+        expanded ? expandedRows.push(rowData) : expandedRows = expandedRows.filter(function (d) {
+          return !_this9.equals(rowData, d);
+        });
       }
+      this.$emit('update:expandedRows', expandedRows);
+      expanded ? this.$emit('row-expand', rest) : this.$emit('row-collapse', rest);
     },
     toggleRowGroup: function toggleRowGroup(e) {
       var event = e.originalEvent;
@@ -5132,7 +5437,6 @@ var script = {
       }
       if (this.expandedRows) {
         state.expandedRows = this.expandedRows;
-        state.expandedRowKeys = this.d_expandedRowKeys;
       }
       if (this.expandedRowGroups) {
         state.expandedRowGroups = this.expandedRowGroups;
@@ -5180,7 +5484,6 @@ var script = {
           this.d_columnOrder = restoredState.columnOrder;
         }
         if (restoredState.expandedRows) {
-          this.d_expandedRowKeys = restoredState.expandedRowKeys;
           this.$emit('update:expandedRows', restoredState.expandedRows);
         }
         if (restoredState.expandedRowGroups) {
@@ -5204,23 +5507,25 @@ var script = {
         state.tableWidth = DomHandler.getOuterWidth(this.$refs.table) + 'px';
       }
     },
+    addColumnWidthStyles: function addColumnWidthStyles(widths) {
+      this.createStyleElement();
+      var innerHTML = '';
+      var selector = "[data-pc-name=\"datatable\"][".concat(this.attributeSelector, "] > [data-pc-section=\"wrapper\"] ").concat(this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]', " > table[data-pc-section=\"table\"]");
+      widths.forEach(function (width, index) {
+        var style = "width: ".concat(width, "px !important; max-width: ").concat(width, "px !important");
+        innerHTML += "\n        ".concat(selector, " > thead[data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n        ").concat(selector, " > tbody[data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n        ").concat(selector, " > tfoot[data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n            ").concat(style, "\n        }\n    ");
+      });
+      this.styleElement.innerHTML = innerHTML;
+    },
     restoreColumnWidths: function restoreColumnWidths() {
       if (this.columnWidthsState) {
         var widths = this.columnWidthsState.split(',');
         if (this.columnResizeMode === 'expand' && this.tableWidthState) {
           this.$refs.table.style.width = this.tableWidthState;
           this.$refs.table.style.minWidth = this.tableWidthState;
-          this.$el.style.width = this.tableWidthState;
         }
         if (ObjectUtils.isNotEmpty(widths)) {
-          this.createStyleElement();
-          var innerHTML = '';
-          var selector = "[data-pc-name=\"datatable\"][".concat(this.attributeSelector, "] > [data-pc-section=\"wrapper\"] ").concat(this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]', " > table[data-pc-section=\"table\"]");
-          widths.forEach(function (width, index) {
-            var style = "width: ".concat(width, "px !important; max-width: ").concat(width, "px !important");
-            innerHTML += "\n                            ".concat(selector, " > thead[data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n                            ").concat(selector, " > tbody[data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n                            ").concat(selector, " > tfoot[data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n                                ").concat(style, "\n                            }\n                        ");
-          });
-          this.styleElement.innerHTML = innerHTML;
+          this.addColumnWidthStyles(widths);
         }
       }
     },
@@ -5291,9 +5596,6 @@ var script = {
     hasGlobalFilter: function hasGlobalFilter() {
       return this.filters && Object.prototype.hasOwnProperty.call(this.filters, 'global');
     },
-    getChildren: function getChildren() {
-      return this.$slots["default"] ? this.$slots["default"]() : null;
-    },
     onFilterChange: function onFilterChange(filters) {
       this.d_filters = filters;
     },
@@ -5323,10 +5625,10 @@ var script = {
       return cloned;
     },
     updateReorderableColumns: function updateReorderableColumns() {
-      var _this6 = this;
+      var _this10 = this;
       var columnOrder = [];
       this.columns.forEach(function (col) {
-        return columnOrder.push(_this6.columnProp(col, 'columnKey') || _this6.columnProp(col, 'field'));
+        return columnOrder.push(_this10.columnProp(col, 'columnKey') || _this10.columnProp(col, 'field'));
       });
       this.d_columnOrder = columnOrder;
     },
@@ -5347,7 +5649,7 @@ var script = {
         var tableSelector = ".p-datatable-wrapper ".concat(this.virtualScrollerDisabled ? '' : '> .p-virtualscroller', " > .p-datatable-table");
         var selector = ".p-datatable[".concat(this.attributeSelector, "] > ").concat(tableSelector);
         var gridLinesSelector = ".p-datatable[".concat(this.attributeSelector, "].p-datatable-gridlines > ").concat(tableSelector);
-        var innerHTML = "\n@media screen and (max-width: ".concat(this.breakpoint, ") {\n    ").concat(selector, " > .p-datatable-thead > tr > th,\n    ").concat(selector, " > .p-datatable-tfoot > tr > td {\n        display: none !important;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td {\n        display: flex;\n        width: 100% !important;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td:not(:last-child) {\n        border: 0 none;\n    }\n\n    ").concat(gridLinesSelector, " > .p-datatable-tbody > tr > td:last-child {\n        border-top: 0;\n        border-right: 0;\n        border-left: 0;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td > .p-column-title {\n        display: block;\n    }\n}\n");
+        var innerHTML = "\n@media screen and (max-width: ".concat(this.breakpoint, ") {\n    ").concat(selector, " > .p-datatable-thead > tr > th,\n    ").concat(selector, " > .p-datatable-tfoot > tr > td {\n        display: none;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td {\n        display: flex;\n        width: 100%;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td:not(:last-child) {\n        border: 0 none;\n    }\n\n    ").concat(gridLinesSelector, " > .p-datatable-tbody > tr > td:last-child {\n        border-top: 0;\n        border-right: 0;\n        border-left: 0;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td > .p-column-title {\n        display: block;\n    }\n}\n");
         this.responsiveStyleElement.innerHTML = innerHTML;
       }
     },
@@ -5363,22 +5665,6 @@ var script = {
         this.styleElement = null;
       }
     },
-    recursiveGetChildren: function recursiveGetChildren(children, results) {
-      var _this7 = this;
-      if (!results) {
-        results = [];
-      }
-      if (children && children.length) {
-        children.forEach(function (child) {
-          if (child.children instanceof Array) {
-            results.concat(_this7.recursiveGetChildren(child.children, results));
-          } else if (child.type.name == 'Column') {
-            results.push(child);
-          }
-        });
-      }
-      return results;
-    },
     dataToRender: function dataToRender(data) {
       var _data = data || this.processedData;
       if (_data && this.paginator) {
@@ -5396,27 +5682,23 @@ var script = {
   },
   computed: {
     columns: function columns() {
-      var children = this.getChildren();
-      if (!children) {
-        return;
-      }
-      var cols = this.recursiveGetChildren(children, []);
+      var cols = this.d_columns.get(this);
       if (this.reorderableColumns && this.d_columnOrder) {
         var orderedColumns = [];
-        var _iterator6 = _createForOfIteratorHelper(this.d_columnOrder),
-          _step6;
+        var _iterator5 = _createForOfIteratorHelper(this.d_columnOrder),
+          _step5;
         try {
-          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-            var columnKey = _step6.value;
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+            var columnKey = _step5.value;
             var column = this.findColumnByKey(cols, columnKey);
             if (column && !this.columnProp(column, 'hidden')) {
               orderedColumns.push(column);
             }
           }
         } catch (err) {
-          _iterator6.e(err);
+          _iterator5.e(err);
         } finally {
-          _iterator6.f();
+          _iterator5.f();
         }
         return [].concat(orderedColumns, _toConsumableArray(cols.filter(function (item) {
           return orderedColumns.indexOf(item) < 0;
@@ -5424,52 +5706,30 @@ var script = {
       }
       return cols;
     },
+    columnGroups: function columnGroups() {
+      return this.d_columnGroups.get(this);
+    },
     headerColumnGroup: function headerColumnGroup() {
-      var children = this.getChildren();
-      if (children) {
-        var _iterator7 = _createForOfIteratorHelper(children),
-          _step7;
-        try {
-          for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-            var child = _step7.value;
-            if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'header') {
-              return child;
-            }
-          }
-        } catch (err) {
-          _iterator7.e(err);
-        } finally {
-          _iterator7.f();
-        }
-      }
-      return null;
+      var _this$columnGroups,
+        _this11 = this;
+      return (_this$columnGroups = this.columnGroups) === null || _this$columnGroups === void 0 ? void 0 : _this$columnGroups.find(function (group) {
+        return _this11.columnProp(group, 'type') === 'header';
+      });
     },
     footerColumnGroup: function footerColumnGroup() {
-      var children = this.getChildren();
-      if (children) {
-        var _iterator8 = _createForOfIteratorHelper(children),
-          _step8;
-        try {
-          for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-            var child = _step8.value;
-            if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'footer') {
-              return child;
-            }
-          }
-        } catch (err) {
-          _iterator8.e(err);
-        } finally {
-          _iterator8.f();
-        }
-      }
-      return null;
+      var _this$columnGroups2,
+        _this12 = this;
+      return (_this$columnGroups2 = this.columnGroups) === null || _this$columnGroups2 === void 0 ? void 0 : _this$columnGroups2.find(function (group) {
+        return _this12.columnProp(group, 'type') === 'footer';
+      });
     },
     hasFilters: function hasFilters() {
       return this.filters && Object.keys(this.filters).length > 0 && this.filters.constructor === Object;
     },
     processedData: function processedData() {
+      var _this$virtualScroller;
       var data = this.value || [];
-      if (!this.lazy) {
+      if (!this.lazy && !((_this$virtualScroller = this.virtualScrollerOptions) !== null && _this$virtualScroller !== void 0 && _this$virtualScroller.lazy)) {
         if (data && data.length) {
           if (this.hasFilters) {
             data = this.filter(data);
@@ -5503,14 +5763,14 @@ var script = {
       return this.d_sortField || this.d_multiSortMeta && this.d_multiSortMeta.length > 0;
     },
     allRowsSelected: function allRowsSelected() {
-      var _this8 = this;
+      var _this13 = this;
       if (this.selectAll !== null) {
         return this.selectAll;
       } else {
         var val = this.frozenValue ? [].concat(_toConsumableArray(this.frozenValue), _toConsumableArray(this.processedData)) : this.processedData;
         return ObjectUtils.isNotEmpty(val) && this.selection && Array.isArray(this.selection) && val.every(function (v) {
-          return _this8.selection.some(function (s) {
-            return _this8.equals(s, v);
+          return _this13.selection.some(function (s) {
+            return _this13.equals(s, v);
           });
         });
       }
@@ -5541,8 +5801,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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 render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_SpinnerIcon = resolveComponent("SpinnerIcon");
   var _component_DTPaginator = resolveComponent("DTPaginator");
@@ -5750,7 +6010,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         expandedRowIcon: _ctx.expandedRowIcon,
         collapsedRowIcon: _ctx.collapsedRowIcon,
         expandedRows: _ctx.expandedRows,
-        expandedRowKeys: $data.d_expandedRowKeys,
         expandedRowGroups: _ctx.expandedRowGroups,
         editingRows: _ctx.editingRows,
         editingRowKeys: $data.d_editingRowKeys,
@@ -5816,7 +6075,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         onEditingMetaChange: $options.onEditingMetaChange,
         unstyled: _ctx.unstyled,
         pt: _ctx.pt
-      }, null, 8, ["value", "columns", "first", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange", "unstyled", "pt"])) : createCommentVNode("", true), createVNode(_component_DTTableBody, {
+      }, null, 8, ["value", "columns", "first", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange", "unstyled", "pt"])) : createCommentVNode("", true), createVNode(_component_DTTableBody, {
         ref: "bodyRef",
         value: $options.dataToRender(slotProps.rows),
         "class": normalizeClass(slotProps.styleClass),
@@ -5840,7 +6099,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         expandedRowIcon: _ctx.expandedRowIcon,
         collapsedRowIcon: _ctx.collapsedRowIcon,
         expandedRows: _ctx.expandedRows,
-        expandedRowKeys: $data.d_expandedRowKeys,
         expandedRowGroups: _ctx.expandedRowGroups,
         editingRows: _ctx.editingRows,
         editingRowKeys: $data.d_editingRowKeys,
@@ -5909,7 +6167,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         onEditingMetaChange: $options.onEditingMetaChange,
         unstyled: _ctx.unstyled,
         pt: _ctx.pt
-      }, null, 8, ["value", "class", "columns", "empty", "first", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "virtualScrollerContentProps", "isVirtualScrollerDisabled", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange", "unstyled", "pt"]), $options.hasSpacerStyle(slotProps.spacerStyle) ? (openBlock(), createElementBlock("tbody", mergeProps({
+      }, null, 8, ["value", "class", "columns", "empty", "first", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "virtualScrollerContentProps", "isVirtualScrollerDisabled", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange", "unstyled", "pt"]), $options.hasSpacerStyle(slotProps.spacerStyle) ? (openBlock(), createElementBlock("tbody", mergeProps({
         key: 1,
         "class": _ctx.cx('virtualScrollerSpacer'),
         style: {