[grid] Pagination

[jouni]

In some use cases, a paginated data grid is easier for the user than a purely scrolling one. Also, scrolling and paging can be nicely combined with "virtual paging", as you can see in this example.

This could be added as an example (not directly baked in as a feature), and we could provide the pagination element as an official add-on that can be added below the grid without any extra configuration. On top of that, the scrolling could be disabled with some extra property perhaps.

In the meantime, use this pagination example as a starting point: https://cdn.vaadin.com/vaadin-grid/2.0.0-beta1/demo/pagination.html

[kgidwani3]

+1
Paging is a very important use case.
Please add it.
Also is there any workaround/Add on /example in which we can implement paging in current release ?

[pedjapesic]

+1
I like the idea of "virtual paging", looks really great. I believe paging is a must have feature..

[jouni]

Here’s an example for grid 1.x: https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/headers.html#toc_6_pagination

Though, it seems like it doesn’t work in Safari, but I think there are some implementation bugs in that demo. You should be able to use the concept still.

[Saulis]

Food for thought, I had a user asking about paging for IDT (iron-data-table) so I cooked up this example: http://jsbin.com/kihusukoxu/edit?html,output (works in Chrome).

So when we start applying this for grid, it might just be enough to expose something like page property for notifying/controlling the current scroll position, and the creating a custom element which just adds paging controls on top of that.

[jouni]

For reference, we have an official pagination example now for 2.0: https://cdn.vaadin.com/vaadin-grid/2.0.0-beta1/demo/pagination.html

[jouni]

I came across another nice little detail regarding pagination controls:

[limonte]

I came across another nice little detail regarding pagination controls:

Here's the recursive hell of popups in case of 25 pages.

 1 2 3 ... 23 24 25

      4
      5
      6
      ...   ->  7 8 9 ... 16 17 18
      19               10
      20               11  
      21               12
                       13
                       14
                       15
                      

[jouni]

That would of course not happen. There would only be one dropdown, which scrolls if there are a lot of items.

[pedjapesic]

Hmm interesting yes, but I am not sure that this is very useful. I have cases with hundreds of pages. User does not know on which page he will find the result so there is no need to allow clicking on particular page number. It would be just enough for the user to sequentially go on next, previous, first or last page. Why not something simple as this:

[jouni]

I have cases with hundreds of pages. User does not know on which page he will find the result so there is no need to allow clicking on particular page number.

That is possibly true for in your use case. But I expect that in some other cases, the user could very well know on which page a certain item is (from previous sessions, if the data set is fairly stable). Or, when browsing search results, they could remember a certain item which was closest to the one they were looking for, and they could then easily return to that page with one click.

We have no concrete plans or designs for this feature yet, but please keep the ideas and use cases coming – thanks!

[pedjapesic]

Ok but than again, instead of current page you can make text field to change it's value and that would be it.

[anikavaish]

Do you have a sample code for pagination like this?

…

On 27 Nov 2017 3:37 p.m., "Jouni Koivuviita" ***@***.***> wrote: I came across another nice little detail regarding pagination controls: <https://camo.githubusercontent.com/0fb4885c2e03372b00cd0411f7b84ad9b20c7525/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313630302f312a4c414d443439746f6378516a3655695657536c6659772e676966> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/vaadin/vaadin-grid/issues/452#issuecomment-347135066>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AS393uoalZX39brQMFrCiJ82RwMXKzIfks5s6onRgaJpZM4JvNa2> .

[pedjapesic]

@anikavaish are you asking me o @jouni ?

[pedjapesic]

Maybe something like this: