how to use Table pagination material-ui react js - arrays

Question

Hi I use react js and I'm new. I want to use Table pagination material-ui for a table that does not belong to material-ui.For example, I want 2 row per page.I use the reactStrap table. If possible, tell me how to do it.
render() {
const items = this.props.items.map(item => {
return (
<tr key={item.id}>
<td>
<div style={{ width: "110px" }}>
<Button
color="success"
buttonLabel="Edit"
item={item}
updateState={this.props.updateState}
>
Edit
</Button>
<Button color="danger" onClick={() => this.deleteItem(item.id)}>
Del
</Button>
</div>
</td>
<th scope="row">{item.id}</th>
<td>{item.name}</td>
<td>{item.username}</td>
<td>{item.email}</td>
</tr>
);
});
return (
<div
style={{
maxHeight: "600px",
overflowY: "auto"
}}
>
<Table responsive hover>
<thead>
<tr>
<th>Action</th>
<th>ID</th>
<th>name</th>
<th>username</th>
<th>email</th>
</tr>
</thead>
<tbody>{items}</tbody>
</Table>
</div>
);
}
}
You can see my table in CodeSandbox.Thanks in advance for your answers

Answer 1

I prepared an example Only for pagination. You need to work on api calling with the paging parameters. As your api is returning only 10 records, so I set rowsPerPage: 5 so that you can get the reflection of changing page. but default value should be rowsPerPage: 10
state = {
items: [],
page: 0,
rowsPerPage: 5
};
Update:
You need update the url with the state value like below:
let url = `https://reqres.in/api/users?page=${this.state.page +
1}&per_page=${this.state.rowsPerPage}`;
And then call api when you change the page. Please check the below link for code.
Here is the Code Sandbox

Answer 2

import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Pagination from '#material-ui/lab/Pagination';
const useStyles = makeStyles((theme) => ({
root: {
"& > * + *": {
marginTop: theme.spacing(2),
},
},
}));
export default function PaginationComponent(props) {
const classes = useStyles();
const [page, setPage] = React.useState(1);
const handleChange = (value) => {
setPage(value);
props.paginationHandler(value);
};
return (
<div className={classes.root}>
<Pagination
count={props.totalCount}
page={page}
variant="outlined"
color="primary"
onChange={handleChange}
/>
</div>
);
}