Resize column via keyboard (#3754)

amanmahajan7 · web-flow · commit 5a2c4d9f3b56 · 2025-04-11T09:58:02.000-05:00
Resize column on `Ctrl + ArrowRight/Left`
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -28,6 +28,7 @@ import {
   canExitGrid,
   createCellEvent,
   getColSpan,
+  getLeftRightKey,
   getNextSelectedCellPosition,
   isCtrlKeyHeldDown,
   isDefaultCellInput,
@@ -377,9 +378,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   const summaryRowsHeight = summaryRowsCount * summaryRowHeight;
   const clientHeight = gridHeight - headerRowsHeight - summaryRowsHeight;
   const isSelectable = selectedRows != null && onSelectedRowsChange != null;
-  const isRtl = direction === 'rtl';
-  const leftKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
-  const rightKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+  const { leftKey, rightKey } = getLeftRightKey(direction);
   const ariaRowCount = rawAriaRowCount ?? headerRowsCount + rows.length + summaryRowsCount;
 
   const defaultGridComponents = useMemo(
@@ -689,7 +688,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 +819,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);
diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx
@@ -8,6 +8,8 @@ import {
   getCellStyle,
   getHeaderCellRowSpan,
   getHeaderCellStyle,
+  getLeftRightKey,
+  isCtrlKeyHeldDown,
   stopPropagation
 } from './utils';
 import type { CalculatedColumn, SortColumn } from './types';
@@ -160,10 +162,26 @@ 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 { leftKey } = getLeftRightKey(direction);
+      const offset = key === leftKey ? -10 : 10;
+      const newWidth = clampColumnWidth(width + offset, column);
+      if (newWidth !== width) {
+        onColumnResize(column, newWidth);
+      }
     }
   }
 
@@ -192,6 +210,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 +261,7 @@ export default function HeaderCell<R, SR>({
       }}
       onFocus={handleFocus}
       onClick={onClick}
-      onKeyDown={sortable ? onKeyDown : undefined}
+      onKeyDown={onKeyDown}
       {...draggableProps}
     >
       {column.renderHeaderCell({
diff --git a/src/TreeDataGrid.tsx b/src/TreeDataGrid.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import type { Key } from 'react';
 
 import { useLatestFunc } from './hooks';
-import { assertIsValidKeyGetter } from './utils';
+import { assertIsValidKeyGetter, getLeftRightKey } from './utils';
 import type {
   CellClipboardEvent,
   CellCopyEvent,
@@ -71,9 +71,7 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
   const defaultRenderers = useDefaultRenderers<R, SR>();
   const rawRenderRow = renderers?.renderRow ?? defaultRenderers?.renderRow ?? defaultRenderRow;
   const headerAndTopSummaryRowsCount = 1 + (props.topSummaryRows?.length ?? 0);
-  const isRtl = props.direction === 'rtl';
-  const leftKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
-  const rightKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+  const { leftKey, rightKey } = getLeftRightKey(props.direction);
   const toggleGroupLatest = useLatestFunc(toggleGroup);
 
   const { columns, groupBy } = useMemo(() => {
@@ -310,7 +308,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);
     }
diff --git a/src/utils/keyboardUtils.ts b/src/utils/keyboardUtils.ts
@@ -1,3 +1,5 @@
+import type { Direction, Maybe } from '../types';
+
 // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
 const nonInputKeys = new Set([
   // Special keys
@@ -85,3 +87,12 @@ export function onEditorNavigation({ key, target }: React.KeyboardEvent<HTMLDivE
   }
   return false;
 }
+
+export function getLeftRightKey(direction: Maybe<Direction>) {
+  const isRtl = direction === 'rtl';
+
+  return {
+    leftKey: isRtl ? 'ArrowRight' : 'ArrowLeft',
+    rightKey: isRtl ? 'ArrowLeft' : 'ArrowRight'
+  } as const;
+}
diff --git a/test/browser/column/resizable.test.tsx b/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>({
diff --git a/website/components/CellExpanderFormatter.tsx b/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();
     }
diff --git a/website/components/ChildRowDeleteButton.tsx b/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();
     }
diff --git a/website/routes/ContextMenu.tsx b/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

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ export function CellExpanderFormatter({`
`20`	`20`	`}: CellExpanderFormatterProps) {`
`21`	`21`	`function handleKeyDown(e: React.KeyboardEvent<HTMLSpanElement>) {`
`22`	`22`	`if (e.key === ' ' \|\| e.key === 'Enter') {`
	`23`	`+ // prevent scrolling`
`23`	`24`	`e.preventDefault();`
`24`	`25`	`onCellExpand();`
`25`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,7 @@ export function ChildRowDeleteButton({`
`51`	`51`	`}: ChildRowDeleteButtonProps) {`
`52`	`52`	`function handleKeyDown(e: React.KeyboardEvent<HTMLSpanElement>) {`
`53`	`53`	`if (e.key === 'Enter') {`
	`54`	`+ // prevent scrolling`
`54`	`55`	`e.preventDefault();`
`55`	`56`	`onDeleteSubRow();`
`56`	`57`	`}`