fix: Added pagination shortcuts for grid

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -5,6 +5,7 @@ import type { ColumnReqType, ColumnType, PaginatedType, TableType, ViewType } fr
 import { UITypes, ViewTypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import { useColumnDrag } from './useColumnDrag'
 
+import usePaginationShortcuts from './usePaginationShortcuts'
 import {
   ActiveViewInj,
   CellUrlDisableOverlayInj,
@@ -187,6 +188,11 @@ const { onDrag, onDragStart, draggedCol, dragColPlaceholderDomRef, toBeDroppedCo
   gridWrapper,
 })
 
+const { onLeft, onRight, onUp, onDown } = usePaginationShortcuts({
+  paginationDataRef,
+  changePage: changePage as any,
+})
+
 // #Variables
 const addColumnDropdown = ref(false)
 
@@ -1204,6 +1210,12 @@ const loaderText = computed(() => {
     }
   }
 })
+
+// Keyboard shortcuts for pagination
+onKeyStroke('ArrowLeft', onLeft)
+onKeyStroke('ArrowRight', onRight)
+onKeyStroke('ArrowUp', onUp)
+onKeyStroke('ArrowDown', onDown)
 </script>
 
 <template>

packages/nc-gui/components/smartsheet/grid/usePaginationShortcuts.ts

@@ -0,0 +1,73 @@
+import axios from 'axios'
+import type { PaginatedType } from 'nocodb-sdk'
+
+const usePaginationShortcuts = ({
+  changePage,
+  paginationDataRef,
+}: {
+  changePage: (page: number) => Promise<void> | undefined
+  paginationDataRef: Ref<PaginatedType | undefined>
+}) => {
+  const { isViewDataLoading } = storeToRefs(useViewsStore())
+  const getTotalPages = () => {
+    return Math.ceil(paginationDataRef.value!.totalRows! / paginationDataRef.value!.pageSize!)
+  }
+
+  const changePageWithLoading = async (page: number) => {
+    isViewDataLoading.value = true
+    try {
+      await changePage?.(page)
+      isViewDataLoading.value = false
+    } catch (e) {
+      if (axios.isCancel(e)) return
+
+      isViewDataLoading.value = false
+    }
+  }
+
+  const onLeft = async (e: KeyboardEvent) => {
+    if (!e.altKey) return
+    e.preventDefault()
+
+    const page = paginationDataRef.value!.page! - 1
+    if (page < 1) return
+
+    await changePageWithLoading(page)
+  }
+
+  const onRight = async (e: KeyboardEvent) => {
+    if (!e.altKey) return
+    e.preventDefault()
+
+    const page = paginationDataRef.value!.page! + 1
+
+    if (page > getTotalPages()) return
+
+    await changePageWithLoading(page)
+  }
+
+  const onDown = async (e: KeyboardEvent) => {
+    if (!e.altKey) return
+    e.preventDefault()
+
+    const page = 1
+
+    await changePageWithLoading(page)
+  }
+
+  const onUp = async (e: KeyboardEvent) => {
+    if (!e.altKey) return
+    e.preventDefault()
+
+    await changePageWithLoading(getTotalPages())
+  }
+
+  return {
+    onLeft,
+    onRight,
+    onUp,
+    onDown,
+  }
+}
+
+export default usePaginationShortcuts