Reset pagination to the first page by clicking a button outside the component

Question

I'm using material UI usePagination hook to create a custom pagination component, so far so good, the functionality works as expected but I was wondering how I can be able to reset the pagination to the first page by triggering a button that is not part of the pagination component.

Does anyone has an idea on how to trigger that?

This is my component.

import React from "react";
import PropTypes from "prop-types";
import { usePagination } from "hooks";

function arrow(type) {
  return (
    <i
      className={`fa fa-chevron-${
        type === "next" ? "right" : "left"
      } page-icon`}
    />
  );
}

function Pagination({ data, itemCount, onChange }) {
  const { items } = usePagination({
    count: Math.ceil(data.length / itemCount, 10),
    onChange
  });

  return (
    <nav aria-label="Paginator">
      <ul className="pagination-component">
        {items.map(({ page, type, selected, ...item }, index) => {
          let children;

          if (type === "start-ellipsis" || type === "end-ellipsis") {
            children = "…";
          } else if (type === "page") {
            children = (
              <button
                type="button"
                automation-tag={`page-${page}`}
                className={`page-button ${selected ? "selected" : ""}`}
                {...item}
              >
                {page}
              </button>
            );
          } else {
            children = (
              <button
                automation-tag={type}
                className="page-button"
                type="button"
                {...item}
              >
                <span className="d-none">{type}</span>
                {arrow(type)}
              </button>
            );
          }

          return (
            // eslint-disable-next-line react/no-array-index-key
            <li key={index} className="page-item">
              {children}
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

What I'm trying is to create a select component that the onChange function will sort the data, depending on the selection, but when the data is sorted I want to return the pagination component to the first page

const TableVizContainer = props => {
  const [currentPage, setCurrentPage] = useState(1);
  const [sortColumn, setSortColumn] = useState(1);
  const [range, setRange] = useState({
    start: 0,
    end: 25
  });

  const onChangePage = (_event, page) => {
    setCurrentPage(page);
    setRange({
      start: 25 * (page - 1),
      end: 25 * page
    });
  };

  const onSelectChange = event => {
    const { value } = event.target;
    setCurrentPage(1);
    setSortColumn(parseInt(value, 10));
  };

  return (
    <div
      className="table-viz-container container-fluid my-4 float-left"
      automation-tag={`table-viz-${automationId}`}
    >
      <div className="d-flex justify-content-between mb-3 leaderboard-meta">
        <span className="leaderboard-title">{visualization.title}</span>
        <div className="mr-5">
          <label htmlFor="sort-table-select">
            Sort By:
            <select
              id="sort-table-select"
              onChange={onSelectChange}
              value={sortColumn}
            >
              {visualization.columns.map((column, index) => {
                const uniqueId = uuidv1();
                return (
                  <option key={uniqueId} value={index}>
                    {setSelectValue(column, visualization.metrics)}
                  </option>
                );
              })}
            </select>
          </label>
        </div>
      </div>
      <div className="d-block d-sm-flex justify-content-between align-items-center my-2 px-2">
        <span className="page-items-count" automation-tag="pagination-count">
          {`Showing ${range.start === 0 ? 1 : range.start + 1} - ${
            range.end <= visualization.rows.length
              ? range.end
              : visualization.rows.length
          } of ${visualization.rows.length}.`}
        </span>
        <Pagination
          currentPage={currentPage}
          data={visualization.rows}
          itemCount={25}
          onChange={onChangePage}
        />
      </div>
    </div>
  );
};

Does anyone has an idea on how to reset and move the pagination page to the first one without clicking the component?

Answer 1

There are two ways.

1. Passing Props

Let's just say you have a function called jump() and passing 1 as an argument will reset the pagination. So, you can pass the jump function as a property and reuse that on other components.

function jump(){
  setCurrentPage(1)
}

<MyCompnent resetPage={jump} />

// MyComponent

function MyComponent({resetPage}){
  return (
    <button onClick={resetPage(1)}></button>
)
}

2. On Changing Route

You can reset your pagination when your route will change. For example, you are using a router npm package and that package has a method called onChange or routeChangeStart . With those methods or after creating that method you can implement a function like below.

Router.events.on("routeChangeStart", () => {
  jump(1);
});