feat: empty table

This commit is contained in:
karishmas6
2024-10-19 10:00:26 +05:30
parent 4257f382c4
commit 13ec9e1cd5

View File

@@ -107,76 +107,86 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
return (
<Grid container>
<Grid item xs={12} md={9} lg={9}>
<button
onClick={toggleDrawer(true)}
style={{
color: 'white',
position: 'fixed',
background: '#ff00c3',
border: 'none',
padding: '30px 20px',
width: 'calc(100% - 25%)',
textAlign: 'left',
bottom: 0,
overflow: 'hidden',
}}>
Interpretation Log
</button>
<SwipeableDrawer
anchor="bottom"
open={isOpen}
onClose={toggleDrawer(false)}
onOpen={toggleDrawer(true)}
PaperProps={{
sx: {
background: 'white',
color: 'black',
padding: '10px',
height: 500,
width: width - 10,
display: 'flex'
}
}}
>
<Typography variant="h6" gutterBottom>
<StorageIcon /> Output Data Preview
</Typography>
<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) => (
<TableCell key={column}>{column}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{tableData.map((row, index) => (
<TableRow key={index}>
{columns.map((column) => (
<TableCell key={column}>{row[column]}</TableCell>
))}
</TableRow>
<Grid item xs={12} md={9} lg={9}>
<button
onClick={toggleDrawer(true)}
style={{
color: 'white',
position: 'fixed',
background: '#ff00c3',
border: 'none',
padding: '30px 20px',
width: 'calc(100% - 25%)',
textAlign: 'left',
bottom: 0,
overflow: 'hidden',
}}
>
Interpretation Log
</button>
<SwipeableDrawer
anchor="bottom"
open={isOpen}
onClose={toggleDrawer(false)}
onOpen={toggleDrawer(true)}
PaperProps={{
sx: {
background: 'white',
color: 'black',
padding: '10px',
height: 500,
width: width - 10,
display: 'flex',
},
}}
>
<Typography variant="h6" gutterBottom>
<StorageIcon /> Output Data Preview
</Typography>
<div
style={{
height: '50vh',
overflow: 'none',
padding: '10px',
}}
>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table">
<TableHead>
<TableRow>
{columns.length > 0 ? (
columns.map((column) => (
<TableCell key={column}>{column}</TableCell>
))
) : (
<TableCell align="center">No Data</TableCell>
)}
</TableRow>
</TableHead>
<TableBody>
{tableData.length > 0 ? (
tableData.map((row, index) => (
<TableRow key={index}>
{columns.map((column) => (
<TableCell key={column}>{row[column]}</TableCell>
))}
</TableBody>
</Table>
</TableContainer>
)}
<div style={{ float: "left", clear: "both" }}
ref={logEndRef} />
</div>
</SwipeableDrawer>
</Grid>
</Grid>
</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>
</SwipeableDrawer>
</Grid>
</Grid>
);
}