Merge pull request #693 from sudhanshutech/table/tooltip

Add `customtooltip` as default for tables and fix around it
layer5io · Jul 29, 2024 · 47ac900 · 47ac900
2 parents b18a230 + a7e6225
commit 47ac900
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
@@ -50,7 +50,7 @@ function CustomTooltip({
       onClick={onClick}
       {...props}
     >
-      {children}
+      <div>{children}</div>
     </Tooltip>
   );
 }

diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx
@@ -1,10 +1,13 @@
 import { Theme, ThemeProvider, createTheme } from '@mui/material';
 import MUIDataTable from 'mui-datatables';
 import React, { useCallback } from 'react';
+import { CustomTooltip } from './CustomTooltip';
 
 const dataTableTheme = (theme: Theme) =>
   createTheme({
+    ...theme,
     components: {
+      ...theme.components,
       MuiTable: {
         styleOverrides: {
           root: {
@@ -253,7 +256,10 @@ const ResponsiveDataTable = ({
         columns={tableCols ?? []}
         data={data || []}
         title={undefined}
-        components={components}
+        components={{
+          Tooltip: CustomTooltip as unknown as React.ReactNode,
+          ...components
+        }}
         options={updatedOptions}
         {...props}
       />