feat: empty table

src/components/molecules/InterpretationLog.tsx

@@ -120,7 +120,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
         textAlign: 'left',
         bottom: 0,
         overflow: 'hidden',
-          }}>
+      }}
+    >
       Interpretation Log
     </button>
     <SwipeableDrawer
@@ -135,48 +136,57 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
           padding: '10px',
           height: 500,
           width: width - 10,
-              display: 'flex'
-            }
+          display: 'flex',
+        },
       }}
     >
       <Typography variant="h6" gutterBottom>
         <StorageIcon /> Output Data Preview
       </Typography>
-          <div style={{
+      <div
+        style={{
           height: '50vh',
           overflow: 'none',
           padding: '10px',
-          }}>
-            {/* <Highlight className="javascript">
-            {log}
-          </Highlight> */}
-            {tableData.length > 0 && (
+        }}
+      >
         <TableContainer component={Paper}>
           <Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table">
             <TableHead>
               <TableRow>
-                      {columns.map((column) => (
+                {columns.length > 0 ? (
+                  columns.map((column) => (
                     <TableCell key={column}>{column}</TableCell>
-                      ))}
+                  ))
+                ) : (
+                  <TableCell align="center">No Data</TableCell>
+                )}
               </TableRow>
             </TableHead>
             <TableBody>
-                    {tableData.map((row, index) => (
+              {tableData.length > 0 ? (
+                tableData.map((row, index) => (
                   <TableRow key={index}>
                     {columns.map((column) => (
                       <TableCell key={column}>{row[column]}</TableCell>
                     ))}
                   </TableRow>
-                    ))}
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={columns.length || 1} align="center">
+                    It looks like you have not selected anything for extraction yet. Once you do, the robot will show a preview of your selections here.
+                  </TableCell>
+                </TableRow>
+              )}
             </TableBody>
           </Table>
         </TableContainer>
-            )}
-            <div style={{ float: "left", clear: "both" }}
-              ref={logEndRef} />
+        <div style={{ float: 'left', clear: 'both' }} ref={logEndRef} />
       </div>
     </SwipeableDrawer>
   </Grid>
 </Grid>
+
   );
 }