[SOLVED] Reactjs Material UI Table component causes grid to expand

Issue

This Content is from Stack Overflow. Question asked by code_learner93

I have a Table component that is nested in a Grid component and I would like the Grid component to remain in its width when my Table component is rendered. My current code causes the Grid component to expand but I’m not sure how to prevent this? I’m pretty stuck :/

Before rendering the Table component when it has not received data:
Before Table i

After rendering the Table component when it received data:
enter image description here
Here are my codes from parent to child

Mainpage

    return (
        <Box>
            <Box sx={{display: "grid", alignItems: "center", justifyContent: "center", paddingTop: "40px"}}>
                <Typography variant="h4">Some Header</Typography>
            </Box>
            <Box sx={{display: "grid", alignItems: "center", justifyContent: "center", paddingTop: "30px"}}>
                <Wallet></Wallet>
            </Box>
            <Box sx={{display: "grid", alignItems: "center", justifyContent: "center", paddingTop: "40px"}}>
                <Typography variant="h5">Some Other Header</Typography>
            </Box>
            <Box sx={{display: "grid", alignItems: "center", justifyContent: "center", paddingTop: "10px"}}>
                <Cmc></Cmc>
            </Box>
            
        </Box>
    )

Wallet

return (
        <Box>
            <Grid container rowSpacing={2} sx={{paddingInline: "25px"}} width={"100%"}>
                <Grid item xs={12}>
                    <Queryfield text={fields.staking} onFunction={getStakingAmounts}/>
                    <Stakingfield resData={resData.stakingRes}/>
                </Grid>
                <Grid item xs={12}>
                    <Queryfield text={fields.outstandingWithdrawals} onFunction={getOutstandingWithdrawals}/>
                    <Outstandingfield/>
                </Grid>
                <Grid item xs={12}>
                    <Queryfield text={fields.withdrawnAmounts} onFunction={getWithdrawnAmount}/>
                    <Withdrawnfield/>
                </Grid>
            </Grid>
        </Box>
    )

Queryfield

    return (
        <Box>
            <Typography sx={{ paddingLeft: "0px" }}>{txt}</Typography>
            <Box sx={{display: "inline-flex", width: "100%"}}>
                <TextField onChange={handleQueryChange} label="Enter Address" fullWidth type="search" variant="filled" size="small" />
                <Button variant="outlined" onClick={handleQuery}>Send</Button>
            </Box>
        </Box>
    )

Stakingfield

    const renderTable = () => {
        if (stakingRes !== "") {
            return (
                <TableContainer component={Paper}>
                <Table size="small">
                    <TableHead>
                        <TableRow>
                            <TableCell>Validator Address</TableCell>
                            <TableCell>Delegated Amount</TableCell>
                            <TableCell>Token</TableCell>
                            <TableCell>Shares</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {stakingRes.map((row, index) => (
                            <TableRow key={index}>
                                <TableCell component="th" scope="row">{row.validatorAddress}</TableCell>
                                <TableCell>{Number(row.delegatedAmount) / 10**18}</TableCell>
                                <TableCell>{row.denom}</TableCell>
                                <TableCell>{Number(row.shares) / 10**18}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
            );
        }
        else {
            return (
                <div></div>
            )
        }
    }

    return (
        <Box>
            {renderTable()}
        </Box>
    )

Solution

I solved the issue.

For anyone wondering, the Table component in Material UI is not responsive. I used a DataGrid and it all worked out.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5.CC BY-SA 3.0.CC BY-SA 4.0.

people found this article helpful. What about you?