React Suite Pagination ts:LayoutType Props
Last Updated :
14 Jul, 2022
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 Pagination ts:LayoutType Props. The pagination has a layout prop that defines the type of layout to be used in the pagination component.
ts:LayoutType Props:
- total: It displays the total number of rows in the layout.
- -: It denotes the area placeholder, fills up the remaining space
- pager: It displays the page area.
- |: It shows a vertical separator.
- limit: It denotes the number of rows per page.
- skip: It is used to go to a specific page number quickly.
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:
Syntax:
<Pagination layout={'total' | '-' | 'pager' | '|' | 'limit' | 'skip'} />
Example 1: Below example demonstrates the ‘total’, ‘pager’, and, ‘|’ layout types.
Javascript
import { useState } from "react" ;
import { Pagination, TagPicker } from "rsuite" ;
import "rsuite/dist/rsuite.min.css" ;
export default function App() {
const [activePage, setActivePage] = useState(1);
const [layout, setLayout] = useState([
'total' , '-' , 'limit' , '|' , 'pager' , 'skip' ]);
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite Pagination ts:LayoutType Prop
</h4>
<div style={{ marginTop: 20, width: 800 }}>
<span>
Select Layout Type:
<TagPicker
value={layout}
onChange={setLayout}
cleanable={ false }
searchable={ false }
data={[
{ value: 'total' , label: 'total' },
{ value: 'pager' , label: 'pager' },
{ value: '|' , label: '|' },
]}
/>
</span>
<br />
<br />
<br />
<Pagination
total={100}
limit={10}
activePage={activePage}
onChangePage={setActivePage}
layout={layout}
/>
</div>
</div>
</center>
);
}
|
Output:
Example 2: Below example demonstrates the ‘limit’, ‘skip’, and, ‘-‘ layout type.
Javascript
import { useState } from "react" ;
import { Pagination, TagPicker } from "rsuite" ;
import "rsuite/dist/rsuite.min.css" ;
export default function App() {
const [activePage, setActivePage] = useState(1);
const [layout, setLayout] = useState([
'total' , '-' , 'limit' , '|' , 'pager' , 'skip' ]);
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite Pagination ts:LayoutType Prop
</h4>
<div style={{ marginTop: 20, width: 800 }}>
<span>
Select Layout Type:
<TagPicker
value={layout}
onChange={setLayout}
cleanable={ false }
searchable={ false }
data={[
{ value: 'limit' , label: 'limit' },
{ value: '-' , label: '-' },
{ value: 'skip' , label: 'skip' },
]}
/>
</span>
<br />
<br />
<br />
<Pagination
total={100}
activePage={activePage}
onChangePage={setActivePage}
layout={layout}
/>
</div>
</div>
</center>
);
}
|
Output:
Reference: https://rsuitejs.com/components/pagination/#code-ts-layout-type-code
Share your thoughts in the comments
Please Login to comment...