primevue 3.44.0 → 3.46.0

package/datatable/datatable.js

@@ -31,7 +31,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
     var SortAmountDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountDownIcon);
     var SortAmountUpAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountUpAltIcon);
 
-    var script$b = {
+    var script$c = {
       name: 'BaseDataTable',
       "extends": BaseComponent__default["default"],
       props: {
@@ -153,7 +153,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         },
         metaKeySelection: {
           type: Boolean,
-          "default": true
+          "default": false
         },
         contextMenu: {
           type: Boolean,
@@ -196,7 +196,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           "default": false
         },
         expandedRows: {
-          type: Array,
+          type: [Array, Object],
           "default": null
         },
         expandedRowIcon: {
@@ -308,7 +308,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       }
     };
 
-    var script$a = {
+    var script$b = {
       name: 'RowCheckbox',
       hostName: 'DataTable',
       "extends": BaseComponent__default["default"],
@@ -392,7 +392,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
     };
 
     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 = vue.resolveComponent("CheckIcon");
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         "class": _ctx.cx('checkboxWrapper'),
@@ -432,9 +432,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       }, $options.getColumnPT('checkboxIcon')), null, 16, ["class"])) : vue.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__default["default"],
@@ -499,7 +499,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
     };
 
     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 vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         "class": _ctx.cx('radiobuttonWrapper'),
         onClick: _cache[3] || (_cache[3] = function () {
@@ -533,9 +533,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       }, $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__default["default"],
@@ -987,8 +987,8 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
       },
       components: {
-        DTRadioButton: script$9,
-        DTCheckbox: script$a,
+        DTRadioButton: script$a,
+        DTCheckbox: script$b,
         ChevronDownIcon: ChevronDownIcon__default["default"],
         ChevronRightIcon: ChevronRightIcon__default["default"],
         BarsIcon: BarsIcon__default["default"],
@@ -1001,18 +1001,18 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       }
     };
 
-    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); }
+    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 = vue.resolveComponent("DTRadioButton");
       var _component_DTCheckbox = vue.resolveComponent("DTCheckbox");
       var _component_BarsIcon = vue.resolveComponent("BarsIcon");
@@ -1024,7 +1024,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         style: $options.containerStyle,
         "class": $options.containerClass,
         role: "cell"
