Resize column via keyboard

src/DataGrid.tsx

@@ -528,18 +528,22 @@ function DataGrid<R, SR, K extends Key>(
 
   function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
     const { idx, rowIdx, mode } = selectedPosition;
+    const column = columns[idx];
+
     if (mode === 'EDIT') return;
 
-    if (onCellKeyDown && isRowIdxWithinViewportBounds(rowIdx)) {
+    if (onCellKeyDown) {
       const row = rows[rowIdx];
       const cellEvent = createCellEvent(event);
       onCellKeyDown(
         {
           mode: 'SELECT',
           row,
-          column: columns[idx],
+          column,
           rowIdx,
-          selectCell
+          selectCell,
+          resizeColumn: handleColumnResize,
+          getColumnWidth
         },
         cellEvent
       );

src/types.ts

@@ -178,6 +178,8 @@ interface SelectCellKeyDownArgs<TRow, TSummaryRow = unknown> {
   column: CalculatedColumn<TRow, TSummaryRow>;
   rowIdx: number;
   selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
+  resizeColumn: (column: CalculatedColumn<TRow, TSummaryRow>, width: number) => void;
+  getColumnWidth: (column: CalculatedColumn<TRow, TSummaryRow>) => string | number;
 }
 
 export interface EditCellKeyDownArgs<TRow, TSummaryRow = unknown> {

test/column/resizable.test.tsx

@@ -1,7 +1,9 @@
 import { fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import type { Column } from '../../src';
 import { resizeHandleClassname } from '../../src/HeaderCell';
+import { isCtrlKeyHeldDown } from '../../src/utils';
 import { getGrid, getHeaderCells, setup } from '../utils';
 
 const pointerId = 1;
@@ -104,3 +106,35 @@ test('should use the minWidth if specified', () => {
   resize({ column: col2, clientXStart: 295, clientXEnd: 100, rect: { right: 300, left: 100 } });
   expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 100px' });
 });
+
+test('should resize column via keyboard', async () => {
+  setup({
+    columns,
+    rows: [],
+    onCellKeyDown(args, event) {
+      if (args.mode === 'SELECT') {
+        const { key } = event;
+        const { column, getColumnWidth, resizeColumn } = args;
+        if (column.resizable && isCtrlKeyHeldDown(event) && event.shiftKey) {
+          event.preventGridDefault();
+          const leftKey = 'ArrowLeft';
+          const rightKey = 'ArrowRight';
+          if (key === leftKey || key === rightKey) {
+            const width = getColumnWidth(column);
+            const step = 10;
+            const isIncrease = key === rightKey;
+            const newWidth = isIncrease ? Number(width) + step : Number(width) - step;
+            resizeColumn(column, newWidth);
+          }
+        }
+      }
+    }
+  });
+  const [, col2] = getHeaderCells();
+  await userEvent.click(col2);
+  expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' });
+  await userEvent.keyboard('{Control>}{Shift>}{ArrowRight}{/Control}{/Shift}');
+  expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 210px' });
+  await userEvent.keyboard('{Control>}{Shift>}{ArrowLeft}{/Control}{/Shift}');
+  expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' });
+});

website/demos/AllFeatures.tsx

@@ -4,6 +4,7 @@ import { css } from '@linaria/core';
 
 import DataGrid, { SelectColumn, textEditor } from '../../src';
 import type { Column, CopyEvent, FillEvent, PasteEvent } from '../../src';
+import { isCtrlKeyHeldDown } from '../../src/utils';
 import { renderAvatar, renderDropdown } from './renderers';
 import type { Props } from './types';
 
@@ -218,6 +219,24 @@ export default function AllFeatures({ direction }: Props) {
           args.selectCell(true);
         }
       }}
+      onCellKeyDown={(args, event) => {
+        if (args.mode === 'SELECT') {
+          const { key } = event;
+          const { column, getColumnWidth, resizeColumn } = args;
+          if (column.resizable && isCtrlKeyHeldDown(event) && event.shiftKey) {
+            event.preventGridDefault();
+            const leftKey = 'ArrowLeft';
+            const rightKey = 'ArrowRight';
+            if (key === leftKey || key === rightKey) {
+              const width = getColumnWidth(column);
+              const step = 10;
+              const isIncrease = key === rightKey;
+              const newWidth = isIncrease ? Number(width) + step : Number(width) - step;
+              resizeColumn(column, newWidth);
+            }
+          }
+        }
+      }}
     />
   );
 }