Best Practices
Properties
Items per page
Show 25 items per page by default. If the items are listed in a container where vertical scroll should be avoided, such as a Modal or a Card, limit the number of items accordingly.
Position
Considering left-to-right interfaces, position a Pagination in the top right of a container. If the list has vertical scroll, include another Pagination in the bottom right. Use the Collection component to correctly position the Pagination.
Behavior
Loading
Show a loading Pagination when the list is loading, since the number of results is not loaded and the user can’t navigate between pages yet.
Updating items
- Displaying search results: When the user edits a Filter or the Search and the results load, update the total number of results in the Pagination to inform the current state of the list.
- Refreshing with new items: Only load new items when the user explicitly triggers an action to update the results, such as the Refresh button in the web browser. Don’t load new items while the user is navigating between pages.
- Returning after creating an item: When the user has just created an item and returns to the listing, they should go to the first page with updated results.
- Returning after editing an item: When the user has just edited an item and returns to the listing, they should see a list with the same items as before, but with the edited item updated.
Returning after navigating
The complete search query, which includes the filters, the current page, and the search terms, should be reflected in the URL. This allows the user to easily return to the customized view and easily share it. Don’t use local storage or cookies to store the query.