React Suite <Pagination> Props

A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite Prop <Pagination>. <Pagination> component is used to assist long lists to load only part of the data, you can quickly switch to the specified data page.

<Pagination> Props:

• activePage: It denotes the current page number.
• boundaryLinks: It shows the border paging buttons 1 and pages.
• classPrefix: It denotes the prefix of the component CSS class.
• disabled: It denotes the boolean Disabled component.
• ellipsis: It displays the ellipsis.
• first: It displays the first page.
• last: It displays the last page.
• layout: It is used to customize the layout of a paging component.
• limit: It denotes the number of rows per page.
• limitOptions: It is used to customize the options of the rows per page select field.
• linkAs: It is used to customize the element type for the component.
• linkProps: It denotes the object Additional props are passed as-is to the underlying link for non-active items.
• locale: It denotes the Locale text.
• maxButtons: It denotes the Page buttons display the maximum number.
• next: It displays the next page.
• onChangeLimit: It is a Callback fired when the number of rows per page is changed.
• onChangePage: It is a Callback fired when the page is changed.
• prev: It displays the previous page.
• total: It displays the total number of rows. Generally obtained through the server.

Syntax:

<Pagination total={100} limit={10} 
    activePage={activePage} 
    onChangePage={setActivePage} />

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the prev, last, next, first, size, total, and limit props of <Pagination>.

Javascript

import "rsuite/dist/rsuite.min.css";
import { Pagination } from "rsuite/";

export default function App() {

  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
          React Suite Pagination Props
        </h4>

        <div style={{ marginTop: 20, width: 800 }}>
          <Pagination
            prev
            last
            next
            first
            size="lg"
            total={100}
            limit={10}
          />
        </div>
      </div>
    </center>
  );
}

Output:

Example 2: Below example demonstrates the activePage and onChangePage props of <Pagination>.

Javascript

import "rsuite/dist/rsuite.min.css";
import { Pagination } from "rsuite/";
import { useState } from "react";

export default function App() {
  const [activePage, setActivePage] = useState(6);

  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
          React Suite Pagination Props
        </h4>

        <div style={{ marginTop: 20, width: 800 }}>
          <Pagination
            prev
            last
            next
            first
            size="lg"
            total={100}
            limit={10}
            activePage={activePage}
            onChangePage={setActivePage}
          />
        </div>
      </div>
    </center>
  );
}

Output:

Reference: https://rsuitejs.com/components/pagination/#code-lt-pagination-gt-code