From fb1fb60eab9b326f6e36bc1356b7da92723b3bdd Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Mon, 18 Dec 2023 14:16:35 +0000
Subject: [PATCH] Fixed #4977 - Improve performance of row expansion feature on
 DataTable (#4978)

* DataTable performance improvement (1)

* Refactor on DT performance

* Refactor

* Refactor

* Update RowExpansionDoc.vue

* Update RowExpansionDoc.vue

* Update RowExpansionDoc.vue
---
 components/lib/datatable/BaseDataTable.vue    |   2 +-
 components/lib/datatable/BodyRow.vue          | 575 ++++++++++++++++++
 components/lib/datatable/DataTable.vue        |  52 +-
 components/lib/datatable/TableBody.vue        | 488 +++------------
 .../lib/datatable/style/DataTableStyle.js     |   6 +-
 components/lib/utils/ObjectUtils.js           |  12 +-
 doc/datatable/RowExpansionDoc.vue             |   6 +-
 7 files changed, 674 insertions(+), 467 deletions(-)
 create mode 100644 components/lib/datatable/BodyRow.vue

diff --git a/components/lib/datatable/BaseDataTable.vue b/components/lib/datatable/BaseDataTable.vue
index d307f759b..ebdee7533 100644
--- a/components/lib/datatable/BaseDataTable.vue
+++ b/components/lib/datatable/BaseDataTable.vue
@@ -167,7 +167,7 @@ export default {
             default: false
         },
         expandedRows: {
-            type: Array,
+            type: [Array, Object],
             default: null
         },
         expandedRowIcon: {
diff --git a/components/lib/datatable/BodyRow.vue b/components/lib/datatable/BodyRow.vue
new file mode 100644
index 000000000..227413575
--- /dev/null
+++ b/components/lib/datatable/BodyRow.vue
@@ -0,0 +1,575 @@
+<template>
+    <template v-if="!empty">
+        <tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader" :class="cx('rowGroupHeader')" :style="rowGroupHeaderStyle" role="row" v-bind="ptm('rowGroupHeader')">
+            <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }">
+                <button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle" type="button" v-bind="ptm('rowGroupToggler')">
+                    <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded" />
+                    <template v-else>
+                        <span v-if="isRowGroupExpanded && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
+                        <ChevronDownIcon v-else-if="isRowGroupExpanded && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
+                        <span v-else-if="!isRowGroupExpanded && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
+                        <ChevronRightIcon v-else-if="!isRowGroupExpanded && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
+                    </template>
+                </button>
+                <component :is="templates['groupheader']" :data="rowData" :index="rowIndex" />
+            </td>
+        </tr>
+        <tr
+            v-if="expandableRowGroups ? isRowGroupExpanded : true"
+            :class="rowClasses"
+            :style="rowStyles"
+            :tabindex="rowTabindex"
+            role="row"
+            :aria-selected="selectionMode ? isSelected : null"
+            @click="onRowClick"
+            @dblclick="onRowDblClick"
+            @contextmenu="onRowRightClick"
+            @touchend="onRowTouchEnd"
+            @keydown.self="onRowKeyDown"
+            @mousedown="onRowMouseDown"
+            @dragstart="onRowDragStart"
+            @dragover="onRowDragOver"
+            @dragleave="onRowDragLeave"
+            @dragend="onRowDragEnd"
+            @drop="onRowDrop"
+            v-bind="getBodyRowPTOptions('bodyRow')"
+            :data-p-selectable-row="selectionMode ? true : false"
+            :data-p-highlight="selection && isSelected"
+            :data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu"
+        >
+            <template v-for="(col, i) of columns">
+                <DTBodyCell
+                    v-if="shouldRenderBodyCell(col)"
+                    :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i"
+                    :rowData="rowData"
+                    :column="col"
+                    :rowIndex="rowIndex"
+                    :index="i"
+                    :selected="isSelected"
+                    :frozenRow="frozenRow"
+                    :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(col) : null"
+                    :editMode="editMode"
+                    :editing="editMode === 'row' && isRowEditing"
+                    :editingMeta="editingMeta"
+                    :responsiveLayout="responsiveLayout"
+                    :virtualScrollerContentProps="virtualScrollerContentProps"
+                    :ariaControls="expandedRowId + '_' + rowIndex + '_expansion'"
+                    :name="nameAttributeSelector"
+                    :isRowExpanded="d_rowExpanded"
+                    :expandedRowIcon="expandedRowIcon"
+                    :collapsedRowIcon="collapsedRowIcon"
+                    @radio-change="onRadioChange"
+                    @checkbox-change="onCheckboxChange"
+                    @row-toggle="onRowToggle"
+                    @cell-edit-init="onCellEditInit"
+                    @cell-edit-complete="onCellEditComplete"
+                    @cell-edit-cancel="onCellEditCancel"
+                    @row-edit-init="onRowEditInit"
+                    @row-edit-save="onRowEditSave"
+                    @row-edit-cancel="onRowEditCancel"
+                    @editing-meta-change="onEditingMetaChange"
+                    :unstyled="unstyled"
+                    :pt="pt"
+                />
+            </template>
+        </tr>
+        <tr v-if="templates['expansion'] && expandedRows && d_rowExpanded" :id="expandedRowId + '_' + rowIndex + '_expansion'" :class="cx('rowExpansion')" role="row" v-bind="ptm('rowExpansion')">
+            <td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowExpansionCell') }">
+                <component :is="templates['expansion']" :data="rowData" :index="rowIndex" />
+            </td>
+        </tr>
+        <tr v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter" :class="cx('rowGroupFooter')" role="row" v-bind="ptm('rowGroupFooter')">
+            <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupFooterCell') }">
+                <component :is="templates['groupfooter']" :data="rowData" :index="rowIndex" />
+            </td>
+        </tr>
+    </template>
+    <tr v-else :class="cx('emptyMessage')" role="row" v-bind="ptm('emptyMessage')">
+        <td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('emptyMessageCell') }">
+            <component v-if="templates.empty" :is="templates.empty" />
+        </td>
+    </tr>
+</template>
+
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import { ObjectUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
+import BodyCell from './BodyCell.vue';
+
+export default {
+    name: 'BodyRow',
+    hostName: 'DataTable',
+    extends: BaseComponent,
+    emits: [
+        'rowgroup-toggle',
+        'row-click',
+        'row-dblclick',
+        'row-rightclick',
+        'row-touchend',
+        'row-keydown',
+        'row-mousedown',
+        'row-dragstart',
+        'row-dragover',
+        'row-dragleave',
+        'row-dragend',
+        'row-drop',
+        'row-toggle',
+        'radio-change',
+        'checkbox-change',
+        'cell-edit-init',
+        'cell-edit-complete',
+        'cell-edit-cancel',
+        'row-edit-init',
+        'row-edit-save',
+        'row-edit-cancel',
+        'editing-meta-change'
+    ],
+    props: {
+        rowData: {
+            type: Object,
+            default: null
+        },
+        index: {
+            type: Number,
+            default: 0
+        },
+        value: {
+            type: Array,
+            default: null
+        },
+        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
+        },
+        rowGroupHeaderStyle: {
+            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
+        },
+        expandedRowId: {
+            type: String,
+            default: null
+        },
+        nameAttributeSelector: {
+            type: String,
+            default: null
+        }
+    },
+    data() {
+        return {
+            d_rowExpanded: false
+        };
+    },
+    watch: {
+        expandedRows(newValue) {
+            this.d_rowExpanded = this.dataKey ? newValue?.[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : newValue?.some((d) => this.equals(this.rowData, d));
+        }
+    },
+    methods: {
+        columnProp(col, prop) {
+            return ObjectUtils.getVNodeProp(col, prop);
+        },
+        //@todo - update this method
+        getColumnPT(key) {
+            const columnMetaData = {
+                parent: {
+                    instance: this,
+                    props: this.$props,
+                    state: this.$data
+                }
+            };
+
+            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.columnProp({}, 'pt'), key, columnMetaData));
+        },
+        //@todo - update this method
+        getBodyRowPTOptions(key) {
+            const datatable = this.$parentInstance?.$parentInstance?.$parentInstance;
+
+            return this.ptm(key, {
+                context: {
+                    index: this.rowIndex,
+                    selectable: datatable?.rowHover || datatable?.selectionMode,
+                    selected: this.isSelected,
+                    stripedRows: datatable?.stripedRows || false
+                }
+            });
+        },
+        shouldRenderBodyCell(column) {
+            if (this.rowGroupMode) {
+                const field = this.columnProp(column, 'field');
+
+                if (this.rowGroupMode === 'subheader') {
+                    return this.groupRowsBy !== field;
+                } else if (this.rowGroupMode === 'rowspan') {
+                    if (this.isGrouped(column)) {
+                        let prevRowData = this.value[this.rowIndex - 1];
+
+                        if (prevRowData) {
+                            const currentRowFieldData = ObjectUtils.resolveFieldData(this.value[this.rowIndex], field);
+                            const previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, field);
+
+                            return currentRowFieldData !== previousRowFieldData;
+                        } else {
+                            return true;
+                        }
+                    } else {
+                        return true;
+                    }
+                }
+            } else {
+                return !this.columnProp(column, 'hidden');
+            }
+        },
+        calculateRowGroupSize(column) {
+            if (this.isGrouped(column)) {
+                let index = this.rowIndex;
+                const field = this.columnProp(column, 'field');
+                const currentRowFieldData = ObjectUtils.resolveFieldData(this.value[index], field);
+                let nextRowFieldData = currentRowFieldData;
+                let groupRowSpan = 0;
+
+                while (currentRowFieldData === nextRowFieldData) {
+                    groupRowSpan++;
+                    let nextRowData = this.value[++index];
+
+                    if (nextRowData) {
+                        nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, field);
+                    } else {
+                        break;
+                    }
+                }
+
+                return groupRowSpan === 1 ? null : groupRowSpan;
+            } else {
+                return null;
+            }
+        },
+        isGrouped(column) {
+            const 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;
+            }
+        },
+        findIndexInSelection(data) {
+            return this.findIndex(data, this.selection);
+        },
+        findIndex(data, collection) {
+            let index = -1;
+
+            if (collection && collection.length) {
+                for (let i = 0; i < collection.length; i++) {
+                    if (this.equals(data, collection[i])) {
+                        index = i;
+                        break;
+                    }
+                }
+            }
+
+            return index;
+        },
+        equals(data1, data2) {
+            return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey);
+        },
+        onRowGroupToggle(event) {
+            this.$emit('rowgroup-toggle', { originalEvent: event, data: this.rowData });
+        },
+        onRowClick(event) {
+            this.$emit('row-click', { originalEvent: event, data: this.rowData, index: this.rowIndex });
+        },
+        onRowDblClick(event) {
+            this.$emit('row-dblclick', { originalEvent: event, data: this.rowData, index: this.rowIndex });
+        },
+        onRowRightClick(event) {
+            this.$emit('row-rightclick', { originalEvent: event, data: this.rowData, index: this.rowIndex });
+        },
+        onRowTouchEnd(event) {
+            this.$emit('row-touchend', event);
+        },
+        onRowKeyDown(event) {
+            this.$emit('row-keydown', { originalEvent: event, data: this.rowData, index: this.rowIndex });
+        },
+        onRowMouseDown(event) {
+            this.$emit('row-mousedown', event);
+        },
+        onRowDragStart(event) {
+            this.$emit('row-dragstart', { originalEvent: event, index: this.rowIndex });
+        },
+        onRowDragOver(event) {
+            this.$emit('row-dragover', { originalEvent: event, index: this.rowIndex });
+        },
+        onRowDragLeave(event) {
+            this.$emit('row-dragleave', event);
+        },
+        onRowDragEnd(event) {
+            this.$emit('row-dragend', event);
+        },
+        onRowDrop(event) {
+            this.$emit('row-drop', event);
+        },
+        onRowToggle(event) {
+            this.d_rowExpanded = !this.d_rowExpanded;
+
+            this.$emit('row-toggle', { ...event, expanded: this.d_rowExpanded });
+        },
+        onRadioChange(event) {
+            this.$emit('radio-change', event);
+        },
+        onCheckboxChange(event) {
+            this.$emit('checkbox-change', event);
+        },
+        onCellEditInit(event) {
+            this.$emit('cell-edit-init', event);
+        },
+        onCellEditComplete(event) {
+            this.$emit('cell-edit-complete', event);
+        },
+        onCellEditCancel(event) {
+            this.$emit('cell-edit-cancel', event);
+        },
+        onRowEditInit(event) {
+            this.$emit('row-edit-init', event);
+        },
+        onRowEditSave(event) {
+            this.$emit('row-edit-save', event);
+        },
+        onRowEditCancel(event) {
+            this.$emit('row-edit-cancel', event);
+        },
+        onEditingMetaChange(event) {
+            this.$emit('editing-meta-change', event);
+        },
+        getVirtualScrollerProp(option, options) {
+            options = options || this.virtualScrollerContentProps;
+
+            return options ? options[option] : null;
+        }
+    },
+    computed: {
+        rowIndex() {
+            const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
+
+            return getItemOptions ? getItemOptions(this.index).index : this.index;
+        },
+        rowStyles() {
+            return this.rowStyle?.(this.rowData);
+        },
+        rowClasses() {
+            let rowStyleClass = [];
+
+            if (this.rowClass) {
+                let rowClassValue = this.rowClass(this.rowData);
+
+                if (rowClassValue) {
+                    rowStyleClass.push(rowClassValue);
+                }
+            }
+
+            return [this.cx('row', { rowData: this.rowData }), rowStyleClass];
+        },
+        rowTabindex() {
+            if (this.selection === null && (this.selectionMode === 'single' || this.selectionMode === 'multiple')) {
+                return this.rowIndex === 0 ? 0 : -1;
+            }
+
+            return -1;
+        },
+        isRowEditing() {
+            if (this.rowData && this.editingRows) {
+                if (this.dataKey) return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : false;
+                else return this.findIndex(this.rowData, this.editingRows) > -1;
+            }
+
+            return false;
+        },
+        isRowGroupExpanded() {
+            if (this.expandableRowGroups && this.expandedRowGroups) {
+                const groupFieldValue = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
+
+                return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
+            }
+
+            return false;
+        },
+        isSelected() {
+            if (this.rowData && this.selection) {
+                if (this.dataKey) {
+                    return this.selectionKeys ? this.selectionKeys[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : false;
+                } else {
+                    if (this.selection instanceof Array) return this.findIndexInSelection(this.rowData) > -1;
+                    else return this.equals(this.rowData, this.selection);
+                }
+            }
+
+            return false;
+        },
+        isSelectedWithContextMenu() {
+            if (this.rowData && this.contextMenuSelection) {
+                return this.equals(this.rowData, this.contextMenuSelection, this.dataKey);
+            }
+
+            return false;
+        },
+        shouldRenderRowGroupHeader() {
+            const currentRowFieldData = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
+            const prevRowData = this.value[this.rowIndex - 1];
+
+            if (prevRowData) {
+                const previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
+
+                return currentRowFieldData !== previousRowFieldData;
+            } else {
+                return true;
+            }
+        },
+        shouldRenderRowGroupFooter() {
+            if (this.expandableRowGroups && !this.isRowGroupExpanded) {
+                return false;
+            } else {
+                let currentRowFieldData = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
+                let nextRowData = this.value[this.rowIndex + 1];
+
+                if (nextRowData) {
+                    let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
+
+                    return currentRowFieldData !== nextRowFieldData;
+                } else {
+                    return true;
+                }
+            }
+        },
+        columnsLength() {
+            let hiddenColLength = 0;
+
+            this.columns.forEach((column) => {
+                if (this.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
+                if (this.columnProp(column, 'hidden')) hiddenColLength++;
+            });
+
+            return this.columns ? this.columns.length - hiddenColLength : 0;
+        }
+    },
+    components: {
+        DTBodyCell: BodyCell,
+        ChevronDownIcon: ChevronDownIcon,
+        ChevronRightIcon: ChevronRightIcon
+    }
+};
+</script>
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index 96d4f4ef0..e7fd50923 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -124,7 +124,6 @@
                             :expandedRowIcon="expandedRowIcon"
                             :collapsedRowIcon="collapsedRowIcon"
                             :expandedRows="expandedRows"
-                            :expandedRowKeys="d_expandedRowKeys"
                             :expandedRowGroups="expandedRowGroups"
                             :editingRows="editingRows"
                             :editingRowKeys="d_editingRowKeys"
@@ -181,7 +180,6 @@
                             :expandedRowIcon="expandedRowIcon"
                             :collapsedRowIcon="collapsedRowIcon"
                             :expandedRows="expandedRows"
-                            :expandedRowKeys="d_expandedRowKeys"
                             :expandedRowGroups="expandedRowGroups"
                             :editingRows="editingRows"
                             :editingRowKeys="d_editingRowKeys"
@@ -345,7 +343,6 @@ export default {
             d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
             d_groupRowsSortMeta: null,
             d_selectionKeys: null,
-            d_expandedRowKeys: null,
             d_columnOrder: null,
             d_editingRowKeys: null,
             d_editingMeta: {},
@@ -396,11 +393,6 @@ export default {
                 }
             }
         },
