fix(table): wrong pagination meta on filter

jd-solanki · jd-solanki · commit 2fb3963d647f · 2022-12-26T10:17:17.000+05:30
diff --git a/packages/anu-vue/src/components/data-table/ADataTable.vue b/packages/anu-vue/src/components/data-table/ADataTable.vue
@@ -30,7 +30,7 @@ const _tableProps = reactivePick(props, Object.keys(tableProps).filter(k => !['r
 
 const _rows = ref<Record<string, unknown>[]>(typeof props.rows !== 'function' ? props.rows : [])
 const serverTotal = ref(0)
-const _total = computed(() => typeof props.rows === 'function' ? serverTotal.value : props.rows.length)
+const _total = ref(typeof props.rows === 'function' ? serverTotal.value : props.rows.length)
 
 // SECTION Calculate column
 /*
@@ -130,6 +130,9 @@ const fetchRows = () => {
         : col.name),
     )
 
+    // Update total
+    _total.value = filteredRows.value.length
+
     // Sort
     const { results: sortedRows } = useSort(
       filteredRows,
@@ -238,11 +241,10 @@ const renderHeaderRightSlot = (typeof props.search === 'boolean' && props.search
 
 // 👉 Pagination meta
 const paginationMeta = computed(() => {
-  const from = typeof props.rows === 'function'
-    ? _rows.value.length
-    : props.rows.length
-      ? (currentPage.value - 1) * currentPageSize.value + 1
-      : 0
+  const from = _rows.value.length
+    ? (currentPage.value - 1) * currentPageSize.value + 1
+    : 0
+
   const to = isLastPage.value
     ? _total.value
     : currentPage.value * currentPageSize.value
diff --git a/packages/anu-vue/test/ATable.test.ts b/packages/anu-vue/test/ATable.test.ts
@@ -89,4 +89,30 @@ describe('Testing ATable & ADataTable', async () => {
     expect(upArrow.exists()).toBe(true)
     expect(downArrow.exists()).toBe(true)
   })
+
+  it('if we filter the rows pagination should show correct information', async () => {
+    const wrapper = mount(ADataTable, {
+      props: {
+        rows: nameList,
+        pageSize: 5,
+        search: true,
+      },
+    })
+
+    const pagination = wrapper.find('.a-data-table-pagination-meta')
+    const searchInput = wrapper.find('.a-card-typography-wrapper .a-input-input')
+
+    // check pagination
+    expect(pagination?.text()).toBe('1 - 5 of 10')
+
+    await searchInput.setValue('name1')
+
+    // check pagination
+    expect(pagination?.text()).toBe('1 - 2 of 2')
+
+    await searchInput.setValue('name4')
+
+    // check pagination
+    expect(pagination?.text()).toBe('1 - 1 of 1')
+  })
 })
