Paginator element automatically compresses, how to get it to show every single page number?

Ask us anything How do I?
1

Hey! My paginator element automatically compresses even when width is set to 100%, how do I get it to show 1 2 3 4 5 for example instead of 1 2 … 5?

I want it fully expanded so it’s easier to click since there is the space.

image
image2324×338 4.49 KB

2

Hi, I guess you may need to do a feature request for that.

But I think you should be able to create your own paginator yourself if you really need it in the meantime.
Its not that complex, you need to

  • calculate the number of page Math.ceil(total / perPage)
  • create an array with this number [...Array(nbPage).keys()] and use it to repeat a text element
  • bind text to index + 1 and add a style when currentPage === (index + 1)
  • add a workflow on click on the text element to update the currentPage variable

You’re done :slight_smile:

3

I have sent in a feature request! It would be so much more elegant if the paginator would just expand or compress depending on its width.

Unfortunately, that explanation is too complex for me to understand. :smiling_face_with_tear: Is it possible to have a video or screenshots?

4

The paginator has a custom mode, its like doing it yourself instead to be able to display the numbers as you want.

2 Likes