-        expandedRows(newValue) {
-            if (this.dataKey) {
-                this.updateExpandedRowKeys(newValue);
-            }
-        },
         editingRows: {
             immediate: true,
             handler(newValue) {
@@ -1087,17 +1079,6 @@ export default {
                 this.d_selectionKeys[String(ObjectUtils.resolveFieldData(selection, this.dataKey))] = 1;
             }
         },
-        updateExpandedRowKeys(expandedRows) {
-            if (expandedRows && expandedRows.length) {
-                this.d_expandedRowKeys = {};
-
-                for (let data of expandedRows) {
-                    this.d_expandedRowKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1;
-                }
-            } else {
-                this.d_expandedRowKeys = null;
-            }
-        },
         updateEditingRowKeys(editingRows) {
             if (editingRows && editingRows.length) {
                 this.d_editingRowKeys = {};
@@ -1557,31 +1538,22 @@ export default {
             event.preventDefault();
         },
         toggleRow(event) {
-            let rowData = event.data;
-            let expanded;
-            let expandedRowIndex;
-            let _expandedRows = this.expandedRows ? [...this.expandedRows] : [];
+            const { expanded, ...rest } = event;
+            const rowData = event.data;
+            let expandedRows;
 
             if (this.dataKey) {
-                expanded = this.d_expandedRowKeys ? this.d_expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
+                const value = ObjectUtils.resolveFieldData(rowData, this.dataKey);
+
+                expandedRows = this.expandedRows ? { ...this.expandedRows } : {};
+                expanded ? (expandedRows[value] = true) : delete expandedRows[value];
             } else {
-                expandedRowIndex = this.findIndex(rowData, this.expandedRows);
-                expanded = expandedRowIndex > -1;
+                expandedRows = this.expandedRows ? [...this.expandedRows] : [];
+                expanded ? expandedRows.push(rowData) : (expandedRows = expandedRows.filter((d) => !this.equals(rowData, d)));
             }
 
-            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);
-            } else {
-                _expandedRows.push(rowData);
-                this.$emit('update:expandedRows', _expandedRows);
-                this.$emit('row-expand', event);
-            }
+            this.$emit('update:expandedRows', expandedRows);
+            expanded ? this.$emit('row-expand', rest) : this.$emit('row-collapse', rest);
         },
         toggleRowGroup(e) {
             const event = e.originalEvent;
@@ -1655,7 +1627,6 @@ export default {
 
             if (this.expandedRows) {
                 state.expandedRows = this.expandedRows;
-                state.expandedRowKeys = this.d_expandedRowKeys;
             }
 
             if (this.expandedRowGroups) {
@@ -1717,7 +1688,6 @@ export default {
                 }
 
                 if (restoredState.expandedRows) {
-                    this.d_expandedRowKeys = restoredState.expandedRowKeys;
                     this.$emit('update:expandedRows', restoredState.expandedRows);
                 }
 
diff --git a/components/lib/datatable/TableBody.vue b/components/lib/datatable/TableBody.vue
index 72383249b..743290cd3 100755
--- a/components/lib/datatable/TableBody.vue
+++ b/components/lib/datatable/TableBody.vue
@@ -1,128 +1,78 @@
 <template>
     <tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody', ptmTBodyOptions)">
         <template v-if="!empty">
-            <template v-for="(rowData, index) of value">
-                <tr
-                    v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))"
-                    :key="getRowKey(rowData, getRowIndex(index)) + '_subheader'"
-                    :class="cx('rowGroupHeader')"
-                    :style="rowGroupHeaderStyle"
-                    role="row"
-                    v-bind="ptm('rowGroupHeader')"
-                >
-                    <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }">
-                        <button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="ptm('rowGroupToggler')">
-                            <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
-                            <template v-else>
-                                <span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
-                                <ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
-                                <span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
-                                <ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
-                            </template>
-                        </button>
-                        <component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
-                    </td>
-                </tr>
-                <tr
-                    v-if="expandableRowGroups ? isRowGroupExpanded(rowData) : true"
-                    :key="getRowKey(rowData, getRowIndex(index))"
-                    :class="getRowClass(rowData)"
-                    :style="getRowStyle(rowData)"
-                    :tabindex="setRowTabindex(index)"
-                    role="row"
-                    :aria-selected="selectionMode ? isSelected(rowData) : null"
-                    @click="onRowClick($event, rowData, getRowIndex(index))"
-                    @dblclick="onRowDblClick($event, rowData, getRowIndex(index))"
-                    @contextmenu="onRowRightClick($event, rowData, getRowIndex(index))"
-                    @touchend="onRowTouchEnd($event)"
-                    @keydown.self="onRowKeyDown($event, rowData, getRowIndex(index))"
-                    @mousedown="onRowMouseDown($event)"
-                    @dragstart="onRowDragStart($event, getRowIndex(index))"
-                    @dragover="onRowDragOver($event, getRowIndex(index))"
-                    @dragleave="onRowDragLeave($event)"
-                    @dragend="onRowDragEnd($event)"
-                    @drop="onRowDrop($event)"
-                    v-bind="getBodyRowPTOptions('bodyRow', rowData, index)"
-                    :data-p-selectable-row="selectionMode ? true : false"
-                    :data-p-highlight="selection && isSelected(rowData)"
-                    :data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu(rowData)"
-                >
-                    <template v-for="(col, i) of columns">
-                        <DTBodyCell
-                            v-if="shouldRenderBodyCell(value, col, getRowIndex(index))"
-                            :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i"
-                            :rowData="rowData"
-                            :column="col"
-                            :rowIndex="getRowIndex(index)"
-                            :index="i"
-                            :selected="isSelected(rowData)"
-                            :frozenRow="frozenRow"
-                            :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, getRowIndex(index)) : null"
-                            :editMode="editMode"
-                            :editing="editMode === 'row' && isRowEditing(rowData)"
-                            :editingMeta="editingMeta"
-                            :responsiveLayout="responsiveLayout"
-                            :virtualScrollerContentProps="virtualScrollerContentProps"
-                            :ariaControls="expandedRowId + '_' + index + '_expansion'"
-                            :name="nameAttributeSelector"
-                            :isRowExpanded="isRowExpanded(rowData)"
-                            :expandedRowIcon="expandedRowIcon"
-                            :collapsedRowIcon="collapsedRowIcon"
-                            @radio-change="onRadioChange($event)"
-                            @checkbox-change="onCheckboxChange($event)"
-                            @row-toggle="onRowToggle($event)"
-                            @cell-edit-init="onCellEditInit($event)"
-                            @cell-edit-complete="onCellEditComplete($event)"
-                            @cell-edit-cancel="onCellEditCancel($event)"
-                            @row-edit-init="onRowEditInit($event)"
-                            @row-edit-save="onRowEditSave($event)"
-                            @row-edit-cancel="onRowEditCancel($event)"
-                            @editing-meta-change="onEditingMetaChange"
-                            :unstyled="unstyled"
-                            :pt="pt"
-                        />
-                    </template>
-                </tr>
-                <tr
-                    v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)"
-                    :key="getRowKey(rowData, getRowIndex(index)) + '_expansion'"
-                    :id="expandedRowId + '_' + index + '_expansion'"
-                    :class="cx('rowExpansion')"
-                    role="row"
-                    v-bind="ptm('rowExpansion')"
-                >
-                    <td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowExpansionCell') }">
-                        <component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
-                    </td>
-                </tr>
-                <tr
-                    v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))"
-                    :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'"
-                    :class="cx('rowGroupFooter')"
-                    role="row"
-                    v-bind="ptm('rowGroupFooter')"
-                >
-                    <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupFooterCell') }">
-                        <component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
-                    </td>
-                </tr>
+            <template v-for="(rowData, rowIndex) of value" :key="rowIndex">
+                <DTBodyRow
+                    :rowData="rowData"
+                    :index="rowIndex"
+                    :value="value"
+                    :columns="columns"
+                    :frozenRow="frozenRow"
+                    :empty="empty"
+                    :first="first"
+                    :dataKey="dataKey"
+                    :selection="selection"
+                    :selectionKeys="selectionKeys"
+                    :selectionMode="selectionMode"
+                    :contextMenu="contextMenu"
+                    :contextMenuSelection="contextMenuSelection"
+                    :rowGroupMode="rowGroupMode"
+                    :groupRowsBy="groupRowsBy"
+                    :expandableRowGroups="expandableRowGroups"
+                    :rowClass="rowClass"
+                    :rowStyle="rowStyle"
+                    :editMode="editMode"
+                    :compareSelectionBy="compareSelectionBy"
+                    :scrollable="scrollable"
+                    :expandedRowIcon="expandedRowIcon"
+                    :collapsedRowIcon="collapsedRowIcon"
+                    :expandedRows="expandedRows"
+                    :expandedRowGroups="expandedRowGroups"
+                    :editingRows="editingRows"
+                    :editingRowKeys="editingRowKeys"
+                    :templates="templates"
+                    :responsiveLayout="responsiveLayout"
+                    :virtualScrollerContentProps="virtualScrollerContentProps"
+                    :isVirtualScrollerDisabled="isVirtualScrollerDisabled"
+                    :editingMeta="editingMeta"
+                    :rowGroupHeaderStyle="rowGroupHeaderStyle"
+                    :expandedRowId="expandedRowId"
+                    :nameAttributeSelector="nameAttributeSelector"
+                    @rowgroup-toggle="$emit('rowgroup-toggle', $event)"
+                    @row-click="$emit('row-click', $event)"
+                    @row-dblclick="$emit('row-dblclick', $event)"
+                    @row-rightclick="$emit('row-rightclick', $event)"
+                    @row-touchend="$emit('row-touchend', $event)"
+                    @row-keydown="$emit('row-keydown', $event)"
+                    @row-mousedown="$emit('row-mousedown', $event)"
+                    @row-dragstart="$emit('row-dragstart', $event)"
+                    @row-dragover="$emit('row-dragover', $event)"
+                    @row-dragleave="$emit('row-dragleave', $event)"
+                    @row-dragend="$emit('row-dragend', $event)"
+                    @row-drop="$emit('row-drop', $event)"
+                    @row-toggle="$emit('row-toggle', $event)"
+                    @radio-change="$emit('radio-change', $event)"
+                    @checkbox-change="$emit('checkbox-change', $event)"
+                    @cell-edit-init="$emit('cell-edit-init', $event)"
+                    @cell-edit-complete="$emit('cell-edit-complete', $event)"
+                    @cell-edit-cancel="$emit('cell-edit-cancel', $event)"
+                    @row-edit-init="$emit('row-edit-init', $event)"
+                    @row-edit-save="$emit('row-edit-save', $event)"
+                    @row-edit-cancel="$emit('row-edit-cancel', $event)"
+                    @editing-meta-change="$emit('editing-meta-change', $event)"
+                    :unstyled="unstyled"
+                    :pt="pt"
+                />
             </template>
         </template>
