feat(theme): tables

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
layer5io · May 30, 2024 · 253f2c6 · 253f2c6
1 parent 44eb969
commit 253f2c6
Showing 1 changed file with 65 additions and 8 deletions.
diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx
@@ -1,6 +1,61 @@
+import { Theme, ThemeProvider, createTheme } from '@mui/material';
 import MUIDataTable from 'mui-datatables';
 import React, { useCallback } from 'react';
 
+const dataTableTheme = (theme: Theme) =>
+  createTheme({
+    components: {
+      MuiTable: {
+        styleOverrides: {
+          root: {
+            border: `2px solid ${theme.palette.border.normal}`,
+            width: '-webkit-fill-available',
+            '@media (max-width: 500px)': {
+              wordWrap: 'break-word'
+            }
+          }
+        }
+      },
+      MUIDataTableHeadCell: {
+        styleOverrides: {
+          data: {
+            fontWeight: 'bold',
+            textTransform: 'uppercase'
+          },
+          root: {
+            fontWeight: 'bold',
+            textTransform: 'uppercase',
+            color: theme.palette.text.default
+          }
+        }
+      },
+      MUIDataTableSearch: {
+        styleOverrides: {
+          main: {
+            '@media (max-width: 600px)': {
+              justifyContent: 'center'
+            }
+          }
+        }
+      },
+      MuiInput: {
+        styleOverrides: {
+          root: {
+            '&:before': {
+              borderBottom: `2px solid ${theme.palette.border.brand}`
+            },
+            '&.Mui-focused:after': {
+              borderBottom: `2px solid ${theme.palette.border.brand}`
+            },
+            '&:hover:not(.Mui-disabled):before': {
+              borderBottom: `2px solid ${theme.palette.border.brand}`
+            }
+          }
+        }
+      }
+    }
+  });
+
 export interface Column {
   name: string;
   label: string;
@@ -130,14 +185,16 @@ const ResponsiveDataTable = ({
   };
 
   return (
-    <MUIDataTable
-      columns={tableCols ?? []}
-      data={data || []}
-      title={undefined}
-      components={components}
-      options={updatedOptions}
-      {...props}
-    />
+    <ThemeProvider theme={dataTableTheme}>
+      <MUIDataTable
+        columns={tableCols ?? []}
+        data={data || []}
+        title={undefined}
+        components={components}
+        options={updatedOptions}
+        {...props}
+      />
+    </ThemeProvider>
   );
 };