Add onRowMouseEnter and onRowMouseLeave event handlers (#1027)

* Add onRowMouseEnter and onRowMouseLeave event handlers

* format w/ prettier

* undo change in settings.json

* change version to 7.5.0

Co-authored-by: Gabor Simko <[email protected]>

Author: gsimko

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "7.4.7",
+  "version": "7.5.0",
   "description": "A simple to use declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

src/DataTable/DataTable.tsx

@@ -93,6 +93,8 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 		expandableRows = defaultProps.expandableRows,
 		onRowClicked = defaultProps.onRowClicked,
 		onRowDoubleClicked = defaultProps.onRowDoubleClicked,
+		onRowMouseEnter = defaultProps.onRowMouseEnter,
+		onRowMouseLeave = defaultProps.onRowMouseLeave,
 		sortIcon = defaultProps.sortIcon,
 		onSort = defaultProps.onSort,
 		sortFunction = defaultProps.sortFunction,
@@ -204,6 +206,10 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 
 	const handleRowDoubleClicked = React.useCallback((row, e) => onRowDoubleClicked(row, e), [onRowDoubleClicked]);
 
+	const handleRowMouseEnter = React.useCallback((row, e) => onRowMouseEnter(row, e), [onRowMouseEnter]);
+
+	const handleRowMouseLeave = React.useCallback((row, e) => onRowMouseLeave(row, e), [onRowMouseLeave]);
+
 	const handleChangePage = React.useCallback(
 		(page: number) =>
 			dispatch({
@@ -454,6 +460,8 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 											onRowExpandToggled={onRowExpandToggled}
 											onRowClicked={handleRowClicked}
 											onRowDoubleClicked={handleRowDoubleClicked}
+											onRowMouseEnter={handleRowMouseEnter}
+											onRowMouseLeave={handleRowMouseLeave}
 											onSelectedRow={handleSelectedRow}
 											draggingColumnId={draggingColumnId}
 											onDragStart={handleDragStart}

src/DataTable/TableRow.tsx

@@ -61,6 +61,8 @@ type DProps<T> = Pick<
 	| 'keyField'
 	| 'onRowClicked'
 	| 'onRowDoubleClicked'
+	| 'onRowMouseEnter'
+	| 'onRowMouseLeave'
 	| 'onRowExpandToggled'
 	| 'pointerOnHover'
 	| 'selectableRowDisabled'
@@ -109,6 +111,8 @@ function Row<T>({
 	keyField,
 	onRowClicked = noop,
 	onRowDoubleClicked = noop,
+	onRowMouseEnter = noop,
+	onRowMouseLeave = noop,
 	onRowExpandToggled = noop,
 	onSelectedRow = noop,
 	pointerOnHover = false,
@@ -169,6 +173,20 @@ function Row<T>({
 		[defaultExpanderDisabled, expandOnRowDoubleClicked, expandableRows, handleExpanded, onRowDoubleClicked, row],
 	);
 
+	const handleRowMouseEnter = React.useCallback(
+		e => {
+			onRowMouseEnter(row, e);
+		},
+		[onRowMouseEnter, row],
+	);
+
+	const handleRowMouseLeave = React.useCallback(
+		e => {
+			onRowMouseLeave(row, e);
+		},
+		[onRowMouseLeave, row],
+	);
+
 	const rowKeyField = prop(row as TableRow, keyField);
 	const { style, classNames } = getConditionalStyle(row, conditionalRowStyles, ['rdt_TableRow']);
 	const highlightSelected = selectableRowsHighlight && selected;
@@ -186,6 +204,8 @@ function Row<T>({
 				dense={dense}
 				onClick={handleRowClick}
 				onDoubleClick={handleRowDoubleClick}
+				onMouseEnter={handleRowMouseEnter}
+				onMouseLeave={handleRowMouseLeave}
 				className={classNames}
 				selected={highlightSelected}
 				style={style}

src/DataTable/__tests__/DataTable.test.tsx

@@ -445,6 +445,27 @@ describe('DataTable:RowClicks', () => {
 	});
 });
 
+describe('DataTable:RowMouseEnterAndLeave', () => {
+	test('should call onRowMouseEnter and onRowMouseLeave callbacks when row is entered/left', () => {
+		const onRowMouseEnterMock = jest.fn();
+		const onRowMouseLeaveMock = jest.fn();
+		const mock = dataMock({});
+		const { container } = render(
+			<DataTable
+				data={mock.data}
+				columns={mock.columns}
+				onRowMouseEnter={onRowMouseEnterMock}
+				onRowMouseLeave={onRowMouseLeaveMock}
+			/>,
+		);
+
+		fireEvent.mouseEnter(container.querySelector('div[id="cell-1-1"]') as HTMLElement);
+		expect(onRowMouseEnterMock).toHaveBeenCalled();
+		fireEvent.mouseLeave(container.querySelector('div[id="cell-1-1"]') as HTMLElement);
+		expect(onRowMouseLeaveMock).toHaveBeenCalled();
+	});
+});
+
 describe('DataTable::progress/nodata', () => {
 	test('should render correctly when progressPending is true', () => {
 		const mock = dataMock();

src/DataTable/defaultProps.tsx

@@ -96,6 +96,8 @@ export const defaultProps = {
 	onChangeRowsPerPage: noop,
 	onRowClicked: noop,
 	onRowDoubleClicked: noop,
+	onRowMouseEnter: noop,
+	onRowMouseLeave: noop,
 	onRowExpandToggled: noop,
 	onSelectedRowsChange: noop,
 	onSort: noop,

src/DataTable/types.ts

@@ -66,6 +66,8 @@ export type TableProps<T> = {
 	onChangeRowsPerPage?: PaginationChangeRowsPerPage;
 	onRowClicked?: (row: T, e: React.MouseEvent) => void;
 	onRowDoubleClicked?: (row: T, e: React.MouseEvent) => void;
+	onRowMouseEnter?: (row: T, e: React.MouseEvent) => void;
+	onRowMouseLeave?: (row: T, e: React.MouseEvent) => void;
 	onRowExpandToggled?: ExpandRowToggled<T>;
 	onSelectedRowsChange?: (selected: { allSelected: boolean; selectedCount: number; selectedRows: T[] }) => void;
 	onSort?: (selectedColumn: TableColumn<T>, sortDirection: SortOrder) => void;

stories/props.stories.mdx

@@ -22,6 +22,8 @@ import { Meta } from '@storybook/addon-docs';
 | direction          | string               | no       | auto     | Accepts: `ltr`, `rtl`, or `auto`. When set to `auto` (default), RDT will attempt to detect direction by checking the HTML and DIV tags. For cases where you need to force rtl, or ltr just set this option manually (i.e. SSR).<br /><br />If you are using Typescript or prefer enums you can `import { Direction } from 'react-data-table-component';` and use `Direction.AUTO, Direction.LTR, or Direction.RTL |
 | onRowClicked       | `(row, event) => {}` | no       |          | Callback to access the row, event on row click.<br /> <br /><br />**Note:** If you are using custom cells (`column[].cell`), you will need to apply the `data-tag="allowRowEvents"` to the innermost element or on the elements you want to propagate the `onRowClicked` event to.                                                                                                                                |
 | onRowDoubleClicked | `(row, event) => {}` | no       |          | Callback to access the row, event on row double click.<br /><br />**Note:** If you are using custom cells (`column[].cell`), you will need to apply the `data-tag="allowRowEvents"` to the innermost element or on the elements you want to propagate the `onRowDoubleClicked` event to.                                                                                                                          |
+| onRowMouseEnter    | `(row, event) => {}` | no       |          | Callback to access the row, event on the mouse entering the row.
+| onRowMouseLeave    | `(row, event) => {}` | no       |          | Callback to access the row, event on the mouse leaving the row.
 
 # Columns