-      }, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.loading), {
+      }, _objectSpread$a(_objectSpread$a({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.loading), {
         data: $props.rowData,
         column: $props.column,
         field: $options.field,
@@ -1044,7 +1044,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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,
@@ -1187,14 +1187,28 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       }, [vue.createTextVNode(vue.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__default["default"],
       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
@@ -1244,11 +1258,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           "default": null
         },
         expandedRows: {
-          type: Array,
-          "default": null
-        },
-        expandedRowKeys: {
-          type: null,
+          type: [Array, Object],
           "default": null
         },
         selection: {
@@ -1279,6 +1289,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           type: null,
           "default": null
         },
+        rowGroupHeaderStyle: {
+          type: null,
+          "default": null
+        },
         editMode: {
           type: String,
           "default": null
@@ -1318,35 +1332,34 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         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[utils.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 utils.ObjectUtils.getVNodeProp(col, prop);
         },
+        //@todo - update this method
         getColumnPT: function getColumnPT(key) {
           var columnMetaData = {
             parent: {
@@ -1357,80 +1370,33 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           };
           return vue.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 ? 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 = utils.ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
-          var prevRowData = value[i - 1];
-          if (prevRowData) {
-            var previousRowFieldData = utils.ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
-            return currentRowFieldData !== previousRowFieldData;
-          } else {
-            return true;
-          }
-        },
-        getRowKey: function getRowKey(rowData, index) {
-          return this.dataKey ? utils.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 = utils.ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
-            var nextRowData = value[i + 1];
-            if (nextRowData) {
-              var nextRowFieldData = utils.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 = utils.ObjectUtils.resolveFieldData(value[i], this.columnProp(column, 'field'));
-                  var previousRowFieldData = utils.ObjectUtils.resolveFieldData(prevRowData, this.columnProp(column, 'field'));
+                  var currentRowFieldData = utils.ObjectUtils.resolveFieldData(this.value[this.rowIndex], field);
+                  var previousRowFieldData = utils.ObjectUtils.resolveFieldData(prevRowData, field);
                   return currentRowFieldData !== previousRowFieldData;
                 } else {
                   return true;
@@ -1440,19 +1406,21 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               }
             }
           } else {
-            return !this.columnProp(column, 'hidden');
+            return !isHidden;
           }
         },
-        calculateRowGroupSize: function calculateRowGroupSize(value, column, index) {
+        calculateRowGroupSize: function calculateRowGroupSize(column) {
           if (this.isGrouped(column)) {
-            var currentRowFieldData = utils.ObjectUtils.resolveFieldData(value[index], this.columnProp(column, 'field'));
+            var index = this.rowIndex;
+            var field = this.columnProp(column, 'field');
+            var currentRowFieldData = utils.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 = utils.ObjectUtils.resolveFieldData(nextRowData, this.columnProp(column, 'field'));
+                nextRowFieldData = utils.ObjectUtils.resolveFieldData(nextRowData, field);
               } else {
                 break;
               }
@@ -1463,55 +1431,21 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           }
         },
         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[utils.ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;else return this.findIndex(rowData, this.editingRows) > -1;
-          }
-          return false;
+        findIndexInSelection: function findIndexInSelection(data) {
+          return this.findIndex(data, this.selection);
         },
-        isRowExpanded: function isRowExpanded(rowData) {
-          if (rowData && this.expandedRows) {
-            if (this.dataKey) return this.expandedRowKeys ? this.expandedRowKeys[utils.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 = utils.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[utils.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;
-        },
-        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;
               }
@@ -1522,56 +1456,56 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         equals: function equals(data1, data2) {
           return this.compareSelectionBy === 'equals' ? data1 === data2 : utils.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) {
@@ -1584,7 +1518,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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);
@@ -1613,6 +1550,423 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         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[utils.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 = utils.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[utils.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 = utils.ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
+          var prevRowData = this.value[this.rowIndex - 1];
+          if (prevRowData) {
+            var previousRowFieldData = utils.ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
+            return currentRowFieldData !== previousRowFieldData;
+          } else {
+            return true;
+          }
+        },
+        shouldRenderRowGroupFooter: function shouldRenderRowGroupFooter() {
+          if (this.expandableRowGroups && !this.isRowGroupExpanded) {
+            return false;
+          } else {
+            var currentRowFieldData = utils.ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
+            var nextRowData = this.value[this.rowIndex + 1];
+            if (nextRowData) {
+              var nextRowFieldData = utils.ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
+              return currentRowFieldData !== nextRowFieldData;
+            } else {
+              return true;
+            }
+          }
+        },
+        columnsLength: function columnsLength() {
+          var _this2 = this;
+          if (this.columns) {
+            var hiddenColLength = 0;
+            this.columns.forEach(function (column) {
+              if (_this2.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
+              if (_this2.columnProp(column, 'hidden')) hiddenColLength++;
+            });
+            return this.columns.length - hiddenColLength;
+          }
+          return 0;
+        }
+      },
+      components: {
+        DTBodyCell: script$9,
+        ChevronDownIcon: ChevronDownIcon__default["default"],
+        ChevronRightIcon: ChevronRightIcon__default["default"]
+      }
+    };
+
+    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 = vue.resolveComponent("ChevronDownIcon");
+      var _component_ChevronRightIcon = vue.resolveComponent("ChevronRightIcon");
+      var _component_DTBodyCell = vue.resolveComponent("DTBodyCell");
+      return !$props.empty ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+        key: 0
+      }, [$props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
+        key: 0,
+        "class": _ctx.cx('rowGroupHeader'),
+        style: $props.rowGroupHeaderStyle,
+        role: "row"
+      }, _ctx.ptm('rowGroupHeader')), [vue.createElementVNode("td", vue.mergeProps({
+        colspan: $options.columnsLength - 1
+      }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowGroupHeaderCell'))), [$props.expandableRowGroups ? (vue.openBlock(), vue.createElementBlock("button", vue.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'] ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
+        key: 0,
+        expanded: $options.isRowGroupExpanded
+      }, null, 8, ["expanded"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+        key: 1
+      }, [$options.isRowGroupExpanded && $props.expandedRowIcon ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+        key: 0,
+        "class": [_ctx.cx('rowGroupTogglerIcon'), $props.expandedRowIcon]
+      }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : $options.isRowGroupExpanded && !$props.expandedRowIcon ? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, vue.mergeProps({
+        key: 1,
+        "class": _ctx.cx('rowGroupTogglerIcon')
+      }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : !$options.isRowGroupExpanded && $props.collapsedRowIcon ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+        key: 2,
+        "class": [_ctx.cx('rowGroupTogglerIcon'), $props.collapsedRowIcon]
+      }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : !$options.isRowGroupExpanded && !$props.collapsedRowIcon ? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, vue.mergeProps({
+        key: 3,
+        "class": _ctx.cx('rowGroupTogglerIcon')
+      }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : vue.createCommentVNode("", true)], 64))], 16)) : vue.createCommentVNode("", true), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupheader']), {
+        data: $props.rowData,
+        index: $options.rowIndex
+      }, null, 8, ["data", "index"]))], 16, _hoisted_1$4)], 16)) : vue.createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded : true) ? (vue.openBlock(), vue.createElementBlock("tr", vue.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] = vue.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
+      }), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.columns, function (col, i) {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [$options.shouldRenderBodyCell(col) ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)], 64);
+      }), 256))], 16, _hoisted_2$1)) : vue.createCommentVNode("", true), $props.templates['expansion'] && $props.expandedRows && $data.d_rowExpanded ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
+        key: 2,
+        id: $props.expandedRowId + '_' + $options.rowIndex + '_expansion',
+        "class": _ctx.cx('rowExpansion'),
+        role: "row"
+      }, _ctx.ptm('rowExpansion')), [vue.createElementVNode("td", vue.mergeProps({
+        colspan: $options.columnsLength
+      }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowExpansionCell'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['expansion']), {
+        data: $props.rowData,
+        index: $options.rowIndex
+      }, null, 8, ["data", "index"]))], 16, _hoisted_4)], 16, _hoisted_3$1)) : vue.createCommentVNode("", true), $props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
+        key: 3,
+        "class": _ctx.cx('rowGroupFooter'),
+        role: "row"
+      }, _ctx.ptm('rowGroupFooter')), [vue.createElementVNode("td", vue.mergeProps({
+        colspan: $options.columnsLength - 1
+      }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowGroupFooterCell'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupfooter']), {
+        data: $props.rowData,
+        index: $options.rowIndex
+      }, null, 8, ["data", "index"]))], 16, _hoisted_5)], 16)) : vue.createCommentVNode("", true)], 64)) : (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
+        key: 1,
+        "class": _ctx.cx('emptyMessage'),
+        role: "row"
+      }, _ctx.ptm('emptyMessage')), [vue.createElementVNode("td", vue.mergeProps({
+        colspan: $options.columnsLength
+      }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('emptyMessageCell'))), [$props.templates.empty ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.empty), {
+        key: 0
+      })) : vue.createCommentVNode("", true)], 16, _hoisted_6)], 16));
+    }
+
+    script$8.render = render$8;
+
+    var script$7 = {
+      name: 'TableBody',
+      hostName: 'DataTable',
+      "extends": BaseComponent__default["default"],
+      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 = utils.DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
         },
