feat: add composable for data fetch

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -2,27 +2,13 @@
 import { inject, ComputedRef } from 'vue'
 import { isVirtualCol } from 'nocodb-sdk'
 import type { TableType } from 'nocodb-sdk'
-import { useNuxtApp } from '#app'
-import type { TabItem } from '~/composables/tabs'
+import { useData } from '~/composables/data'
 
-const tabMeta = inject<TabItem>('tabMeta')
 const meta = inject<ComputedRef<TableType>>('meta')
 
-const { project } = useProject()
-const rows = ref()
+const { loadData, paginationData, formattedData: data } = useData(meta)
 
-const { $api, $state } = useNuxtApp()
-
-const loadData = async () => {
-  const response = await $api.dbTableRow.list(
-    'noco',
-    project.value.id!,
-    meta.id
-  )
-
-  rows.value = response.list
-}
-onMounted(loadData)
+onMounted(() => loadData({}))
 </script>
 
 <template>
@@ -39,7 +25,7 @@ onMounted(loadData)
     </thead>
     <tbody>
       <tr
-        v-for="(row, rowIndex) in rows"
+        v-for="({ row }, rowIndex) in data"
         :key="rowIndex"
         class="nc-grid-row"
       >

packages/nc-gui-v2/composables/data.ts

@@ -0,0 +1,32 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { PaginatedType, TableType } from 'nocodb-sdk'
+import { useNuxtApp } from '#app'
+import { useProject } from '~/composables/project'
+
+export const formatData = (list: Array<Record<string, any>>) => list.map(row => ({
+  row: { ...row },
+  oldRow: { ...row },
+  rowMeta: {},
+}))
+
+export const useData = (meta: Ref<TableType> | ComputedRef<TableType>) => {
+  const data = ref<Array<Record<string, any>>>()
+  const formattedData = ref<Array<{ row: Record<string, any>; oldRow: Record<string, any> }>>()
+  const paginationData = ref<PaginatedType>()
+
+  const { project } = useProject()
+  const { $api } = useNuxtApp()
+
+  const loadData = async (params: { limit?: number; offset?: number; where?: string; sort?: string | string[]; fields?: string | string[] } = {}) => {
+    const response = await $api.dbTableRow.list(
+      'noco',
+      project.value.id,
+      meta.value.id,
+      params as any,
+    )
+    data.value = response.list
+    formattedData.value = formatData(response.list)
+  }
+
+  return { data, loadData, paginationData, formattedData }
+}