/react-rails-pagination

Primary LanguageSCSSMIT LicenseMIT

react-rails-pagination

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

pagination-std

Colored Component Styles

pagination-primary pagination-secondary

pagination-success pagination-danger

pagination-warning pagination-info

Outlined Component Styles

pagination-outline

pagination-outline-primary pagination-outline-secondary

pagination-outline-success pagination-outline-danger

pagination-outline-warning pagination-outline-info

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