Pagination Bar

Basic usage

Negative mode

The Pagination Bar component supports a negative mode, suitable for areas with dark background.

Disabling features

While the Pagination Bar component provides a set of features activated by default, you can choose to deactivate some of them following your needs. In the example below, you can see three Pagination Bars where the items range, the page size selection and the page manual editing were respectively deactivated.

Custom page sizes

You can customize the values to be displayed in the “Rows per page” dropdown, as well as the value selected by default.

Unknown total pages

Depending on your pagination system, you may not know the total number of pages until you reach the last one (i.e. if your pagination is based on cursors). The Pagination Bar component fully supports this case, and displays a “many” placeholder instead of the total number of pages and items.

Default page

You can initialize the Pagination Bar component with a pre-set page different from the first one.