I have nested JSON and I want to display his data using the table. However, headers of the columns are not aligned well. Does anyone know what should I do to have a proper aligned table?
Code:
return(
<div>
<h1 className="text-center">Programs</h1>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={{borderBottom:"none"}}><h1>Program Name</h1></TableCell>
<TableCell style={{borderBottom:"none"}}><h1>Course Name</h1></TableCell>
<TableCell style={{borderBottom:"none"}}><h1>Price</h1></TableCell>
</TableRow>
</TableHead>
<TableBody>
{
this.state.programs.map(
program =>
<TableRow onClick={this.courseClick.bind(this)}>
<TableCell style={{borderBottom:"none"}}>{program.name}</TableCell>
<div id="myDIV">
{
<TableCell style={{borderBottom:"none"}}>{program.courses.map(course =>
<TableRow>
<TableCell style={{borderBottom:"none"}}>{course.courseName}</TableCell>
<TableCell style={{borderBottom:"none"}}>{course.price}</TableCell>
<Button type="submit" variant="contained" color="primary" onClick={()=> this.myClick(course)}>Add to cart
<IconButton aria-label="cart">
<StyledBadge color="secondary">
<ShoppingCartIcon />
</StyledBadge>
</IconButton>
</Button>
<br></br>
<br></br>
</TableRow>)}
</TableCell>
}</div>
<TableCell style={{borderBottom:"none"}}>
<Button type="submit" variant="contained" color="primary" onClick={()=> this.deleteFunction(program.name)}>Delete
<Grid item xs={8}>
<DeleteForeverIcon />
</Grid></Button>
</TableCell>
</TableRow>
)
}
</TableBody>
</Table>
<Button type="submit" variant="contained" color="primary" onClick={()=> window.location.href="/add-program"}>Add new</Button>
</div>
Image of the table:
Thanks!
Related
const ResultsAccordion = ({projects, projectStatus}) =>
{
return (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
<Typography>{projectStatus}</Typography>
</AccordionSummary>
<AccordionDetails>
<TableContainer component={Paper} sx={{my:2 }}>
<Table>
<TableHead>
<TableRow style={{ width:"100%" }}>
<TableCell align="center">Team Name</TableCell>
<TableCell align="center">Project Link</TableCell>
<TableCell align="center">Team Members</TableCell>
</TableRow>
</TableHead>
<TableBody>
{
projects.map((value) =>
{
return (
<TableRow key={value.name}>
<TableCell align="center">
{value.name}
</TableCell>
<TableCell align="center">
<Link href={value.repo}>Project Repo</Link>
</TableCell>
<TableCell align="center">
<Stack direction="row" spacing={1} alignContent="center">
{
(value.members).map((item, key) =>
{
return (
<Chip key={key} component="a" href={`https://github.com/${item.github}`} clickable label={item.github} avatar={<Avatar alt={item.github} src={item.avatar}/> } />
);
})
}
</Stack>
</TableCell>
</TableRow>
);
})
}
</TableBody>
</Table>
</TableContainer>
</AccordionDetails>
</Accordion>
);
};
Chips are supposed to be returned in the Table Cell with Stack..
But there is no one.
I used the react Developers tools and there is no childrens in Stack.
The chips are rendered if i made any changes in the prop using ReactDevTools
I checked, the value.members array & it is also not empty.
I'm using React, typescript and Material UI. I've created a pretty common "Create user form" with basic inputs for username, name, email, ect. Added two buttons, "Edit" and "Delete." Everything seems to function properly, however, I cannot get this error message resolved.
Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>.
Here's the table from a react component:
<TableContainer className={classes.scroll} component={Paper}>
<Table stickyHeader aria-label="table">
<TableHead>
<TableRow>
<TableCell>Username</TableCell>
<TableCell align="right">First name</TableCell>
<TableCell align="right">Last name</TableCell>
<TableCell align="right">Email</TableCell>
<TableCell align="right">Connect_username</TableCell>
<TableCell align="right">Role</TableCell>
<TableCell align="left">Edit</TableCell>
<TableCell align="left">Delete</TableCell>
</TableRow>
</TableHead>
<TableBody>
{(rowsPerPage > 0
? props?.items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: props?.items
).map(item => (
<TableRow key={item.user_id}>
<TableCell component="th">{item.username}</TableCell>
<TableCell align="right">{item.first_name}</TableCell>
<TableCell align="right">{item.last_name}</TableCell>
<TableCell align="right">{item.email}</TableCell>
<TableCell align="right">{item.connect_username}</TableCell>
<TableCell align="right">{item.role?.map(r=>r.role).join(",")}</TableCell>
<TableCell>
<Button onClick={() => props.handleEdit(item)}>Edit</Button>
</TableCell>
<TableCell>
<Button onClick={() => props.handleConfirmDelete(item.user_id)}>Delete</Button>
</TableCell>
</TableRow>
))}
</TableBody>
<TablePagination
rowsPerPageOptions={[10, 25, { label: 'All', value: -1 }]}
count={props.items.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Table>
</TableContainer>
component={Paper} is likely causing this. Can you try removing it? If you want the table to appear on a Paper component, then try nesting TableContainer under Paper.
put TablePagination in the TableBody tag and wrap it in TableRow.
Had a similar issue and this fixed it.
Like this:
<TableBody>
{(rowsPerPage > 0
? props?.items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: props?.items)
.map(item => (
<TableRow key={item.user_id}>
<TableCell component="th">{item.username}</TableCell>
<TableCell align="right">{item.first_name}</TableCell>
<TableCell align="right">{item.last_name}</TableCell>
<TableCell align="right">{item.email}</TableCell>
<TableCell align="right">{item.connect_username}</TableCell>
<TableCell align="right">{item.role?.map(r=>r.role).join(",")}</TableCell>
<TableCell>
<Button onClick={() => props.handleEdit(item)}>
Edit
</Button>
</TableCell>
<TableCell>
<Button onClick={() => props.handleConfirmDelete(item.user_id)}>
Delete
</Button>
</TableCell>
</TableRow>
<TableRow>
<TablePagination
rowsPerPageOptions={[10, 25, { label: 'All', value: -1 }]}
count={props.items.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</TableRow>
))}
</TableBody>
update: "#mui/material": "^5.10.9"
in my case this error was causing TablePagination and not Paper component.
working solution is wrapping pagination not only with row but also footer as follow
<TableContainer component={Paper}>
<Table>
<TableBody>
...
</TableBody>
<TableFooter>
<TableRow>
<TablePagination />
</TableRow>
</TableFooter>
</Table>
</TableContainer>
mui docs: https://mui.com/material-ui/react-table/#custom-pagination-actions
The function is called on form submission. at first, it is working as expected but when calling this function on form submit. I get this following error.index.js:1 Warning: React has detected a change in the order of Hooks called by null. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks:
Previous render Next render
useState useState
undefined useState
Here is the code sample :
function TablerowsAdd ( x,i,header,handleRemove, startEditing,editIdx,handleChange,stopEditing,handleRemoveField,fieldIdx,startEditingField,fieldheader) {
const [open, setOpen] = useState(false);
const currentlyEditing = editIdx === i;
return (
<React.Fragment key={`tr-${i}`}>
<TableRow key={`tr-${i}`}>
{header.map((y, k) => (
<TableCell key={`trc-${k}`}>
{currentlyEditing ? (
<TextField
name={y.prop}
onChange={e => handleChange(e, y.prop, i)}
value={x[y.prop]}
/>
) : (
x[y.prop]
)}
</TableCell>
))}
<TableCell>
{currentlyEditing ? (
<CheckIcon onClick={() => stopEditing()} />
) : (
<EditIcon onClick={() => startEditing(i)} />
)}
<DeleteIcon onClick={() => handleRemove(i)} />
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)} >
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box margin={1}>
<Typography variant="h6" gutterBottom component="div">
Fields
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
{fieldheader.map((x, i) => (
<TableCell key={`thc-${i}`}>{x.name} </TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{x.fields.map((fieldRow,y) => (
<TableRow key={`tr-${y}`}>
<TableCell>{fieldRow.bitname}</TableCell>
<TableCell>{fieldRow.bitmask}</TableCell>
<TableCell >{fieldRow.bitvalue}</TableCell>
<TableCell >{fieldRow.maskname}</TableCell>
<TableCell > {fieldRow.doc} </TableCell>
<TableCell >
<DeleteIcon onClick={() => handleRemoveField(i,fieldRow.bitname,y)} /> </TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
); };
If call count of TablerowsAdd varies, the call count of useState varies too.
Try using a component: <TablerowsAdd/> instead of method call: TablerowsAdd(). This way useState is called exactly once per component
This question already has answers here:
Cloud Firestore collection count
(29 answers)
Closed 3 years ago.
I have a table to display users collection including search filter. Now I want to add a material-ui pagination, where i want to pass the total record count.
the pagination works fine. How can I get that?
Any help appreciated.!
table and table pagination code
<Table className={classes.table}>
<TableHead>
<TableRow className={classes.tableHeader}>
<TableCell >#</TableCell>
<TableCell ></TableCell>
<TableCell>Name</TableCell>
<TableCell align="right">Phone</TableCell>
<TableCell align="right">Role</TableCell>
<TableCell align="right">Service</TableCell>
<TableCell align="right">Location</TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredList && filteredList
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map(row => (
<TableRow key={row.id}>
<TableCell>{items++}</TableCell>
<TableCell align="right">
<Link to={'/admin/profile/' + row.id} key={row.id} >
<Tooltip title="View Profile">
<UserIcon/>
</Tooltip>
</Link>
</TableCell>
<TableCell component="th" scope="row">
{row.sp_Name}
</TableCell>
<TableCell align="right">{row.sp_Phone}</TableCell>
<TableCell align="right">{row.sp_Role}</TableCell>
<TableCell align="right">{row.sp_Service}</TableCell>
<TableCell align="right">{row.sp_Location}</TableCell>
{/* <TableCell align="right">
<ApproveIcon onClick={this.handleClickDialogOpen} className={classes.icon} />
</TableCell> */}
<TableCell align="right">
<Tooltip title="Delete">
<DeleteIcon onClick={() => this.handleClickDialogOpen(row.id)} className={classes.icon} />
{/* <DeleteIcon onClick={() => deleteSP(row.id)} className={classes.icon} /> */}
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
//count={5}
count ={filteredList.length} -- I want to pass count
rowsPerPage={this.state.rowsPerPage}
page={this.state.page}
backIconButtonProps={{
'aria-label': 'Previous Page',
}}
nextIconButtonProps={{
'aria-label': 'Next Page',
}}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>
Firestore doesn't keep a count of the number of documents in a collection. If you need that, you'll have to store it yourself and keep it up to date. For an example of this, see the documentation on aggregation queries and distributed counters.
Also see: Firebase firestore collection count
I have an algorithm for generating a table of two arrays.
data = [mail, cat, dog]
words = [{postman, mailbox, letter}, {kitty, kitten, koshak, kotyara}, {dog, friend}]
The number of "subarrays" in the words array is always equal to the number of elements in the data array.
The data array is the column headings, and the "subarrays" of words must be columns.
My generation algorithm works fine, but the "subarrays" in my implementation are obtained as rows, and as I said, I need to have columns.
<Paper style={{ maxWidth: 936, margin: "auto" }}>
<Table>
<TableHead>
<TableRow>
{data.map((TableRow, i) => (
<TableCell key={i} align="center">
{TableRow.split("_").join(" ")}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{this.state.array.map((user, i) => (
<TableRow key={i}>
{Object.values(user).map((v, j) => (
<TableCell key={j} align="center">
<IconButton>
<AddIcon/>
</IconButton>
{v}
<IconButton>
<RemoveIcon/>
</IconButton>
</TableCell>
))}
</TableRow>
))}
<TableRow>
<TableCell align="center">
<Button variant="contained"
color="primary"
style={{
background:
"linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)"
}}
>Обучить
</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>