<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.

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.

Infinite Scroll

On mobile devices, the <Pagination> component is not very user-friendly. The expected user experience is to reveal more records when the user scrolls to the bottom of the list. This UX is also useful on desktop, for lists with a large number of records.

To achieve this, you can use the <InfiniteList> component instead of the <List> component.

import {
-   List,
+   InfiniteList,
    DataTable,
    DateField
} from 'react-admin';

const BookList = () => (
-   <List>
+   <InfiniteList>
        <DataTable>
            <DataTable.Col source="id" />
            <DataTable.Col source="title" />
            <DataTable.Col source="author" field={DateField} />
        </DataTable>
-   </List>
+   </InfiniteList>
);

<InfiniteList> uses a special pagination component, <InfinitePagination>, which doesn’t display any pagination buttons. Instead, it displays a loading indicator when the user scrolls to the bottom of the list. But you cannot use this <InfinitePagination> inside a regular <List> component.

For more information, see the <InfiniteList> documentation.