Merge pull request #954 from amitamrutiya/custom-theme

feat: update theme for mui datatable

Author: amitamrutiya

src/custom/ResponsiveDataTable.tsx

@@ -1,4 +1,4 @@
-import { Theme, ThemeProvider, createTheme, styled } from '@mui/material/styles';
+import { Theme, styled } from '@mui/material/styles';
 import MUIDataTable, { MUIDataTableColumn } from 'mui-datatables';
 import React, { useCallback } from 'react';
 import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
@@ -104,7 +104,6 @@ export const DataTableEllipsisMenu: React.FC<{
                   <MenuItem
                     sx={{
                       width: '-webkit-fill-available'
-                      // background: theme.palette.background.surfaces
                     }}
                     onClick={() => handleActionClick(action)}
                     disabled={action.disabled}
@@ -123,142 +122,6 @@ export const DataTableEllipsisMenu: React.FC<{
   );
 };
 
-const dataTableTheme = (theme: Theme, backgroundColor?: string) =>
-  createTheme({
-    typography: {
-      fontFamily: theme.typography.fontFamily
-    },
-    palette: {
-      mode: theme.palette.mode,
-      text: {
-        primary: theme.palette.text.default,
-        secondary: theme.palette.text.secondary
-      },
-      background: {
-        default: backgroundColor || theme.palette.background?.constant?.table,
-        paper: backgroundColor || theme.palette.background?.constant?.table
-      },
-      border: { ...theme.palette.border },
-      icon: { ...theme.palette.icon }
-    },
-    components: {
-      MuiTableCell: {
-        styleOverrides: {
-          root: {
-            borderBottom: `1px solid ${theme.palette.border.default}`
-          }
-        }
-      },
-      MuiPaper: {
-        styleOverrides: {
-          root: {
-            maxWidth: '100%'
-          }
-        }
-      },
-      MuiTable: {
-        styleOverrides: {
-          root: {
-            width: '-webkit-fill-available',
-            '@media (max-width: 500px)': {
-              wordWrap: 'break-word'
-            }
-          }
-        }
-      },
-      MuiTableSortLabel: {
-        styleOverrides: {
-          root: {
-            '&.Mui-active .MuiTableSortLabel-icon': {
-              color: theme.palette.icon.default
-            }
-          }
-        }
-      },
-      MUIDataTableHeadCell: {
-        styleOverrides: {
-          data: {
-            fontWeight: 'bold',
-            textTransform: 'uppercase'
-          },
-          root: {
-            fontWeight: 'bold',
-            textTransform: 'uppercase'
-          }
-        }
-      },
-      MUIDataTableSearch: {
-        styleOverrides: {
-          main: {
-            '@media (max-width: 600px)': {
-              justifyContent: 'center'
-            }
-          }
-        }
-      },
-      MuiCheckbox: {
-        styleOverrides: {
-          root: {
-            intermediate: false,
-            color: 'transparent',
-            '&.Mui-checked': {
-              color: theme.palette.primary.main,
-              '& .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'
-              }
-            }
-          }
-        }
-      },
-      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}`
-            }
-          }
-        }
-      },
-      MuiTableRow: {
-        styleOverrides: {
-          root: {
-            '&.Mui-disabled': {
-              cursor: 'not-allowed'
-            }
-          }
-        }
-      }
-    }
-  });
-
 export interface Column {
   name: string;
   label: string;
@@ -287,10 +150,8 @@ export interface ResponsiveDataTableProps {
   tableCols?: MUIDataTableColumn[];
   updateCols?: ((columns: MUIDataTableColumn[]) => void) | undefined;
   columnVisibility: Record<string, boolean> | undefined;
-  theme?: object;
   colViews?: ColView[];
   rowsPerPageOptions?: number[] | undefined;
-  backgroundColor?: string;
 }
 const ResponsiveDataTable = ({
   data,
@@ -300,8 +161,6 @@ const ResponsiveDataTable = ({
   updateCols,
   columnVisibility,
   rowsPerPageOptions = [10, 25, 50, 100],
-  theme: customTheme,
-  backgroundColor,
   ...props
 }: ResponsiveDataTableProps): JSX.Element => {
   const formatDate = (date: Date): string => {
@@ -320,7 +179,7 @@ const ResponsiveDataTable = ({
     print: false,
     download: false,
     search: false,
-    filter: true,
+    filter: false,
     viewColumns: false,
     rowsPerPageOptions: rowsPerPageOptions,
     onViewColumnsChange: (column: string, action: string) => {
@@ -402,32 +261,19 @@ const ResponsiveDataTable = ({
     Checkbox: Checkbox
   };
 
-  const finalTheme = (baseTheme: Theme) => {
-    const defaultTheme = dataTableTheme(baseTheme, backgroundColor);
-    if (customTheme) {
-      return createTheme(
-        defaultTheme,
-        typeof customTheme === 'function' ? customTheme(baseTheme) : customTheme
-      );
-    }
-    return defaultTheme;
-  };
-
   return (
-    <ThemeProvider theme={finalTheme}>
-      <MUIDataTable
-        columns={tableCols ?? []}
-        data={data || []}
-        title={undefined}
-        components={components}
-        options={{
-          ...updatedOptions,
-          elevation: 0,
-          enableNestedDataAccess: '.'
-        }}
-        {...props}
-      />
-    </ThemeProvider>
+    <MUIDataTable
+      columns={tableCols ?? []}
+      data={data || []}
+      title={undefined}
+      components={components}
+      options={{
+        ...updatedOptions,
+        elevation: 0,
+        enableNestedDataAccess: '.'
+      }}
+      {...props}
+    />
   );
 };
 

src/custom/UsersTable/UsersTable.tsx

@@ -447,7 +447,6 @@ const UsersTable: React.FC<UsersTableProps> = ({
           tableCols={tableCols}
           updateCols={updateCols}
           columnVisibility={columnVisibility}
-          backgroundColor={theme?.palette.background.tabs}
         />
       </div>
       <PromptComponent ref={ref} />

src/theme/components.ts

@@ -18,6 +18,7 @@ import { MuiPagination } from './components/pagination.modifier';
 import { MuiSvgIcon } from './components/svgicon.modifier';
 import { MuiSwitch } from './components/switch.modifier';
 import { MuiTab } from './components/tab.modifier';
+import { MuiTableCombineTheme } from './components/table.modifier';
 import { MuiTabs } from './components/tabs.modifier';
 
 export const components: Components<Theme> = {
@@ -40,5 +41,6 @@ export const components: Components<Theme> = {
   MuiSwitch,
   MuiButtonGroup,
   MuiButton,
-  MuiListItem
+  MuiListItem,
+  ...MuiTableCombineTheme
 };

src/theme/components/table.modifier.ts

@@ -0,0 +1,101 @@
+import { Components, Theme } from '@mui/material/styles';
+
+const MuiTable: Components<Theme>['MuiTable'] = {
+  styleOverrides: {
+    root: {
+      borderCollapse: 'separate',
+      borderSpacing: '0'
+    }
+  }
+};
+
+const MuiTableBody: Components<Theme>['MuiTableBody'] = {
+  styleOverrides: {
+    root: ({ theme }) => {
+      return { backgroundColor: theme.palette.background.constant?.table };
+    }
+  }
+};
+
+const MuiTableCell: Components<Theme>['MuiTableCell'] = {
+  styleOverrides: {
+    root: ({ theme }) => {
+      return { borderBottom: `1px solid ${theme.palette.icon.disabled}` };
+    }
+  }
+};
+
+const MuiTableFooter: Components<Theme>['MuiTableFooter'] = {
+  styleOverrides: {
+    root: ({ theme }) => {
+      return {
+        backgroundColor: theme.palette.background.card
+      };
+    }
+  }
+};
+
+const MuiTableHead: Components<Theme>['MuiTableHead'] = {
+  styleOverrides: {
+    root: ({ theme }) => {
+      return {
+        backgroundColor: theme.palette.background.card,
+        fontWeight: 'bold',
+        textTransform: 'uppercase'
+      };
+    }
+  }
+};
+
+const MuiTableRow: Components<Theme>['MuiTableRow'] = {
+  styleOverrides: {
+    root: {
+      '&.Mui-disabled': {
+        cursor: 'not-allowed'
+      }
+    }
+  }
+};
+
+const MuiTableSortLabel: Components<Theme>['MuiTableSortLabel'] = {
+  styleOverrides: {
+    root: ({ theme }) => {
+      return {
+        '& .MuiTableSortLabel-icon': {
+          color: `${theme.palette.icon.default} !important`
+        }
+      };
+    }
+  }
+};
+
+const MUIDataTableSelectCell: Components<Theme>['MUIDataTableSelectCell'] = {
+  styleOverrides: {
+    root: {
+      backgroundColor: 'transparent'
+    }
+  }
+};
+
+const MuiToolbar: Components<Theme>['MuiToolbar'] = {
+  styleOverrides: {
+    root: ({ theme }) => {
+      return {
+        backgroundColor: theme.palette.background.card,
+        color: theme.palette.text.default
+      };
+    }
+  }
+};
+
+export const MuiTableCombineTheme = {
+  MuiTable,
+  MuiTableBody,
+  MuiTableCell,
+  MuiTableFooter,
+  MuiTableHead,
+  MuiTableRow,
+  MuiTableSortLabel,
+  MUIDataTableSelectCell,
+  MuiToolbar
+};