refactor: add sticky button for adding row

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

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

@@ -1004,23 +1004,17 @@ const deleteSelectedRangeOfRows = () => {
               </template>
             </LazySmartsheetRow>
 
-            <tr
+            <tr v-if="isAddingEmptyRowAllowed">
-              v-if="isAddingEmptyRowAllowed"
+              <td
                 v-e="['c:row:add:grid-bottom']"
-              class="!sticky bottom-0 left-0 z-6 cursor-pointer"
+                :colspan="visibleColLength + 1"
+                class="text-left pointer nc-grid-add-new-cell cursor-pointer"
                 @click="addEmptyRow()"
               >
-              <td       style="border-top: 1px solid #eee !important;" :colspan="2" class="text-left pointer nc-grid-add-new-cell !sticky lef-0 !border-0">
+                <div class="px-2 w-full flex items-center text-gray-500">
-                <div class="px-2 w-full flex items-center text-gray-500 !z-5">
                   <component :is="iconMap.plus" class="text-pint-500 text-xs ml-2 text-primary" />
-
-                  <span class="ml-1">
-                    {{ $t('activity.addRow') }}
-                  </span>
                 </div>
               </td>
-
-              <td       style="border-top: 1px solid #eee !important;" v-e="['c:row:add:grid-bottom']" class="!z-0 !border-0" :colspan="visibleColLength - 1"></td>
             </tr>
           </tbody>
         </table>
@@ -1082,8 +1076,18 @@ const deleteSelectedRangeOfRows = () => {
       </a-dropdown>
     </div>
 
-    <LazySmartsheetPagination />
+    <div class="absolute bottom-4 left-4 z-4" @click="addEmptyRow()">
+      <a-button v-e="['c:row:add:grid-bottom', { footer: true }]" class="!rounded-xl">
+        <div class="flex items-center">
+          <component :is="iconMap.plus" class="text-pint-500 text-xs ml-2 text-primary" />
+          <span class="ml-1">
+            {{ $t('activity.addRow') }}
+          </span>
+        </div>
+      </a-button>
+    </div>
 
+    <LazySmartsheetPagination align-count-on-right> </LazySmartsheetPagination>
     <Suspense>
       <LazySmartsheetExpandedForm
         v-if="expandedFormRow && expandedFormDlg"

packages/nc-gui/components/smartsheet/Pagination.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { ChangePageInj, PaginationDataInj, computed, iconMap, inject } from '#imports'
 
+const props = defineProps<{
+  alignCountOnRight?: boolean
+}>()
+
 const paginatedData = inject(PaginationDataInj)!
 
 const changePage = inject(ChangePageInj)!
@@ -19,11 +23,15 @@ const page = computed({
 
 <template>
   <div class="flex items-center mb-1">
-    <span v-if="count !== null && count !== Infinity" class="caption ml-5 text-gray-500" data-testid="grid-pagination">
+    <div class="flex-1">
+      <span
+        v-if="!alignCountOnRight && count !== null && count !== Infinity"
+        class="caption ml-5 text-gray-500"
+        data-testid="grid-pagination"
+      >
         {{ count }} {{ count !== 1 ? $t('objects.records') : $t('objects.record') }}
       </span>
-
+    </div>
-    <div class="flex-1" />
 
     <a-pagination
       v-if="count !== Infinity"
@@ -44,7 +52,15 @@ const page = computed({
       </a-input>
     </div>
 
-    <div class="flex-1" />
+    <div class="flex-1 text-right pr-2">
+      <span
+        v-if="alignCountOnRight && count !== null && count !== Infinity"
+        class="caption mr-5 text-gray-500"
+        data-testid="grid-pagination"
+      >
+        {{ count }} {{ count !== 1 ? $t('objects.records') : $t('objects.record') }}
+      </span>
+    </div>
   </div>
 </template>