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<R, SR>) => void>;` +###### `disableKeyboardEvents?: Maybe<boolean>` + +**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<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} 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<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(); 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<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} /> ); }