currently looks like

I want to have 2 tables side by side in React using Material UI.

This is the table.

function BasicTable() {
return (
  <TableContainer component={Paper}>
    <Table sx={{ minWidth: 300 }} aria-label="simple table">
      <TableHead>
        <TableRow>
          <TableCell>Dessert (100g serving)</TableCell>
          <TableCell align="right">Calories</TableCell>
          <TableCell align="right">Fat&nbsp;(g)</TableCell>
          <TableCell align="right">Carbs&nbsp;(g)</TableCell>
          <TableCell align="right">Protein&nbsp;(g)</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {rows.map((row) => (
          <TableRow
            key={row.name}
            sx={{ '&:last-child td, &:last-child th': { border: 0} }}
          >
            <TableCell component="th" scope="row">
              {row.name}
            </TableCell>
            <TableCell align="right">{row.calories}</TableCell>
            <TableCell align="right">{row.fat}</TableCell>
            <TableCell align="right">{row.carbs}</TableCell>
            <TableCell align="right">{row.protein}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
);

}

This is my code for displaying the table twice side by side.

  <Box
    sx={{ 
    
    float:'left',
    clear: 'both',
    p:10,
    m:5, 
    bgcolor: 'background.paper', 
    borderRadius: 1,
   display: 'inline-flex', 
   direction:'row' }}>
   <BasicTable/>
    </Box>


    <Box
    sx={{ 
    float: 'right',
    clear: 'both',
    width:'200',
    //display: table,
    p:10,
    m:5, 
    bgcolor: 'background.paper', 
    borderRadius: 1,
   display: 'inline-block',
   direction:'row'
  // width:'50%' 
}}
    
    >
    <BasicTable/>
    </Box>
   

I'm only quite able to achieve this.currently looks like

I'm new to Material UI and its so hard to format without using a CSS file. Any help would be appreciated. Thanks.

CodePudding user response：

You can use Grid rather than Box.

<Grid container spacing={2}>
  <Grid item sm={6}>
   <BasicTable/>
  </Grid>
 <Grid item sm={6}>
   <BasicTable/>
 </Grid>
</Grid>

CodePudding user response：

You can use Stack too:

<Stack direction='row'>
   <BasicTable />
   <BasicTable />
</Stack>