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>neveropen</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>neveropen</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
