Added a prop to disable Keyboard Events

README.md

@@ -200,6 +200,12 @@ A number defining the height of summary rows.
 
 ###### `onSelectedCellChange?: Maybe<(args: CellSelectArgs<R, SR>) => void>;`
 
+###### `disableKeyboardEvents?: Maybe<boolean>`
+
+**Default:** `false`
+
+Disables keyboard interaction for the header cells
+
 Triggered when the selected cell is changed.
 
 Arguments:

src/DataGrid.tsx

@@ -160,6 +160,8 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
   /**
    * Event props
    */
+  /** Disables all keyboard events like using space or enter to sort the columns */
+  disableKeyboardEvents?: Maybe<number;
   /** Function called whenever a cell is clicked */
   onCellClick?: Maybe<
     (args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void
@@ -248,6 +250,7 @@ function DataGrid<R, SR, K extends Key>(
     className,
     style,
     rowClass,
+    disableKeyboardEvents,
     direction: rawDirection,
     // ARIA
     role: rawRole,
@@ -1114,6 +1117,7 @@ function DataGrid<R, SR, K extends Key>(
               selectedCellIdx={
                 selectedPosition.rowIdx === mainHeaderRowIdx ? selectedPosition.idx : undefined
               }
+              disableKeyboardEvents={disableKeyboardEvents}
               selectCell={selectHeaderCellLatest}
               shouldFocusGrid={!selectedCellIsWithinSelectionBounds}
               direction={direction}

src/HeaderCell.tsx

@@ -70,6 +70,7 @@ export interface HeaderCellProps<R, SR> extends SharedHeaderRowProps<R, SR> {
   rowIdx: number;
   isCellSelected: boolean;
   dragDropKey: string;
+  disableKeyboardEvents: boolean;
 }
 
 export default function HeaderCell<R, SR>({
@@ -84,7 +85,8 @@ export default function HeaderCell<R, SR>({
   selectCell,
   shouldFocusGrid,
   direction,
-  dragDropKey
+  dragDropKey,
+  disableKeyboardEvents
 }: HeaderCellProps<R, SR>) {
   const [isDragging, setIsDragging] = useState(false);
   const [isOver, setIsOver] = useState(false);
@@ -199,6 +201,8 @@ export default function HeaderCell<R, SR>({
   }
 
   function onKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
+    if(disableKeyboardEvents) return;
+
     if (event.key === ' ' || event.key === 'Enter') {
       // prevent scrolling
       event.preventDefault();

src/HeaderRow.tsx

@@ -23,6 +23,7 @@ export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGr
   selectedCellIdx: number | undefined;
   shouldFocusGrid: boolean;
   direction: Direction;
+  disableKeyboardEvents: boolean;
 }
 
 const headerRow = css`
@@ -56,7 +57,8 @@ function HeaderRow<R, SR, K extends React.Key>({
   selectedCellIdx,
   selectCell,
   shouldFocusGrid,
-  direction
+  direction,
+  disableKeyboardEvents
 }: HeaderRowProps<R, SR, K>) {
   const dragDropKey = useId();
 
@@ -83,6 +85,7 @@ function HeaderRow<R, SR, K extends React.Key>({
         shouldFocusGrid={shouldFocusGrid && index === 0}
         direction={direction}
         dragDropKey={dragDropKey}
+        disableKeyboardEvents={disableKeyboardEvents}
       />
     );
   }