Fix hovering.

Author: novykh

src/components/tableV2/core/rows.js

@@ -8,6 +8,7 @@ const Rows = ({
   disableClickRow,
   getRowHandler = "getCenterVisibleCells",
   onHoverRow,
+  hoveredRow,
   onClickRow,
   pinnedStyles,
   table,
@@ -19,7 +20,6 @@ const Rows = ({
   loading,
   loadMore,
 }) => {
-  const [hoveredRow, setHoveredRow] = useState(null)
   const { rows } = table.getRowModel()
 
   const virtualizer = useVirtualizer({
@@ -47,16 +47,6 @@ const Rows = ({
   const paddingBottom =
     virtualRows.length > 0 ? totalHeight - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0
 
-  const handleOnMouseEnter = id => {
-    onHoverRow?.(id)
-    setHoveredRow(id)
-  }
-
-  const handleOnMouseLeave = () => {
-    onHoverRow?.(null)
-    setHoveredRow(null)
-  }
-
   return (
     <>
       {paddingTop > 0 && (
@@ -78,8 +68,8 @@ const Rows = ({
             disableClickRow={() =>
               disableClickRow?.({ data: row.original, table: table, fullRow: row })
             }
-            onMouseEnter={() => handleOnMouseEnter(row.id)}
-            onMouseLeave={handleOnMouseLeave}
+            onMouseEnter={() => onHoverRow(row.id)}
+            onMouseLeave={() => onHoverRow(null)}
             isHovering={row.id === hoveredRow}
             background={virtualRow.index % 2 == 0 ? "mainBackground" : "tableRowBg"}
           >

src/components/tableV2/features/useRowHover.js

@@ -0,0 +1,15 @@
+import { useCallback, useState } from "react"
+
+export default onHoverRow => {
+  const [hoveredRow, setHoveredRow] = useState(null)
+
+  const onHover = useCallback(
+    id => {
+      setHoveredRow(id)
+      onHoverRow?.(id)
+    },
+    [onHoverRow]
+  )
+
+  return [hoveredRow, onHover]
+}

src/components/tableV2/netdataTable.js

@@ -1,5 +1,5 @@
 //TODO refactor bulk action and row action to single function to decrease repeatability
-import React, { useEffect, useMemo, useState, useCallback, useRef } from "react"
+import React, { useEffect, useState, useCallback, useRef } from "react"
 import {
   getCoreRowModel,
   getFilteredRowModel,
@@ -14,6 +14,7 @@ import makePagination from "./features/pagination"
 import useBulkActions from "./features/useBulkActions"
 import ColumnPinning from "./features/columnPinning"
 import GlobalControls from "./features/globalControls"
+import useRowHover from "./features/useRowHover"
 
 import MainTable from "./features/mainTable"
 
@@ -58,6 +59,8 @@ const NetdataTable = ({
   virtualizeOptions = {},
   ...rest
 }) => {
+  const [hoveredRow, setHoveredRow] = useRowHover(onHoverRow)
+
   const [columnVisibility, setColumnVisibility] = useState(defaultColumnVisibility)
 
   useEffect(() => {
@@ -192,7 +195,8 @@ const NetdataTable = ({
             headers={table.getLeftFlatHeaders()}
             testPrefix={testPrefix}
             dataGa={dataGa}
-            onHoverRow={onHoverRow}
+            onHoverRow={setHoveredRow}
+            hoveredRow={hoveredRow}
             scrollParentRef={scrollParentRef}
             virtualizeOptions={virtualizeOptions}
           />
@@ -209,7 +213,8 @@ const NetdataTable = ({
           dataGa={dataGa}
           tableRef={tableRef}
           testPrefix={testPrefix}
-          onHoverRow={onHoverRow}
+          onHoverRow={setHoveredRow}
+          hoveredRow={hoveredRow}
           virtualizeOptions={virtualizeOptions}
           {...rest}
         />