feat: has many relation creation

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>

packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue

@@ -70,11 +70,11 @@
       <fields
         v-model="showFields"
         :field-list="fieldList"
-              :meta="meta"
-              :is-locked="isLocked"
-              :fieldsOrder.sync="fieldsOrder"
-              :sqlUi="sqlUi"
-              :showSystemFields.sync="showSystemFields"
+        :meta="meta"
+        :is-locked="isLocked"
+        :fieldsOrder.sync="fieldsOrder"
+        :sqlUi="sqlUi"
+        :showSystemFields.sync="showSystemFields"
       />
 
       <sort-list
@@ -220,33 +220,39 @@
 
         </div>
         <template v-if="data">
-          <v-pagination
-            v-if="count !== Infinity"
-            style="max-width: 100%"
+          <pagination
+            :count="count"
+            :size="size"
             v-model="page"
-            :length="Math.ceil(count / size)"
-            :total-visible="8"
             @input="loadTableData"
-            color="primary lighten-2"
-          ></v-pagination>
-          <div v-else class="mx-auto d-flex align-center mt-n1 " style="max-width:250px">
-            <span class="caption" style="white-space: nowrap"> Change page:</span>
-            <v-text-field
-              class="ml-1 caption"
-              :full-width="false"
-              outlined
-              dense
-              hide-details
+          />
+          <!--  <v-pagination
+              v-if="count !== Infinity"
+              style="max-width: 100%"
               v-model="page"
-              @keydown.enter="loadTableData"
-              type="number"
-            >
-              <template #append>
-                <x-icon tooltip="Change page" small icon.class="mt-1" @click="loadTableData">mdi-keyboard-return
-                </x-icon>
-              </template>
-            </v-text-field>
-          </div>
+              :length="Math.ceil(count / size)"
+              :total-visible="8"
+              @input="loadTableData"
+              color="primary lighten-2"
+            ></v-pagination>
+            <div v-else class="mx-auto d-flex align-center mt-n1 " style="max-width:250px">
+              <span class="caption" style="white-space: nowrap"> Change page:</span>
+              <v-text-field
+                class="ml-1 caption"
+                :full-width="false"
+                outlined
+                dense
+                hide-details
+                v-model="page"
+                @keydown.enter="loadTableData"
+                type="number"
+              >
+                <template #append>
+                  <x-icon tooltip="Change page" small icon.class="mt-1" @click="loadTableData">mdi-keyboard-return
+                  </x-icon>
+                </template>
+              </v-text-field>
+            </div>-->
         </template>
         <!--      <div v-else class="d-flex justify-center py-4">-->
         <!--        <v-alert type="info" dense class="ma-1 flex-shrink-1">Table is empty</v-alert>-->
@@ -411,7 +417,7 @@
         @commented="reloadComments"
         :availableColumns="availableColumns"
         :nodes="nodes"
-        :queryParams="queryParams"
+        :query-params="queryParams"
       ></expanded-form>
 
     </v-dialog>
@@ -452,11 +458,13 @@ import SpreadsheetNavDrawer from "@/components/project/spreadsheet/components/sp
 import spreadsheet from "@/components/project/spreadsheet/mixins/spreadsheet";
 import LockMenu from "@/components/project/spreadsheet/components/lockMenu";
 import ExpandedForm from "@/components/project/spreadsheet/components/expandedForm";
+import Pagination from "@/components/project/spreadsheet/components/pagination";
 
 export default {
   mixins: [spreadsheet],
   name: "rows-xc-data-table",
   components: {
+    Pagination,
     ExpandedForm,
     LockMenu,
     SpreadsheetNavDrawer,