The pagination component provides one event regardless if the first, last, next, or previous buttons are pressed.

It would be ideal to have separate (additional) events so we can fetch data using Customer-Facing REST API guidelines. That is, using generated pagination links to fetch first, next, previous, and last paginated data. As an example, please consider the response from this REST API.

Note that we cannot call these pagination links directly because we don't know what the user selected from the pagination controls. Unfortunately, the pagination component only provides a page number via the onSetPage event.

This means we must calculate a data offset property used by the REST API, instead. Along with a limit property (i.e., perPage), an offset provides an index to items for a given page.

FYI, calculating an offset is somewhat painful because table pagination is used in multiple places in the UI. Whenever we fetch new data from the API; for example, the offset must be calculated like so:

const offset = (pageNumber * limit) - limit;

Upon updating the UI with an API response, we then need to calculate the page property for the PatternFly pagination component, like this:

const page = (report.meta.filter.offset / report.meta.filter.limit) + 1;

Ideally, we would like to call the REST API's first, next, previous, and last links, instead of performing extra calculations.