Merge pull request #8244 from marmelab/fix-docs-pagination

[Doc] Add List's `perPage` and `pagination.rowsPerPages` props relationship note
marmelab · Oct 7, 2022 · 5319586 · 5319586
2 parents f402f68 + 959f43e
commit 5319586
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/docs/List.md b/docs/List.md
@@ -642,6 +642,21 @@ export const PostList = () => (
 );
 ```
 
+**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.
+
+```diff
+// in src/MyPagination.js
+-import { List } from 'react-admin';
++import { List, Pagination } from 'react-admin';
+
+export const PostList = () => (
+-    <List perPage={6}>
++    <List perPage={6} pagination={<Pagination rowsPerPageOptions={[6, 12, 24, 36]} />}>
+        ...
+    </List>
+);
+```
+
 ## `queryOptions`
 
 `<List>` accepts a `queryOptions` prop to pass options to the react-query client. 
@@ -848,4 +863,4 @@ const PostList = () => (
     </List>
 );
 ```
-{% endraw %}
+{% endraw %}
diff --git a/packages/ra-ui-materialui/src/list/pagination/Pagination.tsx b/packages/ra-ui-materialui/src/list/pagination/Pagination.tsx
@@ -150,7 +150,7 @@ Pagination.propTypes = {
 };
 
 const DefaultLimit = <PaginationLimit />;
-const DefaultRowsPerPageOptions = [5, 10, 25];
+const DefaultRowsPerPageOptions = [5, 10, 25, 50];
 const emptyArray = [];
 
 export interface PaginationProps