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 |