Merge pull request #629 from sudhanshutech/datatable/theme

Add theme for tables

Author: leecalcote

src/custom/ResponsiveDataTable.tsx

@@ -1,6 +1,124 @@
+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'
+            },
+            background: theme.palette.background.constant?.table,
+            color: theme.palette.text.default
+          }
+        }
+      },
+      MUIDataTableHeadCell: {
+        styleOverrides: {
+          data: {
+            fontWeight: 'bold',
+            textTransform: 'uppercase',
+            color: theme.palette.text.default
+          },
+          root: {
+            fontWeight: 'bold',
+            textTransform: 'uppercase',
+            color: theme.palette.text.default
+          }
+        }
+      },
+      MUIDataTableSearch: {
+        styleOverrides: {
+          main: {
+            '@media (max-width: 600px)': {
+              justifyContent: 'center'
+            }
+          }
+        }
+      },
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            intermediate: false,
+            color: 'transparent',
+            '&.Mui-checked': {
+              color: theme.palette.text.default,
+              '& .MuiSvgIcon-root': {
+                width: '1.25rem',
+                height: '1.25rem',
+                borderColor: theme.palette.border.brand,
+                marginLeft: '0px',
+                padding: '0px'
+              }
+            },
+            '&.MuiCheckbox-indeterminate': {
+              color: theme.palette.background.brand?.default
+            },
+            '& .MuiSvgIcon-root': {
+              width: '1.25rem',
+              height: '1.25rem',
+              border: `.75px solid ${theme.palette.border.strong}`,
+              borderRadius: '2px',
+              padding: '0px'
+            },
+            '&:hover': {
+              backgroundColor: 'transparent'
+            },
+            '&.Mui-disabled': {
+              '&:hover': {
+                cursor: 'not-allowed'
+              }
+            }
+          }
+        }
+      },
+      MuiTableCell: {
+        styleOverrides: {
+          body: {
+            color: theme.palette.text.default
+          },
+          root: {
+            borderBottom: `1px solid ${theme.palette.border.default}`
+          }
+        }
+      },
+      MUIDataTablePagination: {
+        styleOverrides: {
+          toolbar: {
+            color: theme.palette.text.default
+          }
+        }
+      },
+      MUIDataTableSelectCell: {
+        styleOverrides: {
+          headerCell: {
+            background: theme.palette.background.constant?.table
+          }
+        }
+      },
+      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 +248,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>
   );
 };
 

src/theme/palette.ts

@@ -33,6 +33,7 @@ declare module '@mui/material/styles' {
     constant?: {
       disabled: string;
       white: string;
+      table: string;
     };
     inverse?: string;
     brand?: Interactiveness;
@@ -84,6 +85,7 @@ declare module '@mui/material/styles' {
     constant?: {
       white: string;
       disabled: string;
+      table: string;
     };
     inverse?: string;
     brand?: Interactiveness;
@@ -116,6 +118,7 @@ declare module '@mui/material/styles' {
     constant?: {
       white: string;
       disabled: string;
+      table: string;
     };
     inverse?: string;
     brand?: Interactiveness;
@@ -252,7 +255,8 @@ export const lightModePalette: PaletteOptions = {
     code: Colors.charcoal[90],
     constant: {
       white: Colors.accentGrey[100],
-      disabled: Colors.charcoal[70]
+      disabled: Colors.charcoal[70],
+      table: Colors.charcoal[100]
     },
     surfaces: Colors.accentGrey[100]
   },
@@ -365,7 +369,8 @@ export const darkModePalette: PaletteOptions = {
     code: Colors.accentGrey[90],
     constant: {
       white: Colors.accentGrey[100],
-      disabled: Colors.charcoal[70]
+      disabled: Colors.charcoal[70],
+      table: '#363636'
     },
     surfaces: Colors.accentGrey[10]
   },