@@ -1628,24 +1982,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           // 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 {
@@ -1654,48 +1993,31 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           }
           return null;
         },
-        bodyStyle: function bodyStyle() {
-          return this.getVirtualScrollerProp('contentStyle');
-        },
-        expandedRowId: function expandedRowId() {
-          return utils.UniqueComponentId();
-        },
-        nameAttributeSelector: function nameAttributeSelector() {
-          return utils.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 utils.UniqueComponentId();
+        },
+        nameAttributeSelector: function nameAttributeSelector() {
+          return utils.UniqueComponentId();
         }
       },
       components: {
-        DTBodyCell: script$8,
-        ChevronDownIcon: ChevronDownIcon__default["default"],
-        ChevronRightIcon: ChevronRightIcon__default["default"]
+        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(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 = ["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 = vue.resolveComponent("ChevronDownIcon");
-      var _component_ChevronRightIcon = vue.resolveComponent("ChevronRightIcon");
-      var _component_DTBodyCell = vue.resolveComponent("DTBodyCell");
+      var _component_DTBodyRow = vue.resolveComponent("DTBodyRow");
       return vue.openBlock(), vue.createElementBlock("tbody", vue.mergeProps({
         ref: $options.bodyRef,
         "class": _ctx.cx('tbody'),
@@ -1703,165 +2025,119 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         style: $options.bodyStyle
       }, _ctx.ptm('tbody', $options.ptmTBodyOptions)), [!$props.empty ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
         key: 0
-      }, vue.renderList($props.value, function (rowData, index) {
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [$props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader($props.value, rowData, $options.getRowIndex(index)) ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
-          key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subheader',
-          "class": _ctx.cx('rowGroupHeader'),
-          style: $options.rowGroupHeaderStyle,
-          role: "row"
-        }, _ctx.ptm('rowGroupHeader')), [vue.createElementVNode("td", vue.mergeProps({
-          colspan: $options.columnsLength - 1
-        }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowGroupHeaderCell'))), [$props.expandableRowGroups ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
-          key: 0,
-          "class": _ctx.cx('rowGroupToggler'),
-          onClick: function onClick($event) {
-            return $options.onRowGroupToggle($event, rowData);
-          },
-          type: "button"
-        }, _ctx.ptm('rowGroupToggler')), [$props.templates['rowgrouptogglericon'] ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
-          key: 0,
-          expanded: $options.isRowGroupExpanded(rowData)
-        }, null, 8, ["expanded"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-          key: 1
-        }, [$options.isRowGroupExpanded(rowData) && $props.expandedRowIcon ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
-          key: 0,
-          "class": [_ctx.cx('rowGroupTogglerIcon'), $props.expandedRowIcon]
-        }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : $options.isRowGroupExpanded(rowData) && !$props.expandedRowIcon ? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, vue.mergeProps({
-          key: 1,
-          "class": _ctx.cx('rowGroupTogglerIcon')
-        }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : !$options.isRowGroupExpanded(rowData) && $props.collapsedRowIcon ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
-          key: 2,
-          "class": [_ctx.cx('rowGroupTogglerIcon'), $props.collapsedRowIcon]
-        }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : !$options.isRowGroupExpanded(rowData) && !$props.collapsedRowIcon ? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, vue.mergeProps({
-          key: 3,
-          "class": _ctx.cx('rowGroupTogglerIcon')
-        }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : vue.createCommentVNode("", true)], 64))], 16, _hoisted_2$1)) : vue.createCommentVNode("", true), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupheader']), {
-          data: rowData,
-          index: $options.getRowIndex(index)
-        }, null, 8, ["data", "index"]))], 16, _hoisted_1$4)], 16)) : vue.createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData) : true) ? (vue.openBlock(), vue.createElementBlock("tr", vue.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);
+      }, vue.renderList($props.value, function (rowData, rowIndex) {
+        return vue.openBlock(), vue.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: vue.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)
-        }), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.columns, function (col, i) {
-          return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [$options.shouldRenderBodyCell($props.value, col, $options.getRowIndex(index)) ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)], 64);
-        }), 256))], 16, _hoisted_3$1)) : vue.createCommentVNode("", true), $props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData) ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
-          key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_expansion',
-          id: $options.expandedRowId + '_' + index + '_expansion',
-          "class": _ctx.cx('rowExpansion'),
-          role: "row"
-        }, _ctx.ptm('rowExpansion')), [vue.createElementVNode("td", vue.mergeProps({
-          colspan: $options.columnsLength
-        }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowExpansionCell'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['expansion']), {
-          data: rowData,
-          index: $options.getRowIndex(index)
-        }, null, 8, ["data", "index"]))], 16, _hoisted_5)], 16, _hoisted_4)) : vue.createCommentVNode("", true), $props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)) ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
-          key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subfooter',
-          "class": _ctx.cx('rowGroupFooter'),
-          role: "row"
-        }, _ctx.ptm('rowGroupFooter')), [vue.createElementVNode("td", vue.mergeProps({
-          colspan: $options.columnsLength - 1
-        }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('rowGroupFooterCell'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupfooter']), {
-          data: rowData,
-          index: $options.getRowIndex(index)
-        }, null, 8, ["data", "index"]))], 16, _hoisted_6)], 16)) : vue.createCommentVNode("", true)], 64);
-      }), 256)) : (vue.openBlock(), vue.createElementBlock("tr", vue.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)) : (vue.openBlock(), vue.createBlock(_component_DTBodyRow, {
         key: 1,
-        "class": _ctx.cx('emptyMessage'),
-        role: "row"
-      }, _ctx.ptm('emptyMessage')), [vue.createElementVNode("td", vue.mergeProps({
-        colspan: $options.columnsLength
-      }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('bodycell')), _ctx.ptm('emptyMessageCell'))), [$props.templates.empty ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.empty), {
-        key: 0
-      })) : vue.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;
@@ -1978,13 +2254,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
 
     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',
