React Suite Pagination ts:LayoutType Props

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

React Suite Pagination ts:LayoutType Props

Explore