massage data

frontend/src/components/common/DataTable.vue

@@ -1,6 +1,10 @@
 <template lang="html">
 	<!-- Filter Controls Panel -->
-	<div v-if="hasFilters" class="filter-controls-panel mb-3 p-3 bg-light rounded">
+	<div
+		v-if="hasFilters"
+		:key="`filter-controls-${tableName}`"
+		class="filter-controls-panel mb-3 p-3 bg-light rounded"
+	>
 		<div class="row g-3 align-items-end">
 			<div v-for="col in filterableColumns" :key="col.fieldName" class="col-md-4 col-lg-3">
 				<label :for="`filter-${col.fieldName}`" class="form-label small fw-semibold">
@@ -41,7 +45,11 @@
 	</div>
 
 	<!-- Page Jump Controls -->
-	<div v-if="totalPages > 1" class="page-controls-panel mb-3 p-2 bg-light rounded">
+	<div
+		v-if="totalPages > 1"
+		:key="`page-controls-${totalPages}-${getPageInfo().total}`"
+		class="page-controls-panel mb-3 p-2 bg-light rounded"
+	>
 		<div class="row g-3 align-items-center">
 			<div class="col-auto">
 				<small class="text-muted">Quick navigation:</small>
@@ -278,6 +286,28 @@ const filterRef = computed({
 	},
 });
 
+// Watch for changes in total records to update page controls reactivity
+watch(
+	() => props.totalRecords,
+	(newTotal) => {
+		if (props.lazy && newTotal !== undefined) {
+			// Force reactivity update for page controls
+			selectedPageJump.value = "";
+		}
+	},
+);
+
+// Watch for data changes to update page controls for non-lazy tables
+watch(
+	() => props.data,
+	(newData) => {
+		if (!props.lazy && newData) {
+			// Force reactivity update for page controls
+			selectedPageJump.value = "";
+		}
+	},
+);
+
 // Watch for filter changes to sync match mode changes
 watch(
 	filterRef,