@@ -1999,6 +2271,26 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           "default": null
         }
       },
+      provide: function provide() {
+        return {
+          $rows: this.d_footerRows,
+          $columns: this.d_footerColumns
+        };
+      },
+      data: function data() {
+        return {
+          d_footerRows: new utils.HelperSet({
+            type: 'Row'
+          }),
+          d_footerColumns: new utils.HelperSet({
+            type: 'Column'
+          })
+        };
+      },
+      beforeUnmount: function beforeUnmount() {
+        this.d_footerRows.clear();
+        this.d_footerColumns.clear();
+      },
       methods: {
         columnProp: function columnProp(col, prop) {
           return utils.ObjectUtils.getVNodeProp(col, prop);
@@ -2043,36 +2335,12 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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: {
@@ -2081,20 +2349,20 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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;
@@ -2384,6 +2652,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         onToggleButtonKeyDown: function onToggleButtonKeyDown(event) {
           switch (event.code) {
             case 'Enter':
+            case 'NumpadEnter':
             case 'Space':
               this.toggleMenu(event);
               break;
@@ -3165,6 +3434,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             },
             context: {
               index: this.index,
+              sortable: this.column.props.sortable === '' || this.column.props.sortable,
               sorted: this.isColumnSorted(),
               resizable: this.resizableColumns,
               size: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.size,
@@ -3185,7 +3455,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           });
         },
         onKeyDown: function onKeyDown(event) {
-          if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && utils.DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
+          if ((event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && utils.DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
             this.$emit('column-click', {
               originalEvent: event,
               column: this.column
@@ -3200,16 +3470,28 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           });
         },
         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);
@@ -3251,8 +3533,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             var filterRow = this.$el.parentElement.nextElementSibling;
             if (filterRow) {
               var index = utils.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;
+              }
             }
           }
         },
