We Keep Coding

When I render a button inside a material-ui table, the button is not clickable

My table looks as such:
<TableContainer component={Paper} style={{height: "40vh", width: "90vh"}}>
<Table size="small" sx={{ minWidth: 200 }}>
<TableHead>
<TableRow>
<TableCell align="center" width="90"></TableCell>
{consequences_description.map((description) => (
<TableCell align="center" width="90">{description}</TableCell>
)
)}
</TableRow>
</TableHead>
<TableBody>
{risk_matrix.map((row, row_index) => (
<TableRow
key={row_index}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{likelyhood_description[row_index]}
</TableCell>
{row.map( (column, column_index) => (
<TableCell align="center">
<ToggleButton
risk={column}
row_index={row_index}
column_index={column_index}
/>
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
The button inside the table is called <ToggleButton/> and it looks as such:
<ThemeProvider theme={filtersTheme}>
<Button variant="contained" color={handleColor()} onClick={console.log("Clicked")} >{risk}</Button>
</ThemeProvider>
As soon as the table renders, the console shows "Clicked", meaning the onClick function gets called for the button as soon as it renders inside the table for some reason, but I am not able to click it and fire the onClick function. Is there a way to do this?

Try to call the onClick function like this:
onClick={() => { console.log('Clicked');

Add Table Row Data within the Material-UI Accordion

I have to create a table populated with two accordions with mock data and one accordion with the data from the database using reactjs in Material-UI. I have created an accordion having the table data. I want only the Table data in the accordion not the heading. I am having trouble getting the Table data in the accordion section.
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>OutStanding</Typography>
</AccordionSummary>
<AccordionDetails>
<TableBody>
{rows.map(row => (
<ExpandingRow row={row} />
))}
</TableBody>
</AccordionDetails>
</Accordion>
</Table>
</Paper>
The Screen looks like this
current screen
How do I achieve it?
Any assistance would be greatly appreciated, thanks!

You will need to include table inside accordionDetails, and map rows.
Somewhat similar I have just created to show, Please check :
https://codesandbox.io/s/mui-table-accordion-inside-qc7sq

How to set smallest width on table column in Material-UI?

I'm building a website in React, using Material-UI. I have a table and was wondering, if it's possible to set column width to fit the data + some additional padding on both ends?
This is my table:
<Table className={classes.table} size="small">
<TableHead>
<TableRow>
<TableCell width="???">CA</TableCell> <--- Width should be as much as "Fit to data" + margin of X pixels
<TableCell width="140px">CB</TableCell>
<TableCell width="240px">CC</TableCell>
<TableCell width="200px">CD</TableCell>
<TableCell>CE</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<TableRow key={row.id}>
<TableCell>{row.ca}</TableCell>
<TableCell>{row.cb}</TableCell>
<TableCell>{row.cc}</TableCell>
<TableCell>{row.cd}</TableCell>
<TableCell>{row.ce}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
I'd like column CA to be minimal, just so it fits the data with additional space on both sides, so that content doesn't touch column borders.
I've tried:
not declaring width at all - didn't work
width="auto" - didn't work

You can target this th with css and set it to width: 1px; white-space: nowrap;
I think this should work in your case:
.MuiTableCell-head:first-child {
width: 1px;
white-space: nowrap;
}
And here's how this can be achieved using react inline-styling:
// You can also add padding or any other style props to this style object
<TableCell style={{width: '1px', whiteSpace: 'nowrap'}}>CA</TableCell>

How to make the AppBar AND table's headers sticky (so stacked under each other) on the same page when scrolling, using Material UI

Here's the AppBar and the Table's screenshots:
This is the screenshot at the top of the page.
This is the screenshot once you start scrolling down
Here's the code for the AppBar and the Table:
<AppBar position="static" style = {{background : "#00009A"}}>
<Toolbar>
<Link to="/view" className={classes.navLink} align = 'left'>
<Box textAlign = "left" >
<Typography variant="h6" flex={1} align = 'left'>
APP TITLE
</Typography>
</Box>
</Link>
<Link to="/view" className={classes.navLink}>
<Button color="inherit" align='left' }>Map Skills</Button>
</Link>
</AppBar>
<Table stickyHeader aria-label="sticky table" style={{ marginTop: 20, marginBottom: 30 }}>
<TableHead>
<TableRow>
{columns.map(column => (
<TableCell
key={column.id}
align={column.align}
style={{ width: column.minWidth, fontWeight: 500, fontSize: 17, backgroundColor: "#C1D8F7"}}
>
{column.label === "" ? props.heading : column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
I've tried to make the AppBar's "position = 'fixed' " but that just overlapped the table's header when scrolling down.
I've also tried playing around with zIndex to move stuff to the front or back.
I need them to be both stacked under each other when scrolling, instead of overlap.
But i think that table header's sticky header always sticks to the top of the page.
Any solutions would be of great help! Thanks!

Make the AppBar position="fixed", the table header paddingTop: "68px", Table stickyHeader, and get rid of any overflow: 'auto'.
<AppBar position="fixed" color="primary">
<Toolbar>
<IconButton color="secondary">
<FilterListRounded />
</IconButton>
<Typography variant="h6">App Title</Typography>
</Toolbar>
</AppBar>
...
const StyledTableCell = withStyles(() => ({
head: {
paddingTop: "68px",
},
}))(TableCell);
...
<Table size="small" stickyHeader>
<TableHead className={classes.head}>
<TableRow>
<StyledTableCell>Header 1</StyledTableCell>
<StyledTableCell>Header 2</StyledTableCell>
<StyledTableCell>Header 3</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{props.results.map(row => {
return(
<TableRow key={row.id} hover>
<TableCell>{row.one}</TableCell>
<TableCell>{row.two}</TableCell>
<TableCell>{row.three}</TableCell>
</TableRow>
)})}
</TableBody>
</Table>

Nested Material UI Dialog with Table not rendering

I have a component that renders a fullscreened <Dialog> with a <Table>.
Every row in this <Table> contains a <TableCell>, which contains a <Button> component.
When pressed, another, not fullscreened <Dialog> containing a <Table> should pop up and show what the object in the main <Table> contains.
Something like this:
---Basket---Total---Products----Date-----
-------A---------3------------[1]------someDate-- // [1] being the button
onClick() of [1] triggers the smaller <Dialog>
---Name---Price---Quantity---
----Prod-------3----------1------- // Nested <Dialog>
Now, I have a method that just parses the date I get from the backend into the Date column in the main <Table>.
Funnily, if I press the <Button> for the second, smaller <Dialog>, the method gets called again, everything freezes for 5 seconds and a bunch of windows pop up over each other.
I have my open variable in the state, so I thought that the whole thing gets rerenderer when I toggle it. Which would make sense.
I tried using <Modal> which would actually be a better option, but it just crashes Chrome. Screen becomes black with parallel lines across.
So, basically, I'm doing two loops in the <Dialog> component.
Here's the code using <Dialog>:
<Dialog
open={this.props.loadBasketsWindowOpen}
transition={Transition}
keepMounted
onClose={this.handleClose}
aria-labelledby="alert-dialog-slide-title"
aria-describedby="alert-dialog-slide-description"
fullScreen
>
<DialogTitle id="alert-dialog-slide-title">
<p style={centerDiv}>{"Baskets: "}{this.props.openBaskets.length}</p>
<hr style={horizontalLineStyle}/>
</DialogTitle>
<DialogContent>
<div style={centerDiv}>
<Table>
<TableHead>
<TableRow>
<TableCell style={tableTextStyle}>User</TableCell>
<TableCell style={tableTextStyle}>Total</TableCell>
<TableCell style=tableTextStyle}>Products</TableCell>
<TableCell style={tableTextStyle}>Date</TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.props.baskets !== undefined ?
this.props.baskets.map(basket => {
return(
<TableRow key={basket.id}>
<TableCell style={tableTextStyle}>
{basket.user}
</TableCell>
<TableCell style={tableTextStyle}>
€{basket.total}
</TableCell>
<TableCell style={tableTextStyle}>
<Button onClick={this.onToggle}>
{basket.posBasketItems.length}
<Dialog
open={this.state.innerTableWindowOpen}
onClose={this.handleClose}
aria-labelledby="alert-dialog-slide-title"
aria-describedby="alert-dialog-slide-
description"
>
<DialogTitle>
<p style={centerDiv}>
{"Cart: "}
{basket.length} Products
</p>
<hr style={horizontalLineStyle}/>
</DialogTitle>
<DialogContent>
<Table>
<TableHead>
<TableRow>
<TableCell>
Name
</TableCell>
<TableCell>
Price
</TableCell>
<TableCell>
Quantity
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{basket.items.map(item => {
return (
<TableRow key={item.id}>
<TableCell>
{item.name}
</TableCell>
<TableCell>
{item.price}
</TableCell>
<TableCell>
{item.quantity}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</DialogContent>
</Dialog>
</Button>
</TableCell>
<TableCell>
{this.parseDate(basket.date)}
</TableCell>
<TableCell>
<Button
onClick={()=>this.setToCurrentBasket(basket)}
>
<ADD_TO_SHOPPING_CART />
</Button>
</TableCell>
</TableRow>
);
}) : ''}
</TableBody>
</Table>
</div>
</DialogContent>
<DialogActions>
<div>
<MuiThemeProvider theme={cancelButtonTheme}>
<Button
variant="raised"
onClick={this.closeOpenBasketsWindow}
color="secondary"
>
CANCEL
</Button>
</MuiThemeProvider>
</div>
</DialogActions>
</Dialog>
Here's onToggle() and the state
state = {
innerTableWindowOpen: false
};
onToggle = () => {
this.setState({
innerTableWindowOpen: !this.state.innerTableWindowOpen
});
}
I would appreciate any idea to fix this with <Dialog> or <Modal> or even something similar.
The idea is to have a short preview of what's in the basket before choosing one.
Thanks!