Pagination

Demos

How to import

import { Pagination } from '@fibrous/semi-ui-react';

Basic Usage

Set the total number via total, set capacity per page via pageSize.

import { Pagination } from '@fibrous/semi-ui-react';

export default function PaginationDemo() {
    return (
        <div>
            <Pagination total={30} style={{ marginBottom: 12 }} />
            <Pagination total={80} style={{ marginBottom: 12 }} />
            <Pagination total={200} style={{ marginBottom: 12 }} />
            <Pagination total={80} pageSize={30} style={{ marginBottom: 12 }} />
        </div>
    );
}

disabled

Disabled via the disabled setting

import { Pagination } from '@fibrous/semi-ui-react';

export default function PaginationDemo() {
    return <Pagination total={30} disabled style={{ marginBottom: 12 }} />;
}

Show total page number

Use the showTotal property to control whether the total number of pages is shown.

import { Pagination } from '@fibrous/semi-ui-react';

export default function PaginationDemo() {
    return (
        <div>
            <Pagination total={80} showTotal style={{ marginBottom: 12 }} />
            <Pagination total={200} showTotal style={{ marginBottom: 12 }} />
        </div>
    );
}

Specify current page number

You can specify the currently active page number via defaultCurrentPage.

import { Pagination } from '@fibrous/semi-ui-react';

export default function PaginationDemo() {
    return (
        <div>
            <Pagination total={80} showTotal defaultCurrentPage={3} />
        </div>
    );
}

Capacity switching per page

By setting showSizeChanger for true, allowing quick switching of capacity per page via the Select component

import { Pagination } from '@fibrous/semi-ui-react';

export default function PaginationDemo() {
    return (
        <div>
            <Pagination total={80} showSizeChanger style={{ marginBottom: 12 }} />
            <Pagination total={300} showSizeChanger />
        </div>
    );
}

Jump to a page quickly

By setting showQuickJumper to true, you can enter the page number through the Input control to quickly jump
When Input loses focus, if there is a valid number in Input, it will jump directly. You can also enter the page number you want to jump to when the Input is focused, and then hit enter to jump directly
If you enter a page number greater than the total page number of the pager, we will automatically jump to the last page for you

import { Pagination } from '@fibrous/semi-ui-react';

export default function PaginationDemo() {
    return (
        <div>
            <Pagination total={80} showQuickJumper style={{ marginBottom: 12 }} />
            <Pagination total={300} showQuickJumper />
        </div>
    );
}

Page number controlled

After the currentPage is passed in, the pager is a controlled component and is generally used in conjunction with onPageChange. The current active page number depends entirely on the value of the currentPage passed in.

import { useState } from 'react';
import { Pagination } from '@fibrous/semi-ui-react';

export default function PaginationDemo() {
    const [page, setPage] = useState(3);
    function onPageChange(currentPage: number) {
        setPage(currentPage);
    }
    return <Pagination total={200} currentPage={page} onPageChange={onPageChange} />;
}

Preset capacity per page

Specify an optional value for switching the capacity per page by using the pageSizeOpts array

import { Pagination } from '@fibrous/semi-ui-react';

export default function PaginationDemo() {
    return (
        <div>
            <Pagination total={300} showSizeChanger style={{ marginBottom: 12 }} pageSizeOpts={[50, 80, 90, 200]} />
            <Pagination total={300} showSizeChanger pageSizeOpts={[10, 20, 50, 200]} />
        </div>
    );
}

Mini version

Show mini pagination via size properties.

import { Pagination } from '@fibrous/semi-ui-react';

export default function PaginationDemo() {
    return <Pagination total={90} size="small" />;
}

Turn on hoverShowPageSelect to open the page list by hovering the page text and switch pages quickly

import { Pagination } from '@fibrous/semi-ui-react';

export default function PaginationDemo() {
    return <Pagination total={90} size="small" hoverShowPageSelect />;
}

API reference

Props

Other native attributes (such as id, aria-*, data-* and onClick) fall through to the root ul, in both the default and the small size; onChange, onPageChange and onPageSizeChange are component callbacks and do not land on the root element.

Accessibility

Pagination follows the common practice of the WAI-ARIA navigation example.

ARIA

• The root is a ul, and every part (total, previous, pages, next, page size, quick jumper) is an li in it
• Previous, next, the pages and "…" are native buttons. A page is named "Page N", "…" is named "More", and previous and next are named by the locale by default; with prevText or nextText (slots of the same name in Vue) holding plain text they are named by that text, while icons, elements and other content keep the locale name
• The button of the current page has aria-current="page"; disabled buttons use the native disabled
• The quick jumper input is named "Jump to" and is disabled when there are fewer than 2 pages
• The component itself is not a navigation landmark. When the pagination is a main way to navigate the page, wrap it in a <nav aria-label="..."> and tell multiple paginations on the page apart by their names

Keyboard and Focus

• Previous, next, the pages and "…" can be focused with Tab, and Enter or Space turns the page;
• Keyboard focus on "…", or on the page text in small mode with hoverShowPageSelect, opens the list of the omitted pages:
  • Down Arrow focuses the first page in the list, Up Arrow focuses the last one;
  • Tab and Shift + Tab move in the list, Enter or Space jumps to the page;
  • Esc closes the list and returns focus to the trigger button.

Design Tokens