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> 
    ); 
}