Pagination
In the Moon, it's not a good idea to swamp users with information because it makes it hard for them to find what they want. This is where pagination is used to split content or data into separate pages with arrows to navigate to/from each page.
Pagination helps to show users that there's more than one page to orbit around and read at their own time, allowing users to concentrate better on what's being presented. It's also great at helping to divide similar items or information into smaller groups/categories.
Use pagination when you have at least 25 items to show.
Default
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| pageCount | number | Yes | - | The total number of pages. |
| pageRangeDisplayed | number | Yes | - | The range of pages displayed. |
| marginPagesDisplayed | number | Yes | - | The number of pages to display for margins. |
| previousButtonLabel | string, JSX.Element | No | - | Label for "previous" button |
| nextButtonLabel | string, JSX.Element | No | - | Label for "next" button |
| onChange | function | No | - | The method to call when a page is clicked. Exposes the current page object as an argument. |
| pageNumber | number | No | - | To override selected page with parent prop. |
| pageSizeSection | JSX.Element | No | - | Placeholder for "page size" component. |
| goToPageSection | JSX.Element | No | - | Placeholder for "go to page" component |
| changePageSizeSection | JSX.Element | No | - | Placeholder for "change page size" component |