Fixed #3801 - DataTable: Row edits when enabled doesn't work with pagination

pull/3815/head
mertsincan 2023-03-27 09:37:20 +01:00
parent 9b9504ffe1
commit 8388b44f33
2 changed files with 18 additions and 5 deletions

View File

@ -80,6 +80,7 @@
:frozenRow="true" :frozenRow="true"
class="p-datatable-frozen-tbody" class="p-datatable-frozen-tbody"
:columns="slotProps.columns" :columns="slotProps.columns"
:first="d_first"
:dataKey="dataKey" :dataKey="dataKey"
:selection="selection" :selection="selection"
:selectionKeys="d_selectionKeys" :selectionKeys="d_selectionKeys"
@ -134,6 +135,7 @@
:class="slotProps.styleClass" :class="slotProps.styleClass"
:columns="slotProps.columns" :columns="slotProps.columns"
:empty="empty" :empty="empty"
:first="d_first"
:dataKey="dataKey" :dataKey="dataKey"
:selection="selection" :selection="selection"
:selectionKeys="d_selectionKeys" :selectionKeys="d_selectionKeys"

View File

@ -1,8 +1,14 @@
<template> <template>
<tbody :ref="bodyRef" class="p-datatable-tbody" role="rowgroup" :style="bodyStyle"> <tbody :ref="bodyRef" class="p-datatable-tbody" role="rowgroup" :style="bodyStyle">
<template v-if="!empty"> <template v-if="!empty">
<template v-for="(rowData, index) of value" :key="getRowKey(rowData, getRowIndex(index)) + '_subheader'"> <template v-for="(rowData, index) of value">
<tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))" class="p-rowgroup-header" :style="rowGroupHeaderStyle" role="row"> <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"> <td :colspan="columnsLength - 1">
<button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button"> <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button">
<span :class="rowGroupTogglerIcon(rowData)"></span> <span :class="rowGroupTogglerIcon(rowData)"></span>
@ -30,9 +36,10 @@
@dragend="onRowDragEnd($event)" @dragend="onRowDragEnd($event)"
@drop="onRowDrop($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 <DTBodyCell
v-if="shouldRenderBodyCell(value, col, getRowIndex(index))" v-if="shouldRenderBodyCell(value, col, getRowIndex(index))"
:key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i"
:rowData="rowData" :rowData="rowData"
:column="col" :column="col"
:rowIndex="getRowIndex(index)" :rowIndex="getRowIndex(index)"
@ -144,6 +151,10 @@ export default {
type: Array, type: Array,
default: null default: null
}, },
first: {
type: Number,
default: 0
},
dataKey: { dataKey: {
type: String, type: String,
default: null default: null
@ -275,12 +286,12 @@ export default {
} }
}, },
getRowKey(rowData, index) { 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) { getRowIndex(index) {
const getItemOptions = this.getVirtualScrollerProp('getItemOptions'); const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
return getItemOptions ? getItemOptions(index).index : index; return getItemOptions ? getItemOptions(index).index : this.first + index;
}, },
getRowStyle(rowData) { getRowStyle(rowData) {
if (this.rowStyle) { if (this.rowStyle) {