Skip to content

Commit 5319586

Browse files
authored
Merge pull request #8244 from marmelab/fix-docs-pagination
[Doc] Add List's `perPage` and `pagination.rowsPerPages` props relationship note
2 parents f402f68 + 959f43e commit 5319586

File tree

2 files changed

+17
-2
lines changed

2 files changed

+17
-2
lines changed

docs/List.md

+16-1
Original file line numberDiff line numberDiff line change
@@ -642,6 +642,21 @@ export const PostList = () => (
642642
);
643643
```
644644

645+
**Note**: The default pagination component's `rowsPerPageOptions` includes options of 5, 10, 25 and 50. If you set your List `perPage` to a value not in that set, you must also customize the pagination so that it allows this value, or else there will be an error.
646+
647+
```diff
648+
// in src/MyPagination.js
649+
-import { List } from 'react-admin';
650+
+import { List, Pagination } from 'react-admin';
651+
652+
export const PostList = () => (
653+
- <List perPage={6}>
654+
+ <List perPage={6} pagination={<Pagination rowsPerPageOptions={[6, 12, 24, 36]} />}>
655+
...
656+
</List>
657+
);
658+
```
659+
645660
## `queryOptions`
646661

647662
`<List>` accepts a `queryOptions` prop to pass options to the react-query client.
@@ -848,4 +863,4 @@ const PostList = () => (
848863
</List>
849864
);
850865
```
851-
{% endraw %}
866+
{% endraw %}

packages/ra-ui-materialui/src/list/pagination/Pagination.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ Pagination.propTypes = {
150150
};
151151

152152
const DefaultLimit = <PaginationLimit />;
153-
const DefaultRowsPerPageOptions = [5, 10, 25];
153+
const DefaultRowsPerPageOptions = [5, 10, 25, 50];
154154
const emptyArray = [];
155155

156156
export interface PaginationProps

0 commit comments

Comments
 (0)