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 ( return (
<Grid container> <Grid container>
<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
<button <button
onClick={toggleDrawer(true)} onClick={toggleDrawer(true)}
style={{ style={{
color: 'white', color: 'white',
position: 'fixed', position: 'fixed',
background: '#ff00c3', background: '#ff00c3',
border: 'none', border: 'none',
padding: '30px 20px', padding: '30px 20px',
width: 'calc(100% - 25%)', width: 'calc(100% - 25%)',
textAlign: 'left', textAlign: 'left',
bottom: 0, bottom: 0,
overflow: 'hidden', overflow: 'hidden',
}}> }}
Interpretation Log >
</button> Interpretation Log
<SwipeableDrawer </button>
anchor="bottom" <SwipeableDrawer
open={isOpen} anchor="bottom"
onClose={toggleDrawer(false)} open={isOpen}
onOpen={toggleDrawer(true)} onClose={toggleDrawer(false)}
PaperProps={{ onOpen={toggleDrawer(true)}
sx: { PaperProps={{
background: 'white', sx: {
color: 'black', background: 'white',
padding: '10px', color: 'black',
height: 500, padding: '10px',
width: width - 10, height: 500,
display: 'flex' width: width - 10,
} display: 'flex',
}} },
> }}
<Typography variant="h6" gutterBottom> >
<StorageIcon /> Output Data Preview <Typography variant="h6" gutterBottom>
</Typography> <StorageIcon /> Output Data Preview
<div style={{ </Typography>
height: '50vh', <div
overflow: 'none', style={{
padding: '10px', height: '50vh',
}}> overflow: 'none',
{/* <Highlight className="javascript"> padding: '10px',
{log} }}
</Highlight> */} >
{tableData.length > 0 && ( <TableContainer component={Paper}>
<TableContainer component={Paper}> <Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table">
<Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table"> <TableHead>
<TableHead> <TableRow>
<TableRow> {columns.length > 0 ? (
{columns.map((column) => ( columns.map((column) => (
<TableCell key={column}>{column}</TableCell> <TableCell key={column}>{column}</TableCell>
))} ))
</TableRow> ) : (
</TableHead> <TableCell align="center">No Data</TableCell>
<TableBody> )}
{tableData.map((row, index) => ( </TableRow>
<TableRow key={index}> </TableHead>
{columns.map((column) => ( <TableBody>
<TableCell key={column}>{row[column]}</TableCell> {tableData.length > 0 ? (
))} tableData.map((row, index) => (
</TableRow> <TableRow key={index}>
{columns.map((column) => (
<TableCell key={column}>{row[column]}</TableCell>
))} ))}
</TableBody> </TableRow>
</Table> ))
</TableContainer> ) : (
)} <TableRow>
<div style={{ float: "left", clear: "both" }} <TableCell colSpan={columns.length || 1} align="center">
ref={logEndRef} /> It looks like you have not selected anything for extraction yet. Once you do, the robot will show a preview of your selections here.
</div> </TableCell>
</SwipeableDrawer> </TableRow>
</Grid> )}
</Grid> </TableBody>
</Table>
</TableContainer>
<div style={{ float: 'left', clear: 'both' }} ref={logEndRef} />
</div>
</SwipeableDrawer>
</Grid>
</Grid>
); );
} }