From 8388b44f33c62db3e58f0d7bd567df3ebb29daa3 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 27 Mar 2023 09:37:20 +0100
Subject: [PATCH] Fixed #3801 - DataTable: Row edits when enabled doesn't work
 with pagination

---
 components/lib/datatable/DataTable.vue |  2 ++
 components/lib/datatable/TableBody.vue | 21 ++++++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index ca3154854..9d2474c99 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -80,6 +80,7 @@
                             :frozenRow="true"
                             class="p-datatable-frozen-tbody"
                             :columns="slotProps.columns"
+                            :first="d_first"
                             :dataKey="dataKey"
                             :selection="selection"
                             :selectionKeys="d_selectionKeys"
@@ -134,6 +135,7 @@
                             :class="slotProps.styleClass"
                             :columns="slotProps.columns"
                             :empty="empty"
+                            :first="d_first"
                             :dataKey="dataKey"
                             :selection="selection"
                             :selectionKeys="d_selectionKeys"
diff --git a/components/lib/datatable/TableBody.vue b/components/lib/datatable/TableBody.vue
index fd708c9d2..4b315cc0e 100755
--- a/components/lib/datatable/TableBody.vue
+++ b/components/lib/datatable/TableBody.vue
@@ -1,8 +1,14 @@
 <template>
     <tbody :ref="bodyRef" class="p-datatable-tbody" role="rowgroup" :style="bodyStyle">
         <template v-if="!empty">
-            <template v-for="(rowData, index) of value" :key="getRowKey(rowData, getRowIndex(index)) + '_subheader'">
-                <tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))" class="p-rowgroup-header" :style="rowGroupHeaderStyle" role="row">
+            <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="p-rowgroup-header"
+                    :style="rowGroupHeaderStyle"
+                    role="row"
+                >
                     <td :colspan="columnsLength - 1">
                         <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button">
                             <span :class="rowGroupTogglerIcon(rowData)"></span>
@@ -30,9 +36,10 @@
                     @dragend="onRowDragEnd($event)"
                     @drop="onRowDrop($event)"
                 >
-                    <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+                    <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)"
@@ -144,6 +151,10 @@ export default {
             type: Array,
             default: null
         },
+        first: {
+            type: Number,
+            default: 0
+        },
         dataKey: {
             type: String,
             default: null
@@ -275,12 +286,12 @@ export default {
             }
         },
         getRowKey(rowData, index) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey) : 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;
+            return getItemOptions ? getItemOptions(index).index : this.first + index;
         },
         getRowStyle(rowData) {
             if (this.rowStyle) {