diff --git a/README.md b/README.md index e131eac6cf..d56243a30b 100644 --- a/README.md +++ b/README.md @@ -200,6 +200,12 @@ A number defining the height of summary rows. ###### `onSelectedCellChange?: Maybe<(args: CellSelectArgs) => void>;` +###### `disableKeyboardEvents?: Maybe` + +**Default:** `false` + +Disables keyboard interaction for the header cells + Triggered when the selected cell is changed. Arguments: diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 5fd10c4e83..b297b53aa2 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -160,6 +160,8 @@ export interface DataGridProps extends Sha /** * Event props */ + /** Disables all keyboard events like using space or enter to sort the columns */ + disableKeyboardEvents?: Maybe, NoInfer>, event: CellMouseEvent) => void @@ -248,6 +250,7 @@ function DataGrid( className, style, rowClass, + disableKeyboardEvents, direction: rawDirection, // ARIA role: rawRole, @@ -1114,6 +1117,7 @@ function DataGrid( selectedCellIdx={ selectedPosition.rowIdx === mainHeaderRowIdx ? selectedPosition.idx : undefined } + disableKeyboardEvents={disableKeyboardEvents} selectCell={selectHeaderCellLatest} shouldFocusGrid={!selectedCellIsWithinSelectionBounds} direction={direction} diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index 2dde6d2fe0..08d4648cbd 100644 --- a/src/HeaderCell.tsx +++ b/src/HeaderCell.tsx @@ -70,6 +70,7 @@ export interface HeaderCellProps extends SharedHeaderRowProps { rowIdx: number; isCellSelected: boolean; dragDropKey: string; + disableKeyboardEvents: boolean; } export default function HeaderCell({ @@ -84,7 +85,8 @@ export default function HeaderCell({ selectCell, shouldFocusGrid, direction, - dragDropKey + dragDropKey, + disableKeyboardEvents }: HeaderCellProps) { const [isDragging, setIsDragging] = useState(false); const [isOver, setIsOver] = useState(false); @@ -199,6 +201,8 @@ export default function HeaderCell({ } function onKeyDown(event: React.KeyboardEvent) { + if(disableKeyboardEvents) return; + if (event.key === ' ' || event.key === 'Enter') { // prevent scrolling event.preventDefault(); diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx index 7b4c7cb755..029bec9d92 100644 --- a/src/HeaderRow.tsx +++ b/src/HeaderRow.tsx @@ -23,6 +23,7 @@ export interface HeaderRowProps extends SharedDataGr selectedCellIdx: number | undefined; shouldFocusGrid: boolean; direction: Direction; + disableKeyboardEvents: boolean; } const headerRow = css` @@ -56,7 +57,8 @@ function HeaderRow({ selectedCellIdx, selectCell, shouldFocusGrid, - direction + direction, + disableKeyboardEvents }: HeaderRowProps) { const dragDropKey = useId(); @@ -83,6 +85,7 @@ function HeaderRow({ shouldFocusGrid={shouldFocusGrid && index === 0} direction={direction} dragDropKey={dragDropKey} + disableKeyboardEvents={disableKeyboardEvents} /> ); }