@@ -3449,13 +3733,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
 
     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',
@@ -3531,6 +3808,26 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           "default": null
         }
       },
+      provide: function provide() {
+        return {
+          $rows: this.d_headerRows,
+          $columns: this.d_headerColumns
+        };
+      },
+      data: function data() {
+        return {
+          d_headerRows: new utils.HelperSet({
+            type: 'Row'
+          }),
+          d_headerColumns: new utils.HelperSet({
+            type: 'Column'
+          })
+        };
+      },
+      beforeUnmount: function beforeUnmount() {
+        this.d_headerRows.clear();
+        this.d_headerColumns.clear();
+      },
       methods: {
         columnProp: function columnProp(col, prop) {
           return utils.ObjectUtils.getVNodeProp(col, prop);
@@ -3603,36 +3900,12 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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: {
@@ -3873,6 +4146,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
     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; }
@@ -3891,8 +4167,14 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
     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,
@@ -3903,11 +4185,16 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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 utils.HelperSet({
+            type: 'Column'
+          }),
+          d_columnGroups: new utils.HelperSet({
+            type: 'ColumnGroup'
+          })
         };
       },
       rowTouched: false,
@@ -3921,6 +4208,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       colReorderIconWidth: null,
       colReorderIconHeight: null,
       draggedColumn: null,
