<Pagination>

By default, the <List> uses the <Pagination> component for pagination. This component displays buttons to navigate between pages, including buttons for the surrounding pages.

Pagination buttons

Usage

By decorating this component, you can create your own variant with a different set of perPage options.

// in src/MyPagination.js
import { Pagination } from 'react-admin';

const PostPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100]} />;

Then, to use this component instead of the default <Pagination>, use the <List pagination> prop:

import { List } from 'react-admin';
import PostPagination from './PostPagination';

export const PostList = () => (
    <List pagination={<PostPagination />}>
        ...
    </List>
);

rowsPerPage

The <Pagination> component renders a dropdown allowing users to select how many rows to display per page. You can customize the options of this dropdown by passing a rowsPerPageOptions prop.

// in src/MyPagination.js
import { Pagination } from 'react-admin';

const PostPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100]} />;

Tip: Pass an empty array to rowsPerPageOptions to disable the rows per page selection.