I use material-ui to build a table with a column containing image.
My code as below, but the images don't display.
<TableBody>
{data.map(n => (
<TableRow key={n.id}>
<TableCell component="th" scope="row">
{n.first_name}
</TableCell>
<TableCell>{n.last_name}</TableCell>
<TableCell><image src={n.avatar}></image></TableCell>
</TableRow>
))}
</TableBody>
Are you using HTML image tag or material-ui image component? If it is HTML image tag, it should be <img src={n.avatar} /> not <image src={n.avatar}></image>!
Related
I got a table, which is looking like this:
import { Typography, Table, TableHead, TableRow, TableCell, TableBody } from '#material-ui/core';
const Example = () => {
return (
<>
<Table>
<TableHead>
<TableRow>
<TableCell align="center"><Typography> 1 </Typography></TableCell>
<TableCell align="center"><Typography> Some </Typography></TableCell>
<TableCell align="center"><Typography> Some</Typography></TableCell>
<TableCell align="center"><Typography> Some </Typography></TableCell>
<TableCell align="center"><Typography> Some </Typography></TableCell>
</TableRow>
</TableHead>
<TableBody>
{
// Here I'm loading some async data
// Meanwhile it's fetching I want to display some loading indicator
}
</TableBody>
</Table>
</>
)
}
And in the TableBody before I display a normal TableRows with data I want to display to users loading indicator that is in the middle of the table. So basically I need one TableCell inside this table that is taking all the columns width, so then I will be able to center my indicator.
How can I achieve that using MaterialUI Components and their API to make my table look like this:
You can expand the cell which you want to include the loading indicator like the following.
Table DOM structure should be considered.
<Table>
<TableHead>
{
!isLoaded
? <TableRow>
<TableCell
colSpan={5} // it seems each line has 5 table cells
align="center"
>
<LoadIndicator />
</TableCell>
: <TableBody>
...
}
Using component props.
<Table component="div">
<TableHead component="div" />
{
!isLoaded
? <LoadIndicator>
: <TableBody component="div">
...
}
...
Like the title says I need to put Link inside the table from Material UI, but i get these two errors <td> cannot appear as a child of <a> <a> cannot appear as a child of <tr>. Now obviously I know what these two error messages mean, but I need to put Link as let's say container around cells, because I need to be able to click anywhere inside the row for redirection to another page.
Here is my code:
<TableRow key={index}>
<Link
to={`/edit/${apiData.id}/${apiData.name}/${apiData.email}`}
>
<TableCell align="left" style={{ paddingLeft: 40 }}>
{apiData.name}
</TableCell>
<TableCell align="left">{apiData.email}</TableCell>
<TableCell align="left">{apiData.status}</TableCell>
<TableCell align="left">{roles}</TableCell>
</Link>
<TableCell align="right" style={{ paddingRight: 40 }}>
<RoleButton onClick={handleRoleChange}>
{roles === "Admin" ? "Set as User" : "Set as Admin"}
</RoleButton>
</TableCell>
</TableRow>
Anyone know how to fix this, if You do I would greatly appreciate that
You can use onClick in TableRow.
function HomeButton() {
let history = useHistory();
function onRowClick(name) {
history.push(`/user/${name}`);
}
return (
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow onClick={() => onRowClick('tom')}>
<TableCell>Tom</TableCell>
<TableCell>26</TableCell>
</TableRow>
</TableBody>
</Table>
);
}
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
I got this testing in Table Material ui React. And I have to check the values in each row?
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Customer</TableCell>
<TableCell>Age</Table>
</TableRow>
</TableHead>
<TableBody>
{row.map((items, index) => (
<TableRow key={index}>
<TableCell> {items.id} </TableCell>
<TableCell> {items.customer} </TableCell>
<TableCell> {items.age} </TableCell>
</TableRow>
))}
</TableBody>
</Table>
One of my problem is I have to check if the customer_id that was search are range from 200 to 300, need to verify if all that was retrieve in the list dashboard filters only in that range.
Thanks.
I want to create a new table that is composed of previously selected options from a dropdown menu (Material-UI). Since I'm new to React and Material-UI, I can't figure out how to do this.
There is already a table including a column that contains a dropdown. This dropdown allows to select multiple options.
Component TableInput:
function TableInput() {
return (
<div>
{/* First table with the multiselect-dropdown */}
<Paper>
<Table>
<TableHead>
<TableRow>
<TableCell align="right">Examns</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell align="right">
<ExamInput />
</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>
{/* Second table that should be rendered according to the selected options in the first table */}
<Paper>
<Table>
<TableHead>
<TableRow>
<TableCell align="right">Exam</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell component="th" scope="row">
{/* Here the selected options from the first table should be listed */}
{/* for example. "Master, Bachelor, PhD" */}
</TableCell>
<TableCell align="right">
{/* Here, another multiselect-dropdown should appear according to the rendered option in the first column
It is used to select the achieved score in the examn
Each examn has a predefined list of score options.*/}
</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>
</div>
)
}
Component ExamnInput (that is used in TableInput):
function ExamInput() {
const names = ['Abitur', 'Mittlere Reife', 'Master', 'Bachelor']
const [examn, setExamn] = React.useState<string[]>([])
function handleChange(event: React.ChangeEvent<{ value: unknown }>) {
setExamn(event.target.value as string[])
}
return (
<Paper>
<FormControl>
<InputLabel htmlFor="select-multiple">Exams</InputLabel>
<Select
multiple
value={examn}
onChange={handleChange}
input={<Input id="select-multiple" />}
>
{names.map(name => (
<MenuItem
key={name}
value={name}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</Paper>
)
}
Furthermore I created a super simple image showing how the whole thing should look.
Thanks so much in advance!