Open In App

React Suite Pagination Advanced

Improve
Improve
Like Article
Like
Save
Share
Report

React Suite is a front-end library designed for the middle platform and back-end products. React Suite Pagination component allows the user to select a specific page from various pages. The component also allows us to customize the component, for doing it we use the layout prop. The layout prop accepts an array. The values in the array can be ‘total’ | ‘-‘ | ‘pager’ | ‘|’ | ‘limit’ | ‘skip’.

Syntax:

<Pagination layout={[]} />

Prerequisite:

 

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  now install the dependency by using the following command:

npm install rsuite

Project Structure: 

React Suite Pagination Advanced

React Suite Pagination Advanced

Example 1: We are importing the Pagination Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. 

We are creating a state named currPage using react hook useState, which shows the current page number. To the Pagination component, we are passing props like prev, last, first, next, total, activePage, and layout. And to the layout prop, we are passing the total and pager.

App.js

Javascript




import React from 'react'
import 'rsuite/dist/rsuite.min.css';
import { Pagination } from 'rsuite'
  
export default function App() {
  
    const total = 100
    const [currPage, setCurrPage] = React.useState(1);
  
  
    return (
        <div style={{
            display: 'block', width: 700, paddingLeft: 30
        }}>
            <h3 style={{ color: 'green' }}>
                GeeksforGeeks
            </h3>
            <h4>React Suite Pagination Advanced</h4>
  
            <Pagination
                prev
                last
                next
                first
                size="md"
                onSelect={setCurrPage}
                layout={['total', 'pager']}
                total={total}
                activePage={currPage}
            />
        </div>
    );
}


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

React Suite Pagination Advanced

React Suite Pagination Advanced

Example 2: We are now adding an onSelect function that will change the currPage on select and to the layout, we have passed the array with value ‘total’.’ pager’, ‘skip’, and ‘limit’, we have also added the limitOptions props. 

App.js

Javascript




import React from 'react'
import 'rsuite/dist/rsuite.min.css';
import { Pagination } from 'rsuite'
  
export default function App() {
  
    const total = 100
    const [currPage, setCurrPage] = React.useState(1);
  
    return (
        <div style={{
            display: 'block', margin: 100
        }}>
            <h3 style={{ color: 'green' }}>
                GeeksforGeeks
            </h3>
            <h4>React Suite Pagination Advanced</h4>
  
            <Pagination
                prev
                last
                next
                first
                size="md"
                onSelect={setCurrPage}
                layout={['total', 'pager', 'skip', 'limit']}
                total={total}
                activePage={currPage}
                limitOptions={[24, 30, 60]}
            />
        </div>
    );
}


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

React Suite Pagination Advanced

React Suite Pagination Advanced

Reference: https://rsuitejs.com/components/pagination/#advanced



Last Updated : 15 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads