Disable Table pagination in material-ui Reactjs - reactjs

How to hide table pagination in material-UI if the data is empty array ?I couldn't find props that will hide it from documentation of table pagination in reactjs?
pagiantion


Try below solution
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="custom pagination table">
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row"></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
</TableRow>
))}
</TableBody>
// Add below condition to hide pagination when no rows are there
{
rows.length > 0 && (
<TableFooter>
<TableRow>
<TablePagination
.....
.....
.....
.....
.....
/>
</TableRow>
</TableFooter>
)
}
</Table>
</TableContainer>

Related

Where am I missing a key prop here? I'm generating uuids for TableCell keys and I'm using row.id for the row keys

I have this bit of code where I'm getting the warning:
Each child in a list should have a unique "key" prop. Check the render
method of AllPersonnel... at TableRow
And the table cells are not rendering. Any help would be appreciated. Thanks!
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow key={uuidv4()}>
{cols.map((col) => {
return <TableCell key={col.path}>{col.name}</TableCell>
})}
</TableRow>
</TableHead>
<TableBody>
{personnel.map((row, i) => {
return (
<TableRow key={row.id}>
<TableCell key={uuidv4()}>{row.first_name}</TableCell>
<TableCell key={uuidv4()}>{row.last_name}</TableCell>
<TableCell key={uuidv4()}>{row.section}</TableCell>
<TableCell key={uuidv4()}>{row.role}</TableCell>
<TableCell key={uuidv4()}>{row.employee_type}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>

You don't need a key on your TableRow, only on the first child in the return of an iterator.
Try :
{personnel.map((row, i) => {
const key = uuidv4()
return (
<TableRow key={key}>
<TableCell>{row.first_name}</TableCell>
...
Normaly...

Material UI, Warning <td> cannot appear as a child of <div>

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

how to add divider to dataGrid material ui And rows

I have dataGrid and I want to use Vertical Divider for Header and cells for Resize like XGridDataGrid
<Table dir aria-label="collapsible table">
<TableHead align="right">
<TableRow>
{cols}
</TableRow>
</TableHead>
<TableBody>
{rows}
</TableBody>
</Table>
Cells
cols.push(
<TableCell key='101' align="right">{Some Data}</TableCell>
);
Rows
rows.push(
<TableRow key={index}>
{cols}
</TableRow>
)

How to check range of id's in Table material ui in cypress?

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.

How can I display elements into each row?

currently I am trying to display countries into a Material-UI table. However, all the data is displaying into one row. Anyone know how to fix it? The country array contains elements per index.
<TableCell component="th" id={labelId} scope="row" >
{country}
</TableCell>

Try this
<Table >
<TableBody>
{generateRows()}
</TableBody>
</Table>
const countries =['india','usa']
const generateRows = (countries)=>{
return countries.map(country=>{
return (
<TableRow>
<TableCell component="th" scope="row">
{country}
</TableCell>
</TableRow >
)
})
}

Resources