Resize column via keyboard

src/DataGrid.tsx

@@ -689,7 +689,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       assertIsValidKeyGetter<R, K>(rowKeyGetter);
       const rowKey = rowKeyGetter(row);
       selectRow({ row, checked: !selectedRows.has(rowKey), isShiftClick: false });
-      // do not scroll
+      // prevent scrolling
       event.preventDefault();
       return;
     }
@@ -820,7 +820,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       cellNavigationMode = 'CHANGE_ROW';
     }
 
-    // Do not allow focus to leave and prevent scrolling
+    // prevent scrolling and do not allow focus to leave
     event.preventDefault();
 
     const ctrlKey = isCtrlKeyHeldDown(event);

src/HeaderCell.tsx

@@ -8,6 +8,7 @@ import {
   getCellStyle,
   getHeaderCellRowSpan,
   getHeaderCellStyle,
+  isCtrlKeyHeldDown,
   stopPropagation
 } from './utils';
 import type { CalculatedColumn, SortColumn } from './types';
@@ -160,10 +161,25 @@ export default function HeaderCell<R, SR>({
   }
 
   function onKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
-    if (event.key === ' ' || event.key === 'Enter') {
+    const { key } = event;
+    if (sortable && (key === ' ' || key === 'Enter')) {
       // prevent scrolling
       event.preventDefault();
       onSort(event.ctrlKey || event.metaKey);
+    } else if (
+      resizable &&
+      isCtrlKeyHeldDown(event) &&
+      (key === 'ArrowLeft' || key === 'ArrowRight')
+    ) {
+      // prevent navigation
+      // TODO: check if we can use `preventDefault` instead
+      event.stopPropagation();
+      const { width } = event.currentTarget.getBoundingClientRect();
+      const offset = key === 'ArrowLeft' ? -10 : 10;
+      const newWidth = clampColumnWidth(width + offset, column);
+      if (newWidth !== width) {
+        onColumnResize(column, newWidth);
+      }
     }
   }
 
@@ -192,6 +208,7 @@ export default function HeaderCell<R, SR>({
     if (event.dataTransfer.types.includes(dragDropKey.toLowerCase())) {
       const sourceKey = event.dataTransfer.getData(dragDropKey.toLowerCase());
       if (sourceKey !== column.key) {
+        // prevent the browser from redirecting in some cases
         event.preventDefault();
         onColumnsReorder?.(sourceKey, column.key);
       }
@@ -242,7 +259,7 @@ export default function HeaderCell<R, SR>({
       }}
       onFocus={handleFocus}
       onClick={onClick}
-      onKeyDown={sortable ? onKeyDown : undefined}
+      onKeyDown={onKeyDown}
       {...draggableProps}
     >
       {column.renderHeaderCell({

src/TreeDataGrid.tsx

@@ -310,7 +310,8 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
         // Expand the current group row if it is focused and is in collapsed state
         (event.key === rightKey && !row.isExpanded))
     ) {
-      event.preventDefault(); // Prevents scrolling
+      // prevent scrolling
+      event.preventDefault();
       event.preventGridDefault();
       toggleGroup(row.id);
     }

test/browser/column/resizable.test.tsx

@@ -57,7 +57,7 @@ const columns: readonly Column<Row>[] = [
   }
 ];
 
-test('cannot not resize or auto resize column when resizable is not specified', () => {
+test('cannot resize or auto resize column when resizable is not specified', () => {
   setup<Row, unknown>({ columns, rows: [] });
   const [col1] = getHeaderCells();
   expect(queryResizeHandle(col1)).not.toBeInTheDocument();
@@ -75,7 +75,7 @@ test('should resize column when dragging the handle', async () => {
   expect(onColumnResize).toHaveBeenCalledExactlyOnceWith(expect.objectContaining(columns[1]), 150);
 });
 
-test('should use the maxWidth if specified', async () => {
+test('should use the maxWidth if specified when dragging the handle', async () => {
   setup<Row, unknown>({ columns, rows: [] });
   const grid = getGrid();
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px ' });
@@ -84,7 +84,7 @@ test('should use the maxWidth if specified', async () => {
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 400px' });
 });
 
-test('should use the minWidth if specified', async () => {
+test('should use the minWidth if specified when dragging the handle', async () => {
   setup<Row, unknown>({ columns, rows: [] });
   const grid = getGrid();
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
@@ -93,6 +93,49 @@ test('should use the minWidth if specified', async () => {
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 100px' });
 });
 
+test('should resize column using keboard', async () => {
+  const onColumnResize = vi.fn();
+  setup<Row, unknown>({ columns, rows: [], onColumnResize });
+  const grid = getGrid();
+  expect(onColumnResize).not.toHaveBeenCalled();
+  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
+  const [, col2] = getHeaderCells();
+  await userEvent.click(col2);
+
+  await userEvent.keyboard('{Control>}{ArrowRight}{/Control}');
+  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 210px' });
+  expect(onColumnResize).toHaveBeenCalledWith(expect.objectContaining(columns[1]), 210);
+
+  await userEvent.keyboard('{Control>}{ArrowLeft}{/Control}');
+  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
+  expect(onColumnResize).toHaveBeenCalledWith(expect.objectContaining(columns[1]), 200);
+  expect(onColumnResize).toHaveBeenCalledTimes(2);
+});
+
+test('should use the maxWidth if specified when resizing using keyboard', async () => {
+  const onColumnResize = vi.fn();
+  setup<Row, unknown>({ columns, rows: [], onColumnResize });
+  const grid = getGrid();
+  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px ' });
+  const [, col2] = getHeaderCells();
+  await userEvent.click(col2);
+  await userEvent.keyboard(`{Control>}${'{ArrowRight}'.repeat(22)}{/Control}`);
+  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 400px' });
+  expect(onColumnResize).toHaveBeenCalledTimes(20);
+});
+
+test('should use the minWidth if specified resizing using keyboard', async () => {
+  const onColumnResize = vi.fn();
+  setup<Row, unknown>({ columns, rows: [], onColumnResize });
+  const grid = getGrid();
+  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
+  const [, col2] = getHeaderCells();
+  await userEvent.click(col2);
+  await userEvent.keyboard(`{Control>}${'{ArrowLeft}'.repeat(12)}{/Control}`);
+  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 100px' });
+  expect(onColumnResize).toHaveBeenCalledTimes(10);
+});
+
 test('should auto resize column when resize handle is double clicked', async () => {
   const onColumnResize = vi.fn();
   setup<Row, unknown>({

website/components/CellExpanderFormatter.tsx

@@ -20,6 +20,7 @@ export function CellExpanderFormatter({
 }: CellExpanderFormatterProps) {
   function handleKeyDown(e: React.KeyboardEvent<HTMLSpanElement>) {
     if (e.key === ' ' || e.key === 'Enter') {
+      // prevent scrolling
       e.preventDefault();
       onCellExpand();
     }

website/components/ChildRowDeleteButton.tsx

@@ -51,6 +51,7 @@ export function ChildRowDeleteButton({
 }: ChildRowDeleteButtonProps) {
   function handleKeyDown(e: React.KeyboardEvent<HTMLSpanElement>) {
     if (e.key === 'Enter') {
+      // prevent scrolling
       e.preventDefault();
       onDeleteSubRow();
     }

website/routes/ContextMenu.tsx

@@ -118,12 +118,10 @@ function ContextMenuDemo() {
           <menu
             ref={menuRef}
             className={contextMenuClassname}
-            style={
-              {
-                top: contextMenuProps.top,
-                left: contextMenuProps.left
-              } as unknown as React.CSSProperties
-            }
+            style={{
+              top: contextMenuProps.top,
+              left: contextMenuProps.left
+            }}
           >
             <li>
               <button