Pagination perPage attribute is being ignored

[fvoordeckers]

What you were expecting: When creating a list view with a resultset of 15 records and pagination with 30 items per page, I expect to see 1 page with 15 results. Instead I get a page with 15 results, pagination for 2 pages displaying 1 - 10 of 15.

What happened instead: The dataprovider delivers the correct amount of records per page. The pagination below the list always calculates the pages on the default 10 perPage. Changing it only changes the results in the list but not the pagination.

Steps to reproduce: Create a list view and make sure the api (REST) returns more than 10 results.

<List {...props} pagination={<Pagination rowsPerPageOptions={[]} perPage={30} />} bulkActionButtons={false}>
    <Datagrid rowClick="show">
        <TextField source="name" label="Name" sortable={false} />
        <TextField source="email" label="Email" sortable={false} />
    </Datagrid>
</List>

Related code: This example only shows that the paging doesn't take the perPage prop. It is set to 30, still takes 10. Since the dataProvider always returns the 10 items it doesn't look broken. In my case the API returns 30 items, the list show these 30 items correctly but the pagination will still act like it only received 10 records. https://codesandbox.io/s/flamboyant-allen-d8n4m?file=/src/posts/PostList.js:3167-3238

Other information: The project was recently migrated from v2 to v3, everything worked fine before. No code changes since.

Environment

• React-admin version: 3.8.2
• Last version that did not exhibit the issue (if applicable): 2.9.5
• React version: 16.13.1
• Browser: Chrome OSX, Version 84.0.4147.135

[toti1212]

+1

[fzaninotto]

To set the number of items per page, the documentation says that you should set the perPage prop on the List component. This List component passes it to the pagination component, overriding any prop set by you. So there is no bug - you were using an undocumented (and therefore unstable) feature.

In your example, just change the place where you set the perPage prop.

-<List {...props} pagination={<Pagination rowsPerPageOptions={[]} perPage={30} />} bulkActionButtons={false}>
-<List {...props} perPage={30} pagination={<Pagination rowsPerPageOptions={[]} />} bulkActionButtons={false}>
    <Datagrid rowClick="show">
        <TextField source="name" label="Name" sortable={false} />
        <TextField source="email" label="Email" sortable={false} />
    </Datagrid>
</List>

[ENGR-MANSOOR]

@fvoordeckers Hi, Can u share ur backend api which dals with pagiantion stuff, as i have set everything from client side in pagination and per page, also set header from backend api but its not working well