CellMouseEvent
Extends React.MouseEvent<HTMLDivElement> with grid-specific methods.
type CellMouseEvent = CellEvent<React.MouseEvent<HTMLDivElement>>;
type CellEvent<E extends React.SyntheticEvent<HTMLDivElement>> = E & {
preventGridDefault: () => void;
isGridDefaultPrevented: () => boolean;
};
Methods
Prevents the default grid behavior for this event (e.g., cell selection).
Returns whether preventGridDefault was called.
Example
import type { CellMouseArgs, CellMouseEvent } from 'react-data-grid';
function onCellClick(args: CellMouseArgs<Row>, event: CellMouseEvent) {
if (args.column.key === 'actions') {
event.preventGridDefault(); // Prevent cell selection
}
}
CellKeyboardEvent
Extends React.KeyboardEvent<HTMLDivElement> with grid-specific methods.
type CellKeyboardEvent = CellEvent<React.KeyboardEvent<HTMLDivElement>>;
type CellEvent<E extends React.SyntheticEvent<HTMLDivElement>> = E & {
preventGridDefault: () => void;
isGridDefaultPrevented: () => boolean;
};
Methods
Prevents the default grid behavior for this keyboard event (e.g., navigation, editing).
Returns whether preventGridDefault was called.
Example
import type { CellKeyboardEvent, CellKeyDownArgs } from 'react-data-grid';
function onCellKeyDown(args: CellKeyDownArgs<Row>, event: CellKeyboardEvent) {
if (args.mode === 'EDIT' && event.key === 'Escape') {
args.onClose(false); // Close without committing
event.preventGridDefault();
}
}
CellClipboardEvent
Type alias for clipboard events.
type CellClipboardEvent = React.ClipboardEvent<HTMLDivElement>;
CellMouseArgs<TRow, TSummaryRow>
Arguments passed to cell mouse event handlers.
interface CellMouseArgs<TRow, TSummaryRow = unknown> {
column: CalculatedColumn<TRow, TSummaryRow>;
row: TRow;
rowIdx: number;
selectCell: (enableEditor?: boolean) => void;
}
Properties
column
CalculatedColumn<TRow, TSummaryRow>
required
The column object of the cell.
The row object of the cell.
The row index of the cell.
selectCell
(enableEditor?: boolean) => void
required
Function to manually select the cell. Pass true to immediately start editing.
Example
import type { CellMouseArgs, CellMouseEvent } from 'react-data-grid';
function onCellClick(args: CellMouseArgs<Row>, event: CellMouseEvent) {
console.log('Clicked cell at row', args.rowIdx, 'column', args.column.key);
args.selectCell(true); // Select and start editing
}
CellKeyDownArgs<TRow, TSummaryRow>
Arguments passed to the onCellKeyDown handler. The shape differs based on whether the cell is in SELECT or EDIT mode.
type CellKeyDownArgs<TRow, TSummaryRow = unknown> =
| SelectCellKeyDownArgs<TRow, TSummaryRow>
| EditCellKeyDownArgs<TRow, TSummaryRow>;
SELECT Mode
interface SelectCellKeyDownArgs<TRow, TSummaryRow = unknown> {
mode: 'SELECT';
column: CalculatedColumn<TRow, TSummaryRow> | undefined;
row: TRow;
rowIdx: number;
selectCell: (position: Position, options?: SelectCellOptions) => void;
}
Indicates the cell is in select mode.
column
CalculatedColumn<TRow, TSummaryRow> | undefined
required
The column object of the selected cell, or undefined.
selectCell
(position: Position, options?: SelectCellOptions) => void
required
Function to select a different cell.
EDIT Mode
interface EditCellKeyDownArgs<TRow, TSummaryRow = unknown> {
mode: 'EDIT';
column: CalculatedColumn<TRow, TSummaryRow>;
row: TRow;
rowIdx: number;
navigate: () => void;
onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
}
Indicates the cell is in edit mode.
column
CalculatedColumn<TRow, TSummaryRow>
required
The column object of the cell being edited.
Function to trigger navigation after editing.
onClose
(commitChanges?: boolean, shouldFocusCell?: boolean) => void
required
Callback to close the editor.
CellSelectArgs<TRow, TSummaryRow>
Arguments passed to onSelectedCellChange.
interface CellSelectArgs<TRow, TSummaryRow = unknown> {
rowIdx: number;
row: TRow | undefined;
column: CalculatedColumn<TRow, TSummaryRow>;
}
Properties
The row index of the selected cell.
The row object of the selected cell, or undefined.
column
CalculatedColumn<TRow, TSummaryRow>
required
The column object of the selected cell.
CellCopyArgs<TRow, TSummaryRow>
Arguments passed to onCellCopy.
interface CellCopyArgs<TRow, TSummaryRow = unknown> {
column: CalculatedColumn<TRow, TSummaryRow>;
row: TRow;
}
Properties
column
CalculatedColumn<TRow, TSummaryRow>
required
The column object of the cell being copied.
The row object of the cell being copied.
CellPasteArgs<TRow, TSummaryRow>
Arguments passed to onCellPaste.
interface CellPasteArgs<TRow, TSummaryRow = unknown> {
column: CalculatedColumn<TRow, TSummaryRow>;
row: TRow;
}
Properties
column
CalculatedColumn<TRow, TSummaryRow>
required
The column object of the cell being pasted into.
The row object of the cell being pasted into.
SelectRowEvent<TRow>
Event object for row selection changes.
interface SelectRowEvent<TRow> {
row: TRow;
checked: boolean;
isShiftClick: boolean;
}
Properties
The row being selected/deselected.
Whether the row is being selected (true) or deselected (false).
Whether the shift key was pressed during selection.
Event object for header row selection changes (select all).
interface SelectHeaderRowEvent {
checked: boolean;
}
Properties
Whether all rows are being selected (true) or deselected (false).
FillEvent<TRow>
Event object for drag-fill operations.
interface FillEvent<TRow> {
columnKey: string;
sourceRow: TRow;
targetRow: TRow;
}
Properties
The key of the column being filled.
The source row being copied from.
The target row being filled.
onFill prop to handle cell value dragging.
Position
Represents a cell position in the grid.
interface Position {
readonly idx: number;
readonly rowIdx: number;
}
Properties
SelectCellOptions
Options for programmatically selecting a cell.
interface SelectCellOptions {
enableEditor?: Maybe<boolean>;
shouldFocusCell?: Maybe<boolean>;
}
Properties
Whether to enable the editor when selecting the cell.
Whether to focus the cell after selection.