diff --git a/client/src/Components/Table/index.jsx b/client/src/Components/Table/index.jsx
index 66db50fbe..bfafb5387 100644
--- a/client/src/Components/Table/index.jsx
+++ b/client/src/Components/Table/index.jsx
@@ -7,6 +7,7 @@ import {
TableHead,
TableRow,
} from "@mui/material";
+import Tooltip from "@mui/material/Tooltip";
import SkeletonLayout from "./skeleton";
import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
@@ -41,6 +42,7 @@ const DataTable = ({
data = [],
config = {
emptyView: "No data",
+ tooltipContent: null,
onRowClick: () => {},
},
}) => {
@@ -101,24 +103,54 @@ const DataTable = ({
data.map((row) => {
const key = row.id || row._id || Math.random();
return (
- config.onRowClick(row) : null}
+ followCursor
+ enterDelay={500}
+ enterNextDelay={500}
+ title={
+ typeof config.tooltipContent === "function"
+ ? config.tooltipContent(row)
+ : config.tooltipContent
+ }
+ slotProps={{
+ tooltip: {
+ sx: {
+ background: "unset",
+ },
+ },
+ popper: {
+ modifiers: [
+ {
+ name: "offset",
+ options: {
+ offset: ({ popper }) => {
+ return [popper.width / 2 + 20, -popper.height / 8];
+ },
+ },
+ },
+ ],
+ },
+ }}
>
- {headers.map((header, index) => {
- return (
- header.onClick(e, row) : null}
- sx={header.getCellSx ? header.getCellSx(row) : {}}
- >
- {header.render(row)}
-
- );
- })}
-
+ config.onRowClick(row) : null}
+ >
+ {headers.map((header, index) => {
+ return (
+ header.onClick(e, row) : null}
+ sx={header.getCellSx ? header.getCellSx(row) : {}}
+ >
+ {header.render(row)}
+
+ );
+ })}
+
+
);
})
)}