fix: interaction issue with eligibility table

Author: stephanoshadjipetrou

src/app/components/table/data.ts

@@ -28,6 +28,7 @@ export interface TableProps {
   dataTreeStartExpanded?: boolean;
   extraColumns?: ColumnDefinition[];
   dataTreeStartExpandedFn?: (row: RowComponent, level: number) => boolean;
+  disableHover?: boolean;
 }
 
 export const cellBGColorFormatter = (cell: CellComponent) => {

src/app/components/table/index.tsx

@@ -104,10 +104,14 @@ export const Table: React.FC<TableProps> = (props: TableProps) => {
           "> .tabulator-cell:first-of-type": {
             // background: "#F1F3F5 !important",
           },
-          "&:hover": {
-            background: "#F6F7F7",
-            borderColor: "#CFD4DA",
-          },
+          "&:hover": !props.disableHover
+            ? {
+                background: "#F6F7F7 !important",
+                "> div": {
+                  background: "#F6F7F7 !important",
+                },
+              }
+            : {},
         },
       }}
     />

src/app/pages/datasets/access-to-funding/blocks/block-2/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import get from "lodash/get";
 import uniq from "lodash/uniq";
+import isEqual from "lodash/isEqual";
 import Box from "@mui/material/Box";
 import { appColors } from "app/theme";
 import Tooltip from "@mui/material/Tooltip";
@@ -19,7 +20,6 @@ import {
   cellBGColorFormatter,
   TABLE_VARIATION_10_COLUMNS as ELIGIBILITY_TABLE_COLUMNS,
 } from "app/components/table/data";
-import isEqual from "lodash/isEqual";
 
 interface AccessToFundingBlock2Props {
   filterGroups: FilterGroupModel[];
@@ -483,6 +483,7 @@ export const AccessToFundingBlock2: React.FC<AccessToFundingBlock2Props> = (
         </Box>
         <TableContainer
           dataTree
+          disableHover
           search={tableSearch}
           id="eligibility-table"
           data={dataEligibilityTable}

src/app/pages/location/views/access-to-funding/index.tsx

@@ -660,6 +660,7 @@ export const AccessToFunding: React.FC = () => {
         </Box>
         <Table
           dataTree
+          disableHover
           dataTreeStartExpanded
           id="eligibility-table"
           data={dataEligibilityTable}

src/index.css

@@ -96,12 +96,6 @@ input[type="text"] {
   background: #000;
   border-radius: 24px;
 }
-.tabulator-row:hover {
-  background: #f6f7f7 !important;
-}
-.tabulator-row:hover > div {
-  background: #f6f7f7 !important;
-}
 .tabulator-cell,
 .tabulator-col-title {
   font-size: 14px !important;