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
Related
I have the following simple code that generates the location of various records in a table.
return (
<TableRow>
<TableCell >
// some code_1
</TableCell>
<TableCell >
// some code_2
</TableCell>
<TableCell>
<TableRow> // here I get warning
<TableCell>
// some code_3
</TableCell>
</TableRow>
<TableRow>
<TableCell >
// some code_4
</TableCell>
</TableRow>
<TableRow>
<TableCell >
// some code_5
</TableCell>
</TableRow>
</TableCell>
<TableCell
// some code_6
</TableCell>
</TableRow >
);
And as you can guess, when I add more components to the TableCell (in my case I add TableRow ), I get a warning:
Warning: validateDOMNesting(...): tr cannot appear as a child of td.
Tell me how to save this table structure, get rid of warnings
Copied from my comment above:
You can put table rows inside your cells but not directly. They need to be wrapped in their own seperate inner table element. In the rendered html it will look something like ... > td > table > tbody > tr > td > ...
In this examble I have wrapped your table rows in tables with table body elements, but you may want to wrap the top row in a table head element, <TableHead> instead and subsequently the rest in a table body.
Table head and body may not be required so you can try to place the rows directly inside the table element.
Here is the documentation from Material UI https://mui.com/material-ui/react-table/
return (
<TableRow>
<TableCell>
// some code_1
</TableCell>
<TableCell>
// some code_2
</TableCell>
<TableCell>
<Table>
<TableBody>
<TableRow>
<TableCell>
// some code_3
</TableCell>
</TableRow>
<TableRow>
<TableCell>
// some code_4
</TableCell>
</TableRow>
<TableRow>
<TableCell>
// some code_5
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableCell>
<TableCell>
// some code_6
</TableCell>
</TableRow>
);
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');
I have an array called paymentMethods and i want to iterate it to tabs? My problem is i can't iterate it.
Pls see my codesandbox here CLICK HERE
<div>
{paymentMethods && paymentMethods.length > 0 ? (
<Paper square className={classes.root}>
<Tabs
value={value}
onChange={handleChange}
variant="fullWidth"
indicatorColor="secondary"
textColor="secondary"
aria-label="icon label tabs example"
>
<Tab icon={<PhoneIcon />} label="Card" />
<Tab icon={<FavoriteIcon />} label="Paypal" />
</Tabs>
<Grid container spacing={4}>
<Grid item xs={12} sm={6} md={3}>
<Card className={classes.card}>
<CardHeader className={classes.cardHeader} title={`****`} />
<CardContent className={classes.content}>
<Table className={classes.table} aria-label="simple table">
<TableBody>
<TableRow>
<TableCell variant="head">Type</TableCell>
<TableCell variant="body">Card</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Card Number</TableCell>
<TableCell variant="body">***</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Expiry Month</TableCell>
<TableCell variant="body">12/2</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Expiry Year</TableCell>
<TableCell variant="body">2021</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">CVC</TableCell>
<TableCell variant="body">***</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
</Grid>
</Grid>
</Paper>
) : (
<Typography>no available</Typography>
)}
</div>
Here I have tried to make a working example. You can organize your json for more efficient looping. I just made another constant to store more parameters to put inside the tabs.
{paymentmethodNames.map((p, index) => (
<Tab icon={p.icon} label={p.title} {...a11yProps(index)} />
))}
The tabs indeed need some index-based panel selection. The panels are filled with content by looping over paymentMethods JSON data. Just add a conditional statement when you will have a change in the JSON structure. For example, PayPal does not have CVC.
You are probably looking for something like this:
<Tabs
value={value}
onChange={handleChange}
variant="fullWidth"
indicatorColor="secondary"
textColor="secondary"
aria-label="icon label tabs example"
>
{paymentMethods.map(p => (
<Tab icon={<PhoneIcon />} label="{p.label}" />
))}
</Tabs>
Note that the label and onChange code is just a guess - you probably want to put some stuff from p into the template, but I don't know what exactly.
I am using material UI with react .I am showing my data in table.Actually in table I have some titles example "
GENERAL_INFORMATION" and INFORMATION are the titles .I want to show this in middle .But my table cell is not taking width 100% why ?
here is my code
https://codesandbox.io/s/qlj0l8yrx9
<Fragment>
<TableRow key={row.id}>
<TableCell> {title}</TableCell>
</TableRow>
{row.map(({ displaytext, value }) => (
<TableRow key={row.id}>
<TableCell>{displaytext}</TableCell>
<TableCell>{value}</TableCell>
</TableRow>
))}
</Fragment>
I am taking help from this url
https://material-ui.com/demos/tables/
how about: https://codesandbox.io/s/wo9n5vvjvk
i just modify line:84
<TableCell colspan="2" style={{ "text-align": "center" }}>
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!