-        <tr v-else :class="cx('emptyMessage')" role="row" v-bind="ptm('emptyMessage')">
-            <td :colspan="columnsLength" v-bind="{ ...getColumnPT('bodycell'), ...ptm('emptyMessageCell') }">
-                <component v-if="templates.empty" :is="templates.empty" />
-            </td>
-        </tr>
+        <DTBodyRow v-else :empty="empty" :columns="columns" :templates="templates" />
     </tbody>
 </template>
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import ChevronDownIcon from 'primevue/icons/chevrondown';
-import ChevronRightIcon from 'primevue/icons/chevronright';
-import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
-import { mergeProps } from 'vue';
-import BodyCell from './BodyCell.vue';
+import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import BodyRow from './BodyRow.vue';
 
 export default {
     name: 'TableBody',
@@ -202,11 +152,7 @@ export default {
             default: null
         },
         expandedRows: {
-            type: Array,
-            default: null
-        },
-        expandedRowKeys: {
-            type: null,
+            type: [Array, Object],
             default: null
         },
         selection: {
@@ -280,9 +226,7 @@ export default {
     },
     data() {
         return {
-            rowGroupHeaderStyleObject: {},
-            tabindexArray: [],
-            isARowSelected: false
+            rowGroupHeaderStyleObject: {}
         };
     },
     mounted() {
@@ -304,271 +248,6 @@ export default {
         }
     },
     methods: {
-        columnProp(col, prop) {
-            return ObjectUtils.getVNodeProp(col, prop);
-        },
-        getColumnPT(key) {
-            const columnMetaData = {
-                parent: {
-                    instance: this,
-                    props: this.$props,
-                    state: this.$data
-                }
-            };
-
-            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp({}), key, columnMetaData));
-        },
-        getColumnProp(column) {
-            return column.props && column.props.pt ? column.props.pt : undefined; //@todo
-        },
-        getBodyRowPTOptions(key, rowdata, index) {
-            return this.ptm(key, {
-                context: {
-                    index,
-                    selectable: this.$parentInstance?.$parentInstance?.rowHover || this.$parentInstance?.$parentInstance?.selectionMode,
-                    selected: this.isSelected(rowdata),
-                    stripedRows: this.$parentInstance?.$parentInstance?.stripedRows || false
-                }
-            });
-        },
-        shouldRenderRowGroupHeader(value, rowData, i) {
-            let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
-            let prevRowData = value[i - 1];
-
-            if (prevRowData) {
-                let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
-
-                return currentRowFieldData !== previousRowFieldData;
-            } else {
-                return true;
-            }
-        },
-        getRowKey(rowData, index) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey) : this.getRowIndex(index);
-        },
-        getRowIndex(index) {
-            const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
-
-            return getItemOptions ? getItemOptions(index).index : index;
-        },
-        getRowStyle(rowData) {
-            if (this.rowStyle) {
-                return this.rowStyle(rowData);
-            }
-        },
-        getRowClass(rowData) {
-            let rowStyleClass = [];
-
-            if (this.rowClass) {
-                let rowClassValue = this.rowClass(rowData);
-
-                if (rowClassValue) {
-                    rowStyleClass.push(rowClassValue);
-                }
-            }
-
-            return [this.cx('row', { rowData }), rowStyleClass];
-        },
-        shouldRenderRowGroupFooter(value, rowData, i) {
-            if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
-                return false;
-            } else {
-                let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
-                let nextRowData = value[i + 1];
-
-                if (nextRowData) {
-                    let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
-
-                    return currentRowFieldData !== nextRowFieldData;
-                } else {
-                    return true;
-                }
-            }
-        },
-        shouldRenderBodyCell(value, column, i) {
-            if (this.rowGroupMode) {
-                if (this.rowGroupMode === 'subheader') {
-                    return this.groupRowsBy !== this.columnProp(column, 'field');
-                } else if (this.rowGroupMode === 'rowspan') {
-                    if (this.isGrouped(column)) {
-                        let prevRowData = value[i - 1];
-
-                        if (prevRowData) {
-                            let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], this.columnProp(column, 'field'));
-                            let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.columnProp(column, 'field'));
-
-                            return currentRowFieldData !== previousRowFieldData;
-                        } else {
-                            return true;
-                        }
-                    } else {
-                        return true;
-                    }
-                }
-            } else {
-                return !this.columnProp(column, 'hidden');
-            }
-        },
-        calculateRowGroupSize(value, column, index) {
-            if (this.isGrouped(column)) {
-                let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], this.columnProp(column, 'field'));
-                let nextRowFieldData = currentRowFieldData;
-                let groupRowSpan = 0;
-
-                while (currentRowFieldData === nextRowFieldData) {
-                    groupRowSpan++;
-                    let nextRowData = value[++index];
-
-                    if (nextRowData) {
-                        nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.columnProp(column, 'field'));
-                    } else {
-                        break;
-                    }
-                }
-
-                return groupRowSpan === 1 ? null : groupRowSpan;
-            } else {
-                return null;
-            }
-        },
-        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;
-            } else {
-                return false;
-            }
-        },
-        isRowEditing(rowData) {
-            if (rowData && this.editingRows) {
-                if (this.dataKey) return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                else return this.findIndex(rowData, this.editingRows) > -1;
-            }
-
-            return false;
-        },
-        isRowExpanded(rowData) {
-            if (rowData && this.expandedRows) {
-                if (this.dataKey) return this.expandedRowKeys ? this.expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                else return this.findIndex(rowData, this.expandedRows) > -1;
-            }
-
-            return false;
-        },
-        isRowGroupExpanded(rowData) {
-            if (this.expandableRowGroups && this.expandedRowGroups) {
-                let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
-
-                return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
-            }
-
-            return false;
-        },
-        isSelected(rowData) {
-            if (rowData && this.selection) {
-                if (this.dataKey) {
-                    return this.selectionKeys ? this.selectionKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                } else {
-                    if (this.selection instanceof Array) return this.findIndexInSelection(rowData) > -1;
-                    else return this.equals(rowData, this.selection);
-                }
-            }
-
-            return false;
-        },
-        isSelectedWithContextMenu(rowData) {
-            if (rowData && this.contextMenuSelection) {
-                return this.equals(rowData, this.contextMenuSelection, this.dataKey);
-            }
-
-            return false;
-        },
-        findIndexInSelection(rowData) {
-            return this.findIndex(rowData, this.selection);
-        },
-        findIndex(rowData, collection) {
-            let index = -1;
-
-            if (collection && collection.length) {
-                for (let i = 0; i < collection.length; i++) {
-                    if (this.equals(rowData, collection[i])) {
-                        index = i;
-                        break;
-                    }
-                }
-            }
-
-            return index;
-        },
-        equals(data1, data2) {
-            return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey);
-        },
-        onRowGroupToggle(event, data) {
-            this.$emit('rowgroup-toggle', { originalEvent: event, data: data });
-        },
-        onRowClick(event, rowData, rowIndex) {
-            this.$emit('row-click', { originalEvent: event, data: rowData, index: rowIndex });
-        },
-        onRowDblClick(event, rowData, rowIndex) {
-            this.$emit('row-dblclick', { originalEvent: event, data: rowData, index: rowIndex });
-        },
-        onRowRightClick(event, rowData, rowIndex) {
-            this.$emit('row-rightclick', { originalEvent: event, data: rowData, index: rowIndex });
-        },
-        onRowTouchEnd(event) {
-            this.$emit('row-touchend', event);
-        },
-        onRowKeyDown(event, rowData, rowIndex) {
-            this.$emit('row-keydown', { originalEvent: event, data: rowData, index: rowIndex });
-        },
-        onRowMouseDown(event) {
-            this.$emit('row-mousedown', event);
-        },
-        onRowDragStart(event, rowIndex) {
-            this.$emit('row-dragstart', { originalEvent: event, index: rowIndex });
-        },
-        onRowDragOver(event, rowIndex) {
-            this.$emit('row-dragover', { originalEvent: event, index: rowIndex });
-        },
-        onRowDragLeave(event) {
-            this.$emit('row-dragleave', event);
-        },
-        onRowDragEnd(event) {
-            this.$emit('row-dragend', event);
-        },
-        onRowDrop(event) {
-            this.$emit('row-drop', event);
-        },
-        onRowToggle(event) {
-            this.$emit('row-toggle', event);
-        },
-        onRadioChange(event) {
-            this.$emit('radio-change', event);
-        },
-        onCheckboxChange(event) {
-            this.$emit('checkbox-change', event);
-        },
-        onCellEditInit(event) {
-            this.$emit('cell-edit-init', event);
-        },
-        onCellEditComplete(event) {
-            this.$emit('cell-edit-complete', event);
-        },
-        onCellEditCancel(event) {
-            this.$emit('cell-edit-cancel', event);
-        },
-        onRowEditInit(event) {
-            this.$emit('row-edit-init', event);
-        },
-        onRowEditSave(event) {
-            this.$emit('row-edit-save', event);
-        },
-        onRowEditCancel(event) {
-            this.$emit('row-edit-cancel', event);
-        },
-        onEditingMetaChange(event) {
-            this.$emit('editing-meta-change', event);
-        },
         updateFrozenRowStickyPosition() {
             this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
         },
