feat(table): improve watching sortedRows for reactivity

jd-solanki · jd-solanki · commit 8b700eed54c7 · 2022-11-10T22:11:32.000+05:30
diff --git a/packages/anu-vue/src/components/table/ATable.tsx b/packages/anu-vue/src/components/table/ATable.tsx
@@ -231,7 +231,7 @@ export const ATable = defineComponent({
     )
 
     // 👉 Paginated Rows
-    const paginatedRows = computed(() => sortedRows.value)
+    const paginatedRows = ref<any[]>([])
 
     // TODO: Check passing toRef(props, 'pageSize') to useOffsetPagination and use returned `currentPageSize` for reactive pgeSize prop
     const currentPageSize = ref(props.pageSize)
@@ -273,7 +273,7 @@ export const ATable = defineComponent({
         paginateRows({ currentPage: currentPage.value, currentPageSize: currentPageSize.value })
     }
 
-    watch([_search, sortedCols], recalculateCurrentPageData, { deep: true, immediate: true })
+    watch([_search, sortedCols, sortedRows], recalculateCurrentPageData, { deep: true, immediate: true })
 
     // 👉 rowsToRender
     const rowsToRender = computed(() => isSST.value ? _serverRows.value : paginatedRows.value)

Original file line number	Diff line number	Diff line change
`@@ -231,7 +231,7 @@ export const ATable = defineComponent({`
`231`	`231`	`)`
`232`	`232`
`233`	`233`	`// 👉 Paginated Rows`
`234`		`- const paginatedRows = computed(() => sortedRows.value)`
	`234`	`+ const paginatedRows = ref<any[]>([])`
`235`	`235`
`236`	`236`	// TODO: Check passing toRef(props, 'pageSize') to useOffsetPagination and use returned `currentPageSize` for reactive pgeSize prop
`237`	`237`	`const currentPageSize = ref(props.pageSize)`
`@@ -273,7 +273,7 @@ export const ATable = defineComponent({`
`273`	`273`	`paginateRows({ currentPage: currentPage.value, currentPageSize: currentPageSize.value })`
`274`	`274`	`}`
`275`	`275`
`276`		`- watch([_search, sortedCols], recalculateCurrentPageData, { deep: true, immediate: true })`
	`276`	`+ watch([_search, sortedCols, sortedRows], recalculateCurrentPageData, { deep: true, immediate: true })`
`277`	`277`
`278`	`278`	`// 👉 rowsToRender`
`279`	`279`	`const rowsToRender = computed(() => isSST.value ? _serverRows.value : paginatedRows.value)`