From c683d14969ea29ef0d8f94c1749c309ef5a9575c Mon Sep 17 00:00:00 2001
From: "tom.mcgurrin" <tom.mcgurrin@3squared.com>
Date: Wed, 26 Feb 2025 14:59:14 +0000
Subject: [PATCH 1/2] Fix Issue in with paging on table

- Assign a value to "first" in table component. This holds the value of the initial row index and allows us manipulte the page index. Doing this allows us to reset the index and therefore the page index back to zero when changing the page size. Without this someone could be on page 2 with a page size of 10, change the page size to 20 and be stuck on a page that has nothing to display.
---
 .../ui/src/components/table/ForgeTable.vue    | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/table/ForgeTable.vue b/packages/ui/src/components/table/ForgeTable.vue
index 9c4f3b392..626ff84d0 100644
--- a/packages/ui/src/components/table/ForgeTable.vue
+++ b/packages/ui/src/components/table/ForgeTable.vue
@@ -3,7 +3,7 @@
     <span data-cy="above-table-slot" ><slot name="above-table" /></span>
     <DataTable class="w-100" :class="`${props.severity ? `forge-table-${props.severity}` : ''}`"
                v-bind="{...props, ...$attrs }" :pt="pt"  :rows="perPage" :total-records="total" :filter-display="props.filters ? 'row' : undefined" ref="forgeTable" data-cy="table"
-               @update:filters="emitUpdateFilter" @sort="emitSort" @page="emitPage" showHeaders>
+               @update:filters="emitUpdateFilter" @sort="emitSort" @page="emitPage" showHeaders :first="firstValueIndex">
       <template v-for="(_, name) in $slots as unknown as DataTableSlots" #[name]="slotProps">
         <slot :name="name" v-bind="slotProps || {}"></slot>
       </template>
@@ -90,6 +90,8 @@ const props = withDefaults(defineProps<ForgeTableProps>(), {
 const forgeTable = ref()
 const pageSizes = ref<Array<number>>([5, 10, 20, 50, 100])
 const perPage = ref<number>(10)
+const pageNumber = ref<number>(0);
+const firstValueIndex = ref<number>(0);
 
 const tableContext = ref<ForgeTableContext>({
   filters: props.filters,
@@ -163,14 +165,16 @@ const emitUpdateFilter = (filters: DataTableFilterMeta | undefined) => {
   emits('update:filters', filters)
 }
 const emitPage = (page : DataTablePageEvent) => {
-  tableContext.value.page = page.page
-
+  tableContext.value.page = pageNumber.value = page.page
+  setFirstIndex();
   emits("update:tableContext", tableContext.value)
   emits('page', page)
 }
 const emitPageSize = () => {
   tableContext.value.perPage = perPage.value
-  
+  //reset page index 
+  pageNumber.value = 0;
+  setFirstIndex();
   emits("update:tableContext", tableContext.value)
 }
 
@@ -181,4 +185,11 @@ watch(() => props.filters, (newValue) => {
 }, {deep: true})
 
 onMounted(() => emits("update:tableContext", tableContext.value))
+
+const setFirstIndex = () => 
+{
+  console.log('Setting First Index')
+  firstValueIndex.value = pageNumber.value++ * perPage.value;
+}
+
 </script>
\ No newline at end of file

From 053221bab5c172465ec12379b50f8df25f3e1504 Mon Sep 17 00:00:00 2001
From: "tom.mcgurrin" <tom.mcgurrin@3squared.com>
Date: Thu, 27 Feb 2025 12:09:12 +0000
Subject: [PATCH 2/2] Change logic so it actually sets page based on current
 row index

Change logic so it actually sets page based on current row index/ new page size
---
 packages/ui/src/components/table/ForgeTable.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/table/ForgeTable.vue b/packages/ui/src/components/table/ForgeTable.vue
index 626ff84d0..b0594f353 100644
--- a/packages/ui/src/components/table/ForgeTable.vue
+++ b/packages/ui/src/components/table/ForgeTable.vue
@@ -154,7 +154,9 @@ const exportData = () => {
 const emitSort = (sort: DataTableSortEvent) => {
   tableContext.value.sortDirection = sort.sortOrder === 1 ? 'Asc' : sort.sortOrder === -1 ? 'Desc' : 'None'
   tableContext.value.sortField = sort.sortField?.toString() ?? ''
-  
+  tableContext.value.page = pageNumber.value = 0;
+  setFirstIndex();
+
   emits("update:tableContext", tableContext.value)
   emits('sort', sort)
 }
@@ -166,14 +168,16 @@ const emitUpdateFilter = (filters: DataTableFilterMeta | undefined) => {
 }
 const emitPage = (page : DataTablePageEvent) => {
   tableContext.value.page = pageNumber.value = page.page
+  
   setFirstIndex();
   emits("update:tableContext", tableContext.value)
   emits('page', page)
 }
 const emitPageSize = () => {
   tableContext.value.perPage = perPage.value
-  //reset page index 
-  pageNumber.value = 0;
+  // Set page based on current index
+  tableContext.value.page = pageNumber.value = Math.floor(firstValueIndex.value/perPage.value)
+
   setFirstIndex();
   emits("update:tableContext", tableContext.value)
 }