Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📚 [documentation] list Pagination props #3954

Merged
merged 1 commit into from
Nov 19, 2019
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions docs/List.md
Original file line number Diff line number Diff line change
Expand Up @@ -539,9 +539,16 @@ const filterSentToDataProvider = { ...filterDefaultValues, ...filterChosenByUser

### Pagination

You can replace the default pagination element by your own, using the `pagination` prop. The pagination element receives the current page, the number of records per page, the total number of records, as well as a `setPage()` function that changes the page.
Here are all the props required by the <Pagination> component:

For instance, you can modify the default pagination by adjusting the "rows per page" selector.
* `page`: The current page number (integer). First page is `1`.
* `perPage`: The number of records per page.
* `setPage`: `function(page: number) => void`. A function that set the current page number.
* `total`: The total number of records.

You don't need to fill these props when you pass the `Pagination` component to the `List` component through the `pagination` prop: `<List pagination={<Pagination />}>`.

You can also replace the default pagination element by your own. For instance, you can modify the default pagination by adjusting the "rows per page" selector.

```jsx
// in src/MyPagination.js
Expand Down Expand Up @@ -900,7 +907,7 @@ The result will be the same as in the previous snippet, except that `<Show>` enc

```js
const PostEdit = props => (
<Edit
<Edit
{...props}
/* disable the app title change when shown */
title=" "
Expand Down