+      draggedColumnElement: null,
       draggedRowIndex: null,
       droppedRowIndex: null,
       rowDragging: null,
@@ -3954,11 +4242,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             }
           }
         },
-        expandedRows: function expandedRows(newValue) {
-          if (this.dataKey) {
-            this.updateExpandedRowKeys(newValue);
-          }
-        },
         editingRows: {
           immediate: true,
           handler: function handler(newValue) {
@@ -3991,6 +4274,8 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         this.unbindColumnResizeEvents();
         this.destroyStyleElement();
         this.destroyResponsiveStyle();
+        this.d_columns.clear();
+        this.d_columnGroups.clear();
       },
       updated: function updated() {
         if (this.isStateful()) {
@@ -4005,6 +4290,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           return utils.ObjectUtils.getVNodeProp(col, prop);
         },
         onPage: function onPage(event) {
+          var _this = this;
           this.clearEditingMetaData();
           this.d_first = event.first;
           this.d_rows = event.rows;
@@ -4014,15 +4300,18 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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 (utils.DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' || targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]')) {
+            if (utils.DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' || utils.DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || utils.DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' || targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]') && !utils.DomHandler.isClickable(event.target)) {
               utils.DomHandler.clearSelection();
               if (this.sortMode === 'single') {
                 if (this.d_sortField === columnField) {
@@ -4050,12 +4339,14 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                 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 = [{
@@ -4085,12 +4376,12 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           data.sort(function (data1, data2) {
             var value1 = resolvedFieldData.get(data1);
             var value2 = resolvedFieldData.get(data2);
-            return utils.ObjectUtils.sort(value1, value2, _this.d_sortOrder, comparer, _this.d_nullSortOrder);
+            return utils.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];
@@ -4101,7 +4392,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           }
           var data = _toConsumableArray(value);
           data.sort(function (data1, data2) {
-            return _this2.multisortField(data1, data2, 0);
+            return _this4.multisortField(data1, data2, 0);
           });
           return data;
         },
@@ -4157,7 +4448,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           return Object.fromEntries(entries);
         },
         filter: function filter(data) {
-          var _this3 = this;
+          var _this5 = this;
           if (!data) {
             return;
           }
@@ -4166,7 +4457,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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 = [];
@@ -4228,7 +4519,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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) {
@@ -4384,6 +4677,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                 this.onEndKey(event, row, rowIndex, slotProps);
                 break;
               case 'Enter':
+              case 'NumpadEnter':
                 this.onEnterKey(event, rowData, rowIndex);
                 break;
               case 'Space':
@@ -4634,40 +4928,21 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             this.d_selectionKeys[String(utils.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(utils.ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
+                this.d_editingRowKeys[String(utils.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(utils.ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
-              }
-            } catch (err) {
-              _iterator5.e(err);
-            } finally {
-              _iterator5.f();
-            }
           } else {
             this.d_editingRowKeys = null;
           }
@@ -4705,7 +4980,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           this.$emit('update:selection', _selection);
         },
         exportCSV: function exportCSV(options, data) {
-          var _this4 = this;
+          var _this6 = this;
           var csv = "\uFEFF";
           if (!data) {
             data = this.processedData;
@@ -4727,16 +5002,16 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             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 = utils.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 = utils.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 = '';
@@ -4839,19 +5114,19 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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();
               }
             });
           }
@@ -4873,23 +5148,28 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || utils.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 = utils.DomHandler.getHiddenElementOuterWidth(this.$refs.reorderIndicatorUp);
           this.colReorderIconHeight = utils.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 = utils.DomHandler.getOffset(this.$el);
             var dropHeaderOffset = utils.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';
@@ -4908,34 +5188,67 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             }
           }
         },
-        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 = utils.DomHandler.index(this.draggedColumn);
+          if (this.draggedColumnElement) {
+            var dragIndex = utils.DomHandler.index(this.draggedColumnElement);
             var dropIndex = utils.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) {
-              utils.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 = utils.DomHandler.find(this.$el, 'thead[data-pc-section="thead"] > tr > th');
+              headers.forEach(function (header) {
+                return widths.push(utils.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--;
+              }
+              utils.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;
           }
@@ -5045,28 +5358,23 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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[utils.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 = utils.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;
@@ -5136,7 +5444,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           }
           if (this.expandedRows) {
             state.expandedRows = this.expandedRows;
-            state.expandedRowKeys = this.d_expandedRowKeys;
           }
           if (this.expandedRowGroups) {
             state.expandedRowGroups = this.expandedRowGroups;
@@ -5184,7 +5491,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               this.d_columnOrder = restoredState.columnOrder;
             }
             if (restoredState.expandedRows) {
-              this.d_expandedRowKeys = restoredState.expandedRowKeys;
               this.$emit('update:expandedRows', restoredState.expandedRows);
             }
             if (restoredState.expandedRowGroups) {
@@ -5208,23 +5514,25 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             state.tableWidth = utils.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 (utils.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);
             }
           }
         },
@@ -5295,9 +5603,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         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;
         },
@@ -5327,10 +5632,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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;
         },
@@ -5351,7 +5656,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             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;
           }
         },