@@ -587,26 +266,9 @@ export default {
             const contentRef = this.getVirtualScrollerProp('contentRef');
 
             contentRef && contentRef(el);
-        },
-        setRowTabindex(index) {
-            if (this.selection === null && (this.selectionMode === 'single' || this.selectionMode === 'multiple')) {
-                return index === 0 ? 0 : -1;
-            }
-
-            return -1;
         }
     },
     computed: {
-        columnsLength() {
-            let hiddenColLength = 0;
-
-            this.columns.forEach((column) => {
-                if (this.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
-                if (this.columnProp(column, 'hidden')) hiddenColLength++;
-            });
-
-            return this.columns ? this.columns.length - hiddenColLength : 0;
-        },
         rowGroupHeaderStyle() {
             if (this.scrollable) {
                 return { top: this.rowGroupHeaderStyleObject.top };
@@ -617,24 +279,22 @@ export default {
         bodyStyle() {
             return this.getVirtualScrollerProp('contentStyle');
         },
-        expandedRowId() {
-            return UniqueComponentId();
-        },
-        nameAttributeSelector() {
-            return UniqueComponentId();
-        },
         ptmTBodyOptions() {
             return {
                 context: {
                     scrollable: this.$parentInstance?.$parentInstance?.scrollable
                 }
             };
+        },
+        expandedRowId() {
+            return UniqueComponentId();
+        },
+        nameAttributeSelector() {
+            return UniqueComponentId();
         }
     },
     components: {
-        DTBodyCell: BodyCell,
-        ChevronDownIcon: ChevronDownIcon,
-        ChevronRightIcon: ChevronRightIcon
+        DTBodyRow: BodyRow
     }
 };
 </script>
diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
index 1b46d9c72..ae45cb41a 100644
--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@@ -368,7 +368,7 @@ const classes = {
     rowgroupHeader: 'p-rowgroup-header',
     rowGroupToggler: 'p-row-toggler p-link',
     rowGroupTogglerIcon: 'p-row-toggler-icon',
-    row: ({ instance, props, rowData }) => {
+    row: ({ instance, props }) => {
         let rowStyleClass = [];
 
         if (props.selectionMode) {
@@ -377,13 +377,13 @@ const classes = {
 
         if (props.selection) {
             rowStyleClass.push({
-                'p-highlight': instance.isSelected(rowData)
+                'p-highlight': instance.isSelected
             });
         }
 
         if (props.contextMenuSelection) {
             rowStyleClass.push({
-                'p-highlight-contextmenu': instance.isSelectedWithContextMenu(rowData)
+                'p-highlight-contextmenu': instance.isSelectedWithContextMenu
             });
         }
 
diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js
index e8e23f106..a6c1f5e10 100755
--- a/components/lib/utils/ObjectUtils.js
+++ b/components/lib/utils/ObjectUtils.js
@@ -203,13 +203,15 @@ export default {
     },
 
     getVNodeProp(vnode, prop) {
-        let props = vnode.props;
+        if (vnode) {
+            let props = vnode.props;
 
-        if (props) {
-            let kebabProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-            let propName = Object.prototype.hasOwnProperty.call(props, kebabProp) ? kebabProp : prop;
+            if (props) {
+                let kebabProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+                let propName = Object.prototype.hasOwnProperty.call(props, kebabProp) ? kebabProp : prop;
 
-            return vnode.type.extends.props[prop].type === Boolean && props[propName] === '' ? true : props[propName];
+                return vnode.type.extends.props[prop].type === Boolean && props[propName] === '' ? true : props[propName];
+            }
         }
 
         return null;
diff --git a/doc/datatable/RowExpansionDoc.vue b/doc/datatable/RowExpansionDoc.vue
index e429a3b26..dbda2780c 100644
--- a/doc/datatable/RowExpansionDoc.vue
+++ b/doc/datatable/RowExpansionDoc.vue
@@ -223,7 +223,7 @@ export default {
             this.$toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
         },
         expandAll() {
-            this.expandedRows = this.products.filter((p) => p.id);
+            this.expandedRows = this.products.reduce((acc, p) => (acc[p.id] = true) && acc, {});
         },
         collapseAll() {
             this.expandedRows = null;
@@ -352,7 +352,7 @@ const onRowCollapse = (event) => {
     toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
 };
 const expandAll = () => {
-    expandedRows.value = products.value.filter((p) => p.id);
+    expandedRows.value = products.value.reduce((acc, p) => (acc[p.id] = true) && acc, {});
 };
 const collapseAll = () => {
     expandedRows.value = null;
@@ -437,7 +437,7 @@ const getOrderSeverity = (order) => {
             this.$toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
         },
         expandAll() {
-            this.expandedRows = this.products.filter((p) => p.id);
+            this.expandedRows = this.products.reduce((acc, p) => (acc[p.id] = true) && acc, {});
         },
         collapseAll() {
             this.expandedRows = null;