Datagrid remaining keyboard shortcuts

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 No public interface changes since `14.10.0`.
 
+- Added new keyboard shortcuts for the data grid component: `Home` (same row, first column), `End` (same row, last column), `Ctrl+Home` (first row, first column), `Ctrl+End` (last row, last column), `Page Up` (next page) and `Page Down` (previous page)
+
 **Bug fixes**
 
 - Created `.euiTableCaption` with `position: relative` to avoid double border under header row ([#2484](https://github.com/elastic/eui/pull/2484))

src/components/datagrid/data_grid.test.tsx

@@ -1444,15 +1444,22 @@ Array [
       const component = mount(
         <EuiDataGrid
           {...requiredProps}
-          columns={[{ id: 'A' }, { id: 'B' }]}
+          columns={[{ id: 'A' }, { id: 'B' }, { id: 'C' }]}
           columnVisibility={{
-            visibleColumns: ['A', 'B'],
+            visibleColumns: ['A', 'B', 'C'],
             setVisibleColumns: () => {},
           }}
-          rowCount={3}
+          rowCount={9}
           renderCellValue={({ rowIndex, columnId }) =>
             `${rowIndex}, ${columnId}`
           }
+          pagination={{
+            pageIndex: 0,
+            pageSize: 3,
+            pageSizeOptions: [3, 6, 10],
+            onChangePage: () => {},
+            onChangeItemsPerPage: () => {},
+          }}
         />
       );
 
@@ -1503,6 +1510,93 @@ Array [
       expect(
         focusableCell.find('[data-test-subj="cell-content"]').text()
       ).toEqual('0, A');
+
+      focusableCell
+        .simulate('keydown', { keyCode: keyCodes.DOWN })
+        .simulate('keydown', { keyCode: keyCodes.END });
+
+      focusableCell = getFocusableCell(component);
+      expect(
+        focusableCell.find('[data-test-subj="cell-content"]').text()
+      ).toEqual('1, C');
+
+      focusableCell
+        .simulate('keydown', { keyCode: keyCodes.UP })
+        .simulate('keydown', { keyCode: keyCodes.HOME });
+
+      focusableCell = getFocusableCell(component);
+      expect(
+        focusableCell.find('[data-test-subj="cell-content"]').text()
+      ).toEqual('0, A');
+
+      focusableCell.simulate('keydown', {
+        ctrlKey: true,
+        keyCode: keyCodes.END,
+      });
+
+      focusableCell = getFocusableCell(component);
+      expect(
+        focusableCell.find('[data-test-subj="cell-content"]').text()
+      ).toEqual('2, C');
+
+      focusableCell.simulate('keydown', {
+        ctrlKey: true,
+        keyCode: keyCodes.HOME,
+      });
+
+      focusableCell = getFocusableCell(component);
+      expect(
+        focusableCell.find('[data-test-subj="cell-content"]').text()
+      ).toEqual('0, A');
+
+      focusableCell.simulate('keydown', {
+        keyCode: keyCodes.PAGE_DOWN,
+      });
+
+      focusableCell = getFocusableCell(component);
+      expect(
+        focusableCell.find('[data-test-subj="cell-content"]').text()
+      ).toEqual('0, A'); // focus should not move when up against an edge
+
+      focusableCell.simulate('keydown', {
+        keyCode: keyCodes.PAGE_UP,
+      });
+
+      focusableCell = getFocusableCell(component);
+      expect(
+        focusableCell.find('[data-test-subj="cell-content"]').text()
+      ).toEqual('3, A');
+
+      focusableCell
+        .simulate('keydown', { keyCode: keyCodes.RIGHT }) // 3, B
+        .simulate('keydown', {
+          keyCode: keyCodes.PAGE_UP,
+        });
+
+      focusableCell = getFocusableCell(component);
+      expect(
+        focusableCell.find('[data-test-subj="cell-content"]').text()
+      ).toEqual('6, A'); // should move page up and focus on the cell at the first column/row, even if in the previous page wasn't focused there
+
+      focusableCell.simulate('keydown', {
+        keyCode: keyCodes.PAGE_DOWN,
+      });
+
+      focusableCell = getFocusableCell(component);
+      expect(
+        focusableCell.find('[data-test-subj="cell-content"]').text()
+      ).toEqual('3, A'); // back one page
+
+      focusableCell
+        .simulate('keydown', { keyCode: keyCodes.RIGHT }) // 3, B
+        .simulate('keydown', {
+          keyCode: keyCodes.PAGE_DOWN,
+        });
+
+      focusableCell = getFocusableCell(component);
+      expect(
+        focusableCell.find('[data-test-subj="cell-content"]').text()
+      ).toEqual('0, A'); // should be back in the first page
     });
     it('does not break arrow key focus control behavior when also using a mouse', () => {
       const component = mount(

src/components/datagrid/data_grid.tsx

@@ -292,35 +292,70 @@ function createKeyDownHandler(
     const colCount = visibleColumns.length - 1;
     const [x, y] = focusedCell;
     const rowCount = computeVisibleRows(props);
-    const { keyCode } = event;
+    const { keyCode, ctrlKey } = event;
 
-    switch (keyCode) {
-      case keyCodes.DOWN:
-        event.preventDefault();
-        if (y < rowCount - 1) {
-          setFocusedCell([x, y + 1]);
-        }
-        break;
-      case keyCodes.LEFT:
-        event.preventDefault();
-        if (x > 0) {
-          setFocusedCell([x - 1, y]);
-        }
-        break;
-      case keyCodes.UP:
-        event.preventDefault();
-        // TODO sort out when a user can arrow up into the column headers
-        const minimumIndex = headerIsInteractive ? -1 : 0;
-        if (y > minimumIndex) {
-          setFocusedCell([x, y - 1]);
+    if (keyCode === keyCodes.DOWN) {
+      event.preventDefault();
+      if (y < rowCount - 1) {
+        setFocusedCell([x, y + 1]);
+      }
+    } else if (keyCode === keyCodes.LEFT) {
+      event.preventDefault();
+      if (x > 0) {
+        setFocusedCell([x - 1, y]);
+      }
+    } else if (keyCode === keyCodes.UP) {
+      event.preventDefault();
+      // TODO sort out when a user can arrow up into the column headers
+      const minimumIndex = headerIsInteractive ? -1 : 0;
+      if (y > minimumIndex) {
+        setFocusedCell([x, y - 1]);
+      }
+    } else if (keyCode === keyCodes.RIGHT) {
+      event.preventDefault();
+      if (x < colCount) {
+        setFocusedCell([x + 1, y]);
+      }
+    } else if (keyCode === keyCodes.PAGE_UP) {
+      event.preventDefault();
+      if (props.pagination) {
+        const totalRowCount = props.rowCount;
+        const pageIndex = props.pagination.pageIndex;
+        const pageSize = props.pagination.pageSize;
+        const pageCount = Math.ceil(totalRowCount / pageSize);
+        if (pageIndex < pageCount) {
+          props.pagination!.pageIndex += 1;
+          setFocusedCell([0, 0]);
         }
-        break;
-      case keyCodes.RIGHT:
-        event.preventDefault();
-        if (x < colCount) {
-          setFocusedCell([x + 1, y]);
+      }
+    } else if (keyCode === keyCodes.PAGE_DOWN) {
+      event.preventDefault();
+      if (props.pagination) {
+        const pageIndex = props.pagination.pageIndex;
+        if (pageIndex > 0) {
+          props.pagination!.pageIndex -= 1;
+          setFocusedCell([0, 0]);
         }
-        break;
+      }
+    } else if (keyCode === (ctrlKey && keyCodes.END)) {
+      event.preventDefault();
+      setFocusedCell([colCount, rowCount - 1]);
+    } else if (keyCode === (ctrlKey && keyCodes.HOME)) {
+      event.preventDefault();
+      setFocusedCell([0, 0]);
+    } else if (keyCode === keyCodes.END) {
+      event.preventDefault();
+      setFocusedCell([colCount, y]);
+    } else if (keyCode === keyCodes.HOME) {
+      event.preventDefault();
+      setFocusedCell([0, y]);
+    } else if (
+      (keyCode >= 48 && keyCode <= 57) ||
+      (keyCode >= 65 && keyCode <= 90)
+    ) {
+      event.preventDefault();
+      // Alphanumeric
+      // TODO: If a cell contains an input widget, places focus on the first one, and inserts key (#2482)
     }
   };
 }

src/services/key_codes.ts

@@ -11,6 +11,11 @@ export const UP = 38;
 export const LEFT = 37;
 export const RIGHT = 39;
 
+export const PAGE_UP = 33;
+export const PAGE_DOWN = 34;
+export const END = 35;
+export const HOME = 36;
+
 export enum keyCodes {
   ENTER = 13,
   SPACE = 32,
@@ -23,4 +28,9 @@ export enum keyCodes {
   UP = 38,
   LEFT = 37,
   RIGHT = 39,
+
+  PAGE_UP = 33,
+  PAGE_DOWN = 34,
+  END = 35,
+  HOME = 36,
 }