DataTableWithPagination.js

import React from "react";
import { Table as RBTable } from "react-bootstrap";
import styled from "styled-components";
import { useTable } from "react-table";
import { Card } from "react-bootstrap";
import PropTypes from "prop-types";
import Pagination from "../Pagination/Pagination";

const Table = styled(RBTable)``;

const DataTableWithPagination = ({ columns, data, totalPages, currentPage, onPageChange }) => {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
    columns,
    data,
  });

  return (
    <React.Fragment>
      <Card>
        <Card.Body>
          <Table {...getTableProps()}>
            <thead>
              {headerGroups.map((headerGroup) => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map((column) => (
                    <th {...column.getHeaderProps()}>{column.render("Header")}</th>
                  ))}
                </tr>
              ))}
            </thead>
            <tbody {...getTableBodyProps()}>
              {rows.map((row, i) => {
                prepareRow(row);
                return (
                  <tr {...row.getRowProps()}>
                    {row.cells.map((cell) => {
                      return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                    })}
                  </tr>
                );
              })}
            </tbody>
          </Table>
        </Card.Body>
        <Card.Footer className="d-flex flex-row-reverse">
          <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={onPageChange} />
        </Card.Footer>
      </Card>
    </React.Fragment>
  );
};

DataTableWithPagination.propTypes = {
  totalPages: PropTypes.number.isRequired,
  columns: PropTypes.array.isRequired,
  data: PropTypes.array.isRequired,
  currentPage: PropTypes.number.isRequired,
  onPageChange: PropTypes.func.isRequired,
};

export default DataTableWithPagination;