@@ -5367,22 +5672,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             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) {
@@ -5400,27 +5689,23 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       },
       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;
@@ -5428,52 +5713,30 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           }
           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);
@@ -5507,14 +5770,14 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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 utils.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);
               });
             });
           }
@@ -5754,7 +6017,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             expandedRowIcon: _ctx.expandedRowIcon,
             collapsedRowIcon: _ctx.collapsedRowIcon,
             expandedRows: _ctx.expandedRows,
-            expandedRowKeys: $data.d_expandedRowKeys,
             expandedRowGroups: _ctx.expandedRowGroups,
             editingRows: _ctx.editingRows,
             editingRowKeys: $data.d_editingRowKeys,
@@ -5820,7 +6082,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             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"])) : vue.createCommentVNode("", true), vue.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"])) : vue.createCommentVNode("", true), vue.createVNode(_component_DTTableBody, {
             ref: "bodyRef",
             value: $options.dataToRender(slotProps.rows),
             "class": vue.normalizeClass(slotProps.styleClass),
@@ -5844,7 +6106,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             expandedRowIcon: _ctx.expandedRowIcon,
             collapsedRowIcon: _ctx.collapsedRowIcon,
             expandedRows: _ctx.expandedRows,
-            expandedRowKeys: $data.d_expandedRowKeys,
             expandedRowGroups: _ctx.expandedRowGroups,
             editingRows: _ctx.editingRows,
             editingRowKeys: $data.d_editingRowKeys,
@@ -5913,7 +6174,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             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) ? (vue.openBlock(), vue.createElementBlock("tbody", vue.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) ? (vue.openBlock(), vue.createElementBlock("tbody", vue.mergeProps({
             key: 1,
             "class": _ctx.cx('virtualScrollerSpacer'),
             style: {