I try to make a responsive table to display fetched data from API in react.js.
I designed a table but it is not responsive.
<TableContainer >
<Table aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell align="right">Name</StyledTableCell>
<StyledTableCell align="right">Photo</StyledTableCell>
<StyledTableCell align="right">Price</StyledTableCell>
<StyledTableCell align="right">Quentity</StyledTableCell>
<StyledTableCell align="right">Sold</StyledTableCell>
<StyledTableCell align="right">Supplier</StyledTableCell>
<StyledTableCell align="right">Manage</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{myproducts.map(product=>
<StyledTableRow >
<StyledTableCell align="right">{product.name}</StyledTableCell>
<StyledTableCell align="right"><img className='tableimage' src={product.img} alt="" /></StyledTableCell>
<StyledTableCell align="right">{product.price}</StyledTableCell>
<StyledTableCell align="right">{product.quantity}</StyledTableCell>
<StyledTableCell align="right">{product.sold}</StyledTableCell>
<StyledTableCell align="right">{product.supplier}</StyledTableCell>
<StyledTableCell align="right">
<div class="col-sm">
<button onClick={() => navigateToProductDetail(product._id)} className='btn btn-dark text-light border-light rounded-0 '>
<FontAwesomeIcon icon={faPenSquare} /></button>
<button onClick={() => handleDelete(product._id)} className='btn btn-dark border-light text-light rounded-0'>
<FontAwesomeIcon icon={ faTrash} /></button>
</div>
</StyledTableCell>
</StyledTableRow>
)}
</TableBody>
</Table>
</TableContainer>
this table is designed with material UI to display API fetch data but this table is not responsive.It only display the fetch data.
Related
Currently, I am creating a table with material-ui, and the last column of the TableHead should contain an upload button. Something like this:
image
I have tried the following:
const StyledTableCell = withStyles((theme) => ({
head: {
color: theme.palette.text.dark,
backgroundColor: theme.palette.success.light,
},
body: {
fontSize: 14,
}
}))(TableCell);
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="left">Position</StyledTableCell>
<StyledTableCell align="right">Defect Type by Worker</StyledTableCell>
<StyledTableCell align="right">Tool Decision by Worker</StyledTableCell>
<StyledTableCell align="center">
<Button variant="contained" color="primary">
Upload
</Button>
</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
...
</TableBody>
</Table>
</TableContainer>
But react will not render if you directly add a button component inside a custom tablecell. Is there a way to add a button inside a custom tablecell? Thank you.
I try your code and because you didn't provide the StyledTableRow code so I change it to TableRow and the button is working fine.
So maybe your problem is in the StyledTableRow, you can try my code like below:
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<StyledTableCell align="left">Position</StyledTableCell>
<StyledTableCell align="right">Defect Type by Worker</StyledTableCell>
<StyledTableCell align="right">Tool Decision by Worker</StyledTableCell>
<StyledTableCell align="center">
<Button variant="contained" color="primary">
Upload
</Button>
</StyledTableCell>
</TableRow>
</TableHead>
</Table>
</TableContainer>
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!
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
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>