react-rails-pagination

• Intro
• Installation
• Examples
• Usage
• Props

Intro

React Component for adding Pagination support to Rails or any other MVC Framework. This is a lightweight component that allows you to add pagination components .i.e the page number links and the navigation (Prev/Next) links.

This component was designed for a Rails project where REACT was being used as a frontend, but this should work equally well on other MVC Frameworks or websites that require or use a similar setup as well.

Installation

yarn add react-rails-pagination

or

npm install react-rails-pagination --save

Examples

Standard Component Style

Colored Component Styles

Outlined Component Styles

Usage

import Pagination from 'react-rails-pagination';

...

function MyComponent = (props) => {
  const [page, setPage] = useState(0);
  const [totalPage, setTotalPages] = useState(0);
  // This is a default value for totalPages, update it before you render your component. For Rails you can use `Model.query.page(params[:page]).per(10).total_pages` to get this value.

  const fetchTableData = () => {
    // You can replace the below mentioned API Call with a fetch or axios or whatever else you use in your project
    Rails.ajax({
      type: 'GET',
      url: `${/your-required-path-here}?page=${currentPage}`, // Replace with the URL you want to fetch data from
      success(response) {
        ...
        //Update Table Data on success
      },
    });
  };

  handleChangePage(currentPage) {  // Required as a prop to update data in your table.
    setPage(parseInt(currentPage)); // Update Current Page
    fetchTableData(); // Fetch Data for the new page
  };

  ...

  return (
    <>
      <h3>Upcoming Events</h3>
      <table>
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Code</th>
            <th scope="col">Starts</th>
            <th scope="col">Ends</th>
          </tr>
        </thead>
        <tbody>{invitationsList}</tbody>
      </table>

      <Pagination page={page} pages={totalPages} handleChangePage={handleChangePage} />
      {/* Component render with required props */}
    </>
  );
};

Props

Name	Type	Description
page	Number	Required. The current active page.
pages	Number	Required. The Total number of pages available.
handleChangePage	Function	Required. A function that handles what happens when current active page is changed. Refer to example for demo usage
outline	Boolean	Switches style of element to outlined
color	String	Switches style of component according to color. Acceptable inputs are: primary, secondary, success, danger, warning, info
hideEndArrows	Boolean	Hide buttons that allow jumping to Last and First page
hideNavButtons	Boolean	Hide buttons that allow navigation to Next and Previous page