React Suite <Pagination> Props
Last Updated :
05 Jul, 2022
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
Share your thoughts in the comments
Please Login to comment...