feat(nc-gui): change page on tab or arrowDown key press

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

@@ -208,7 +208,7 @@ const { onDrag, onDragStart, onDragEnd, draggedCol, dragColPlaceholderDomRef, to
   gridWrapper,
 })
 
-const { onLeft, onRight, onUp, onDown } = usePaginationShortcuts({
+const { onLeft, onRight, onUp, onDown, changePageWithLoading } = usePaginationShortcuts({
   paginationDataRef,
   changePage: changePage as any,
 })
@@ -558,7 +558,7 @@ const {
   clearSelectedRangeOfCells,
   makeEditable,
   scrollToCell,
-  (e: KeyboardEvent) => {
+  async (e: KeyboardEvent) => {
     // ignore navigating if picker(Date, Time, DateTime, Year)
     // or single/multi select options is open
     const activePickerOrDropdownEl = document.querySelector(
@@ -601,6 +601,62 @@ const {
         editEnabled.value = false
         return true
       }
+    } else if (e.key === 'Tab') {
+      if (activeCell.row === dataRef.value.length - 1 && activeCell.col === fields.value?.length - 1) {
+        e.preventDefault()
+        editEnabled.value = false
+
+        if (paginationDataRef.value?.isLastPage && isAddingEmptyRowAllowed.value) {
+          addEmptyRow()
+          activeCell.row = dataRef.value.length - 1
+          activeCell.col = 0
+          resetSelectedRange()
+
+          await nextTick()
+          ;(document.querySelector('td.cell.active') as HTMLInputElement | HTMLTextAreaElement)?.scrollIntoView({
+            behavior: 'smooth',
+          })
+
+          return true
+        } else if (!paginationDataRef.value?.isLastPage) {
+          await changePageWithLoading(paginationDataRef.value?.page! + 1)
+
+          await nextTick()
+
+          activeCell.row = 0
+          activeCell.col = 0
+
+          return true
+        }
+      }
+    } else if (e.key === 'ArrowDown') {
+      if (activeCell.row === dataRef.value.length - 1) {
+        e.preventDefault()
+        editEnabled.value = false
+
+        if (paginationDataRef.value?.isLastPage && isAddingEmptyRowAllowed.value) {
+          addEmptyRow()
+          activeCell.row = dataRef.value.length - 1
+          activeCell.col = 0
+          resetSelectedRange()
+
+          await nextTick()
+          ;(document.querySelector('td.cell.active') as HTMLInputElement | HTMLTextAreaElement)?.scrollIntoView({
+            behavior: 'smooth',
+          })
+
+          return true
+        } else if (!paginationDataRef.value?.isLastPage) {
+          await changePageWithLoading(paginationDataRef.value?.page! + 1)
+
+          await nextTick()
+
+          activeCell.row = 0
+          activeCell.col = activeCell.col
+
+          return true
+        }
+      }
     }
 
     if (cmdOrCtrl) {

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

@@ -75,6 +75,7 @@ const usePaginationShortcuts = ({
     onRight,
     onUp,
     onDown,
+    changePageWithLoading,
   }
 }