Add pagination component

[alimpens]

Based on ASC Pagination.

Couple of questions:

• This component currently consists of a list of buttons. This makes sense if the pagination and filtering and stuff all happens client-side, ie you're not really navigating to a different page when you interact with the component. For apps that do navigate to a different page, maybe we should add an option to render links instead of buttons? Maybe we should wait until we have users that need this though.
• Currently, what the Pagination shows is calculated in the component based on the page, pageSize and collectionSize props. I can imagine some apps get this calculation already from their backend, so maybe we should make this calculation optional? Again, maybe we should wait until we have users that need this.
• Do we want to statically set the aria-labels and previous- and next-button text content? Or should that be configurable?

[VincentSmedinga]

This component currently consists of a list of buttons. This makes sense if the pagination and filtering and stuff all happens client-side, ie you're not really navigating to a different page when you interact with the component. For apps that do navigate to a different page, maybe we should add an option to render links instead of buttons? Maybe we should wait until we have users that need this though.

These should totally be links from the start. I don’t think something happening either client-side or server-side is a decisive factor to make an action count as navigating or not. If it is, would a user of a single-page app ever be navigating?

An SPA is free to hijack the url and replace it with client-side routing. But they should push the url onto the navigation history to make the end result look like a navigation happened.

https://twitter.com/housecor/status/1717152910713278544

We want users to be able to share the link to a specific page.

https://twitter.com/housecor/status/1717153836823892190

[VincentSmedinga]

Currently, what the Pagination shows is calculated in the component based on the page, pageSize and collectionSize props. I can imagine some apps get this calculation already from their backend, so maybe we should make this calculation optional? Again, maybe we should wait until we have users that need this.

Yes. I had to get used a bit to the idea of the component doing these calculations, but seeing it in action I think it’s the right way ahead.

[VincentSmedinga]

Do we want to statically set the aria-labels and previous- and next-button text content? Or should that be configurable?

Static is fine for now.

[hcvdhaar]

Looks very nice. It is a complex component! good job

[VincentSmedinga]

Just submitted my comments – only now I notice they have been ‘pending’ for a week…