rename rowPadding to numRowsPerPage, and pass it as a function option

src/components/HighTable/HighTable.tsx

@@ -118,7 +118,7 @@ function HighTableData(props: PropsData) {
                   {/* Create a new selection context if the dataframe has changed */}
                   <SelectionProvider key={key} selection={selection} onSelectionChange={onSelectionChange} data={data} numRows={numRows} onError={onError}>
                     {/* Create a new navigation context if the dataframe has changed, because the focused cell might not exist anymore */}
-                    <CellNavigationProvider key={key} rowPadding={props.padding ?? defaultPadding}>
+                    <CellNavigationProvider key={key}>
                       <ScrollContainer data={data} numRows={numRows} version={version} {...props} maxRowNumber={maxRowNumber} />
                     </CellNavigationProvider>
                   </SelectionProvider>
@@ -346,9 +346,10 @@ function TableSlice({
   const { selectable, toggleAllRows, pendingSelectionGesture, onTableKeyDown: onSelectionTableKeyDown, allRowsSelected, isRowSelected, toggleRowNumber, toggleRangeToRowNumber } = useContext(SelectionContext)
 
   const onTableKeyDown = useCallback((event: KeyboardEvent) => {
-    onNavigationTableKeyDown?.(event)
+    // TODO(SL): compute numRowsPerPage based on the viewport height and row height
+    onNavigationTableKeyDown?.(event, { numRowsPerPage: padding })
     onSelectionTableKeyDown?.(event)
-  }, [onNavigationTableKeyDown, onSelectionTableKeyDown])
+  }, [onNavigationTableKeyDown, onSelectionTableKeyDown, padding])
 
   const getOnCheckboxPress = useCallback(({ row, rowNumber }: { row: number, rowNumber?: number }) => {
     if (rowNumber === undefined || !toggleRowNumber || !toggleRangeToRowNumber) {

src/contexts/CellNavigationContext.ts

@@ -10,7 +10,7 @@ interface CellNavigationContextType {
   cellPosition: CellPosition
   shouldFocus: boolean // true if the current cell should be focused
   shouldScroll: boolean // true if the table should scroll to the current cell
-  onTableKeyDown?: (event: KeyboardEvent) => void // function to handle keydown events inside the table.
+  onTableKeyDown?: (event: KeyboardEvent, { numRowsPerPage }: { numRowsPerPage: number }) => void // function to handle keydown events inside the table.
   onScrollKeyDown?: (event: KeyboardEvent) => void // function to handle keydown events outside the table, in the scroll wrapper.
   setColIndex?: (colIndex: number) => void // function to set the column index
   setRowIndex?: (rowIndex: number) => void // function to set the row index

src/providers/CellNavigationProvider.tsx

@@ -6,11 +6,10 @@ import { ColumnVisibilityStatesContext } from '../contexts/ColumnVisibilityState
 import { DataContext } from '../contexts/DataContext.js'
 
 interface CellNavigationProviderProps {
-  rowPadding: number // number of rows to skip when navigating with the keyboard
   children: ReactNode
 }
 
-export function CellNavigationProvider({ rowPadding, children }: CellNavigationProviderProps) {
+export function CellNavigationProvider({ children }: CellNavigationProviderProps) {
   const [colIndex, setColIndex] = useState(defaultCellNavigationContext.cellPosition.colIndex)
   const [rowIndex, setRowIndex] = useState(defaultCellNavigationContext.cellPosition.rowIndex)
   const [shouldFocus, setShouldFocus] = useState(false)
@@ -45,7 +44,9 @@ export function CellNavigationProvider({ rowPadding, children }: CellNavigationP
     }
   }
 
-  const onTableKeyDown = useCallback((event: KeyboardEvent) => {
+  const onTableKeyDown = useCallback((event: KeyboardEvent, { numRowsPerPage }: {
+    numRowsPerPage: number // number of rows to skip when navigating with the keyboard (PageUp/PageDown)
+  }) => {
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event
     // if the user is pressing Alt, Meta or Shift, do not handle the event
     if (altKey || metaKey || shiftKey) {
@@ -86,9 +87,11 @@ export function CellNavigationProvider({ rowPadding, children }: CellNavigationP
       }
       setColIndex(colCount)
     } else if (key === 'PageDown') {
-      setRowIndex(prev => prev + rowPadding <= rowCount ? prev + rowPadding : rowCount)
+      setRowIndex(prev => prev + numRowsPerPage <= rowCount ? prev + numRowsPerPage : rowCount)
+      // TODO(SL): same for horizontal scrolling with Alt+PageDown?
     } else if (key === 'PageUp') {
-      setRowIndex(prev => prev - rowPadding >= 1 ? prev - rowPadding : 1)
+      setRowIndex(prev => prev - numRowsPerPage >= 1 ? prev - numRowsPerPage : 1)
+      // TODO(SL): same for horizontal scrolling with Alt+PageUp?
     } else if (key !== ' ') {
       // if the key is not one of the above, do not handle it
       // special case: no action is associated with the Space key, but it's captured
@@ -100,7 +103,7 @@ export function CellNavigationProvider({ rowPadding, children }: CellNavigationP
     event.preventDefault()
     setShouldScroll(true)
     setShouldFocus(true)
-  }, [colCount, rowCount, rowPadding])
+  }, [colCount, rowCount])
 
   const onScrollKeyDown = useCallback((event: KeyboardEvent) => {
     const { key } = event

test/providers/CellNavigationProvider.test.tsx

@@ -43,7 +43,7 @@ describe('CellsNavigationProvider', () => {
     const { getByTestId, rerender } = render(
       <DataContext.Provider value={getDefaultDataContext({ numRows: 9 })}>
         <ColumnVisibilityStatesContext.Provider value={{ numberOfVisibleColumns }}>
-          <CellNavigationProvider rowPadding={3}>
+          <CellNavigationProvider>
             <RowCountComponent />
           </CellNavigationProvider>
         </ColumnVisibilityStatesContext.Provider>
@@ -64,7 +64,7 @@ describe('CellsNavigationProvider', () => {
     rerender(
       <DataContext.Provider value={getDefaultDataContext({ numRows: 4 })}>
         <ColumnVisibilityStatesContext.Provider value={{ numberOfVisibleColumns }}>
-          <CellNavigationProvider rowPadding={3}>
+          <CellNavigationProvider>
             <RowCountComponent />
           </CellNavigationProvider>
         </ColumnVisibilityStatesContext.Provider>
@@ -76,7 +76,7 @@ describe('CellsNavigationProvider', () => {
     rerender(
       <DataContext.Provider value={getDefaultDataContext({ numRows: 14 })}>
         <ColumnVisibilityStatesContext.Provider value={{ numberOfVisibleColumns }}>
-          <CellNavigationProvider rowPadding={3}>
+          <CellNavigationProvider>
             <RowCountComponent />
           </CellNavigationProvider>
         </ColumnVisibilityStatesContext.Provider>
@@ -90,7 +90,7 @@ describe('CellsNavigationProvider', () => {
     const { getByTestId, rerender } = render(
       <DataContext.Provider value={getDefaultDataContext({ numRows })}>
         <ColumnVisibilityStatesContext.Provider value={{ numberOfVisibleColumns: 9 }}>
-          <CellNavigationProvider rowPadding={3}>
+          <CellNavigationProvider>
             <ColCountComponent />
           </CellNavigationProvider>
         </ColumnVisibilityStatesContext.Provider>
@@ -111,7 +111,7 @@ describe('CellsNavigationProvider', () => {
     rerender(
       <DataContext.Provider value={getDefaultDataContext({ numRows })}>
         <ColumnVisibilityStatesContext.Provider value={{ numberOfVisibleColumns: 4 }}>
-          <CellNavigationProvider rowPadding={3}>
+          <CellNavigationProvider>
             <ColCountComponent />
           </CellNavigationProvider>
         </ColumnVisibilityStatesContext.Provider>
@@ -123,7 +123,7 @@ describe('CellsNavigationProvider', () => {
     rerender(
       <DataContext.Provider value={getDefaultDataContext({ numRows })}>
         <ColumnVisibilityStatesContext.Provider value={{ numberOfVisibleColumns: 14 }}>
-          <CellNavigationProvider rowPadding={3}>
+          <CellNavigationProvider>
             <ColCountComponent />
           </CellNavigationProvider>
         </ColumnVisibilityStatesContext.Provider>