Added mouse down and enter events for columns and cells

src/Cell.tsx

@@ -36,6 +36,8 @@ function Cell<R, SR>({
   onClick,
   onDoubleClick,
   onContextMenu,
+  onMouseDown,
+  onMouseEnter,
   onRowChange,
   selectCell,
   ...props
@@ -84,6 +86,20 @@ function Cell<R, SR>({
     selectCellWrapper(true);
   }
 
+  function handleMouseEnter(event: React.MouseEvent<HTMLDivElement>) {
+    if (onMouseEnter) {
+      const cellEvent = createCellEvent(event);
+      onMouseEnter({ row, column }, cellEvent);
+    }
+  }
+
+  function handleMouseDown(event: React.MouseEvent<HTMLDivElement>) {
+    if (onMouseDown) {
+      const cellEvent = createCellEvent(event);
+      onMouseDown({ row, column }, cellEvent);
+    }
+  }
+
   function handleRowChange(newRow: R) {
     onRowChange(column, newRow);
   }
@@ -101,6 +117,8 @@ function Cell<R, SR>({
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       onContextMenu={handleContextMenu}
+      onMouseDown={handleMouseDown}
+      onMouseEnter={handleMouseEnter}
       onFocus={onFocus}
       {...props}
     >

src/DataGrid.tsx

@@ -33,10 +33,12 @@ import type {
   CellClickArgs,
   CellKeyboardEvent,
   CellKeyDownArgs,
+  CellMouseBaseArgs,
   CellMouseEvent,
   CellNavigationMode,
   CellSelectArgs,
   Column,
+  ColumnMouseBaseArgs,
   ColumnOrColumnGroup,
   CopyEvent,
   Direction,
@@ -162,15 +164,28 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
    */
   /** Function called whenever a cell is clicked */
   onCellClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>;
+
   /** Function called whenever a cell is double clicked */
   onCellDoubleClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>;
   /** Function called whenever a cell is right clicked */
   onCellContextMenu?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>;
+  /** Function called whenever a cell is mouse down */
+  onCellMouseDown?: Maybe<(args: CellMouseBaseArgs<R, SR>, event: CellMouseEvent) => void>;
+  /** Function called whenever a mouse entered in cell */
+  onCellMouseEnter?: Maybe<(args: CellMouseBaseArgs<R, SR>, event: CellMouseEvent) => void>;
   onCellKeyDown?: Maybe<(args: CellKeyDownArgs<R, SR>, event: CellKeyboardEvent) => void>;
   /** Function called whenever cell selection is changed */
   onSelectedCellChange?: Maybe<(args: CellSelectArgs<R, SR>) => void>;
   /** Called when the grid is scrolled */
   onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;
+  /** Function called whenever a column cell is mouse down */
+  onColumnMouseDown?: Maybe<
+    (args: ColumnMouseBaseArgs<R, SR>, event: React.MouseEvent<HTMLSpanElement>) => void
+  >;
+  /** Function called whenever a mouse entered in column cell */
+  onColumnMouseEnter?: Maybe<
+    (args: ColumnMouseBaseArgs<R, SR>, event: React.MouseEvent<HTMLSpanElement>) => void
+  >;
   /** Called when a column is resized */
   onColumnResize?: Maybe<(idx: number, width: number) => void>;
   /** Called when a column is reordered */
@@ -224,10 +239,14 @@ function DataGrid<R, SR, K extends Key>(
     // Event props
     onCellClick,
     onCellDoubleClick,
+    onCellMouseDown,
+    onCellMouseEnter,
     onCellContextMenu,
     onCellKeyDown,
     onSelectedCellChange,
     onScroll,
+    onColumnMouseDown,
+    onColumnMouseEnter,
     onColumnResize,
     onColumnsReorder,
     onFill,
@@ -422,6 +441,8 @@ function DataGrid<R, SR, K extends Key>(
   const onCellClickLatest = useLatestFunc(onCellClick);
   const onCellDoubleClickLatest = useLatestFunc(onCellDoubleClick);
   const onCellContextMenuLatest = useLatestFunc(onCellContextMenu);
+  const onCellMouseDownLatest = useLatestFunc(onCellMouseDown);
+  const onCellMouseEnterLatest = useLatestFunc(onCellMouseEnter);
   const selectRowLatest = useLatestFunc(selectRow);
   const handleFormatterRowChangeLatest = useLatestFunc(updateRow);
   const selectCellLatest = useLatestFunc(selectCell);
@@ -989,6 +1010,8 @@ function DataGrid<R, SR, K extends Key>(
           onCellClick: onCellClickLatest,
           onCellDoubleClick: onCellDoubleClickLatest,
           onCellContextMenu: onCellContextMenuLatest,
+          onCellMouseDown: onCellMouseDownLatest,
+          onCellMouseEnter: onCellMouseEnterLatest,
           rowClass,
           gridRowStart,
           height: getRowHeight(rowIdx),
@@ -1098,6 +1121,8 @@ function DataGrid<R, SR, K extends Key>(
               onColumnsReorder={onColumnsReorderLastest}
               sortColumns={sortColumns}
               onSortColumnsChange={onSortColumnsChangeLatest}
+              onColumnMouseDown={onColumnMouseDown}
+              onColumnMouseEnter={onColumnMouseEnter}
               lastFrozenColumnIndex={lastFrozenColumnIndex}
               selectedCellIdx={
                 selectedPosition.rowIdx === mainHeaderRowIdx ? selectedPosition.idx : undefined

src/HeaderCell.tsx

@@ -62,6 +62,8 @@ type SharedHeaderRowProps<R, SR> = Pick<
   | 'shouldFocusGrid'
   | 'direction'
   | 'onColumnsReorder'
+  | 'onColumnMouseDown'
+  | 'onColumnMouseEnter'
 >;
 
 export interface HeaderCellProps<R, SR> extends SharedHeaderRowProps<R, SR> {
@@ -79,6 +81,8 @@ export default function HeaderCell<R, SR>({
   isCellSelected,
   onColumnResize,
   onColumnsReorder,
+  onColumnMouseDown,
+  onColumnMouseEnter,
   sortColumns,
   onSortColumnsChange,
   selectCell,
@@ -186,6 +190,18 @@ export default function HeaderCell<R, SR>({
     }
   }
 
+  function onMouseDown(event: React.MouseEvent<HTMLSpanElement>) {
+    if (onColumnMouseDown) {
+      onColumnMouseDown({ column }, event);
+    }
+  }
+
+  function onMouseEnter(event: React.MouseEvent<HTMLSpanElement>) {
+    if (onColumnMouseEnter) {
+      onColumnMouseEnter({ column }, event);
+    }
+  }
+
   function onDoubleClick() {
     onColumnResize(column, 'max-content');
   }
@@ -268,6 +284,8 @@ export default function HeaderCell<R, SR>({
       aria-rowspan={rowSpan}
       aria-selected={isCellSelected}
       aria-sort={ariaSort}
+      onMouseDown={onMouseDown}
+      onMouseEnter={onMouseEnter}
       // set the tabIndex to 0 when there is no selected cell so grid can receive focus
       tabIndex={shouldFocusGrid ? 0 : tabIndex}
       className={className}

src/HeaderRow.tsx

@@ -11,7 +11,11 @@ import { rowSelectedClassname } from './style/row';
 
 type SharedDataGridProps<R, SR, K extends React.Key> = Pick<
   DataGridProps<R, SR, K>,
-  'sortColumns' | 'onSortColumnsChange' | 'onColumnsReorder'
+  | 'sortColumns'
+  | 'onSortColumnsChange'
+  | 'onColumnsReorder'
+  | 'onColumnMouseDown'
+  | 'onColumnMouseEnter'
 >;
 
 export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGridProps<R, SR, K> {
@@ -51,6 +55,8 @@ function HeaderRow<R, SR, K extends React.Key>({
   columns,
   onColumnResize,
   onColumnsReorder,
+  onColumnMouseDown,
+  onColumnMouseEnter,
   sortColumns,
   onSortColumnsChange,
   lastFrozenColumnIndex,
@@ -79,6 +85,8 @@ function HeaderRow<R, SR, K extends React.Key>({
         onColumnResize={onColumnResize}
         onColumnsReorder={onColumnsReorder}
         onSortColumnsChange={onSortColumnsChange}
+        onColumnMouseDown={onColumnMouseDown}
+        onColumnMouseEnter={onColumnMouseEnter}
         sortColumns={sortColumns}
         selectCell={selectCell}
         shouldFocusGrid={shouldFocusGrid && index === 0}

src/Row.tsx

@@ -24,6 +24,8 @@ function Row<R, SR>(
     onCellClick,
     onCellDoubleClick,
     onCellContextMenu,
+    onCellMouseDown,
+    onCellMouseEnter,
     rowClass,
     setDraggedOverRowIdx,
     onMouseEnter,
@@ -80,6 +82,8 @@ function Row<R, SR>(
           onClick={onCellClick}
           onDoubleClick={onCellDoubleClick}
           onContextMenu={onCellContextMenu}
+          onMouseDown={onCellMouseDown}
+          onMouseEnter={onCellMouseEnter}
           onRowChange={handleRowChange}
           selectCell={selectCell}
         />

src/types.ts

@@ -145,7 +145,13 @@ export interface CellRendererProps<TRow, TSummaryRow>
   extends Pick<RenderRowProps<TRow, TSummaryRow>, 'row' | 'rowIdx' | 'selectCell'>,
     Omit<
       React.HTMLAttributes<HTMLDivElement>,
-      'style' | 'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu'
+      | 'style'
+      | 'children'
+      | 'onClick'
+      | 'onDoubleClick'
+      | 'onContextMenu'
+      | 'onMouseDown'
+      | 'onMouseEnter'
     > {
   column: CalculatedColumn<TRow, TSummaryRow>;
   colSpan: number | undefined;
@@ -155,6 +161,8 @@ export interface CellRendererProps<TRow, TSummaryRow>
   onClick: RenderRowProps<TRow, TSummaryRow>['onCellClick'];
   onDoubleClick: RenderRowProps<TRow, TSummaryRow>['onCellDoubleClick'];
   onContextMenu: RenderRowProps<TRow, TSummaryRow>['onCellContextMenu'];
+  onMouseDown: RenderRowProps<TRow, TSummaryRow>['onCellMouseDown'];
+  onMouseEnter: RenderRowProps<TRow, TSummaryRow>['onCellMouseEnter'];
   onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, newRow: TRow) => void;
 }
 
@@ -173,6 +181,15 @@ export interface CellClickArgs<TRow, TSummaryRow = unknown> {
   selectCell: (enableEditor?: boolean) => void;
 }
 
+export interface CellMouseBaseArgs<TRow, TSummaryRow = unknown> {
+  row: TRow;
+  column: CalculatedColumn<TRow, TSummaryRow>;
+}
+
+export interface ColumnMouseBaseArgs<TRow, TSummaryRow = unknown> {
+  column: CalculatedColumn<TRow, TSummaryRow>;
+}
+
 interface SelectCellKeyDownArgs<TRow, TSummaryRow = unknown> {
   mode: 'SELECT';
   row: TRow;
@@ -204,7 +221,11 @@ export interface BaseRenderRowProps<TRow, TSummaryRow = unknown>
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'>,
     Pick<
       DataGridProps<TRow, TSummaryRow>,
-      'onCellClick' | 'onCellDoubleClick' | 'onCellContextMenu'
+      | 'onCellClick'
+      | 'onCellDoubleClick'
+      | 'onCellContextMenu'
+      | 'onCellMouseDown'
+      | 'onCellMouseEnter'
     > {
   viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
   rowIdx: number;