how to use Table pagination material-ui react js

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

Khabir · Accepted Answer · 2020-06-01 11:34:04Z

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

edited Jun 1, 2020 at 11:34

answered Jun 1, 2020 at 7:07

Khabir

5,8781 gold badge26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yaser.barati Over a year ago

tnx.But my question was about API. I think this link is better for you reqres.in/api/users?per_page=2

Musadul Islam · Accepted Answer · 2021-10-17 04:07:46Z

0

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>
  );
}

answered Oct 17, 2021 at 4:07

Musadul Islam

4084 silver badges11 bronze badges

1 Comment

Prateek Surana Over a year ago

Please add some more context apart from the code on how this would solve the problem mentioned in the question

Collectives™ on Stack Overflow

how to use Table pagination material-ui react js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related