Merge pull request #271 from sudhanshutech/muitable/fix

fix(components): fix mui data tables to use column visibility

Author: nebula-aac

packages/components/src/custom/ResponsiveDataTable.tsx

@@ -22,17 +22,18 @@ export interface ResponsiveDataTableProps {
   updateCols?: ((columns: Column[]) => void) | undefined;
   columnVisibility: Record<string, boolean> | undefined;
   theme?: object;
+  colViews?: Record<string, boolean> | undefined;
 }
 
 const ResponsiveDataTable = ({
   data,
   columns,
   options = {},
+  tableCols,
+  updateCols,
+  columnVisibility,
   ...props
 }: ResponsiveDataTableProps): JSX.Element => {
-  const [tableCols, updateCols] = React.useState<Column[]>(columns);
-  const [columnVisibility, ,] = React.useState<Record<string, boolean>>({});
-
   const formatDate = (date: Date): string => {
     const dateOptions: Intl.DateTimeFormatOptions = {
       weekday: 'short',
@@ -51,16 +52,20 @@ const ResponsiveDataTable = ({
         case 'add': {
           const colToAdd = columns.find((obj) => obj.name === column);
           if (colToAdd) {
-            colToAdd.options!.display = true;
-            updateCols([...columns]);
+            if (colToAdd.options) {
+              colToAdd.options.display = true;
+              updateCols && updateCols([...columns]);
+            }
           }
           break;
         }
         case 'remove': {
           const colToRemove = columns.find((obj) => obj.name === column);
           if (colToRemove) {
-            colToRemove.options!.display = false;
-            updateCols([...columns]);
+            if (colToRemove.options) {
+              colToRemove.options.display = false;
+              updateCols && updateCols([...columns]);
+            }
           }
           break;
         }
@@ -75,7 +80,7 @@ const ResponsiveDataTable = ({
         if (!col.options) {
           col.options = {};
         }
-        col.options.display = columnVisibility[col.name];
+        col.options.display = columnVisibility && columnVisibility[col.name];
 
         if (
           ['updated_at', 'created_at', 'deleted_at', 'last_login_time', 'joined_at'].includes(
@@ -103,7 +108,7 @@ const ResponsiveDataTable = ({
         }
       }
     });
-    updateCols([...columns]);
+    updateCols && updateCols([...columns]);
   }, [columnVisibility]);
 
   const components = {
@@ -112,13 +117,11 @@ const ResponsiveDataTable = ({
 
   return (
     <MUIDataTable
-      columns={columns || []}
+      columns={tableCols ?? []}
       data={data || []}
       title={undefined}
       components={components}
       options={updatedOptions}
-      tableCols={tableCols}
-      updateCols={updateCols}
       {...props}
     />
   );