feat(Table): support table scrolling through keyboard arrow keys (#463)

Author: simonguo

src/Table.tsx

@@ -476,7 +476,8 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     onScrollBody,
     onScrollTop,
     onScrollLeft,
-    onScrollTo
+    onScrollTo,
+    onScrollByKeydown
   } = useScrollListener({
     rtl,
     data: dataProp,
@@ -1110,6 +1111,8 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
         className={classes}
         style={styles}
         ref={tableRef}
+        tabIndex={-1}
+        onKeyDown={onScrollByKeydown}
       >
         {showHeader && renderTableHeader(headerCells, rowWidth)}
         {children && renderTableBody(bodyCells, rowWidth)}

src/utils/useScrollListener.ts

@@ -504,6 +504,31 @@ const useScrollListener = (props: ScrollListenerProps) => {
     tableBodyRef
   ]);
 
+  const onScrollByKeydown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.currentTarget === event.target) {
+        event.preventDefault();
+        const step = 40;
+
+        switch (event.key) {
+          case 'ArrowUp':
+            onWheel(0, -step);
+            break;
+          case 'ArrowDown':
+            onWheel(0, step);
+            break;
+          case 'ArrowLeft':
+            onWheel(-step, 0);
+            break;
+          case 'ArrowRight':
+            onWheel(step, 0);
+            break;
+        }
+      }
+    },
+    [onWheel]
+  );
+
   useMount(() => {
     if (rtl) {
       // Initialize scroll position
@@ -526,7 +551,8 @@ const useScrollListener = (props: ScrollListenerProps) => {
     onScrollBody,
     onScrollTop,
     onScrollLeft,
-    onScrollTo
+    onScrollTo,
+    onScrollByKeydown
   };
 };
 

test/TableSpec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, waitFor, act, fireEvent } from '@testing-library/react';
+import { render, waitFor, act, fireEvent, screen } from '@testing-library/react';
 import getHeight from 'dom-lib/getHeight';
 import getWidth from 'dom-lib/getWidth';
 import Table from '../src/Table';
@@ -1391,4 +1391,37 @@ describe('Table', () => {
     expect(width).not.equal(100);
     expect(width).to.equal(instance.getBoundingClientRect().width);
   });
+
+  it('Should call `onScroll` callback when trigger keyboard event', () => {
+    const onScrollSpy = sinon.spy();
+    render(
+      <Table onScroll={onScrollSpy} data={[{ id: 1, name: 'a' }]} height={10} width={100}>
+        <Column width={100}>
+          <HeaderCell>11</HeaderCell>
+          <Cell dataKey="id" />
+        </Column>
+        <Column width={100}>
+          <HeaderCell>11</HeaderCell>
+          <Cell dataKey="id" />
+        </Column>
+      </Table>
+    );
+
+    fireEvent.keyDown(screen.getByRole('grid'), { key: 'ArrowDown' });
+
+    expect(onScrollSpy).to.have.been.calledOnce;
+    expect(onScrollSpy).to.be.calledWith(0, 40);
+
+    fireEvent.keyDown(screen.getByRole('grid'), { key: 'ArrowUp' });
+    expect(onScrollSpy).to.have.been.calledTwice;
+    expect(onScrollSpy).to.be.calledWith(0, 0);
+
+    fireEvent.keyDown(screen.getByRole('grid'), { key: 'ArrowRight' });
+    expect(onScrollSpy).to.have.been.calledThrice;
+    expect(onScrollSpy).to.be.calledWith(40, 0);
+
+    fireEvent.keyDown(screen.getByRole('grid'), { key: 'ArrowLeft' });
+    expect(onScrollSpy).to.have.callCount(4);
+    expect(onScrollSpy).to.be.calledWith(0, 0);
+  });
 });