ReactStrap pagination element exceeds available width

Question

I have a Pagination element rendered inside a Card element:

This is the code:

 <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
        <TablePagination
          pagesCount={this.props.pagesCount}
          currentPage={this.state.currentPage}
          handlePageClick={this.handlePageClick}
          handlePreviousClick={this.handlePreviousClick}
          handleNextClick={this.handleNextClick}
        />
      </Col>
    </Card>

This is the TablePagination React functional component:

import React, { Component } from "react";
import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

import PropTypes from "prop-types";
/** I used object destructuring of the props object, to pass down the properties as variables. This improves readability by getting rid of props. */
const TablePagination = ({
  pagesCount,
  currentPage,
  handlePageClick,
  handlePreviousClick,
  handleNextClick,
}) => {
  return (
    /**The reactstrap Pagination component encapsulates the reactstrap PaginationItem which in turn encapsulates reactstrap PaginationLink. */
    /**The first PaginationItem inside the Pagination is the previous button. This is disabled when the current page is zero or less
     *  than zero “disabled={currentPage <= 0}”. */
    <div>
      <Pagination size="sm">
        <PaginationItem disabled={currentPage <= 0}>
          <PaginationLink onClick={handlePreviousClick} previous href="#" />
        </PaginationItem>
        {/* The next PaginationItem after the previous PaginationItem button is the dynamic PaginationItem. This is the one that generates the page number buttons. */}
        {/* “Array(pagesCount)”: creates and initializes a new array object of length equal to pagesCount. */}
        {/* “[…Array(pagesCount)].map( fn)”: using the spread operator I expand the array. After expanding, the map() method then creates a new array of PaginationItems. */}

        {[...Array(pagesCount)].map((page, i) => (
          <PaginationItem active={i === currentPage} key={i}>
            <PaginationLink onClick={(e) => handlePageClick(e, i)} href="#">
              {i + 1}
            </PaginationLink>
          </PaginationItem>
        ))}

        <PaginationItem disabled={currentPage >= pagesCount - 1}>
          <PaginationLink onClick={handleNextClick} next href="#" />
        </PaginationItem>
      </Pagination>
    </div>
  );
};

TablePagination.propTypes = {
  //pageCount: the total number of records in our dataset.
  pagesCount: PropTypes.number.isRequired,
  //currentPage: the current page navigated to
  currentPage: PropTypes.number.isRequired,
  /**handlePageClick: a function that handles the click event when a page number is clicked.
   * This function will pass the current page number which will be saved in state. */
  handlePageClick: PropTypes.func.isRequired,
  /**handlePreviousClick: a function that handles the click event when the previous button is clicked. This enables navigating to the previous(<<) page. */
  handlePreviousClick: PropTypes.func.isRequired,
  /**handleNextClick: a function that handles the click event when the next (>>) button is clicked. This enables navigating to the next page. */
  handleNextClick: PropTypes.func.isRequired,
};
export default TablePagination;

I've searched in the documentation, I couldn't find a way to make the Pagination numbers be rendered in the next line in case they exceed the width limit.

Answer 1

You can add a style rule for the ".pagination" element

flex-wrap: wrap;

But it looks kinda crappy with several lines. I think it's better to use dots for exceeded pages, e.g. MaterialUI pagination