Pagination in Grid

Flow
1

Hi everybody,

I am thinking a way to combine data provider of grid and pagination together. After looking around forum, I’m still not found any answer than using addon. The reason i don’t want to use addon because I want to customize my own UI, how its look.

The current data provider have good lazy loading functional, but assume I’m having 1000 data, and I will get it through REST API. So I created a grid with 20 data/page, everytime i change my page to next page, the data provider would like to request to API to get next 20 data then show to vaadin grid.

But now, I am still out of idea how to implement that idea. If anyone implemented this feature, please guide me.

Thank you.
Have a nice day.

2

Hi,

here’s a very simple prototype:

public class GridView extends HorizontalLayout {

    private int totalAmountOfPages;
    private int itemsPerPage = 10;
    private int currentPageNumber = 1;

    public GridView() { ;
        Grid<Bean> grid = new Grid<>(Bean.class);
        totalAmountOfPages = RestApi.getPageCount(itemsPerPage);
        List<Bean> initialItems = RestApi.getPageItems(currentPageNumber, totalAmountOfPages, itemsPerPage);
        grid.setItems(initialItems);
        Button nextButton = new Button("Next page", e -> {
            if (currentPageNumber >= totalAmountOfPages) {
                return;
            }
            List<Bean> nextPageItems = RestApi.getPageItems(++currentPageNumber, totalAmountOfPages, itemsPerPage);
            grid.setItems(nextPageItems);
        });
        Button previousButton = new Button("Previous page", e -> {
            if (currentPageNumber <= 1) {
                return;
            }
            List<Bean> prevPageItems = RestApi.getPageItems(--currentPageNumber, totalAmountOfPages, itemsPerPage);
            grid.setItems(prevPageItems);
        });
        add(grid, previousButton, nextButton);
    }
3

To elaborate on the example a bit: if you’re using pages, there’s no reason to use a lazy loading DataProvider at the same time. Just load the items of the current page into memory and put them into the Grid. Keep track of the current page number, items per page and the amount of pages yourself and you’re left with free hands to implement the UI part yourself as you wish.

4

Hi,

Starting from V17 the Grid supports API for data lazy loading from paged repositories:

grid.setItems(query -> service.fetchPage(query.getPage(), query.getPageSize()));

More information here https://vaadin.com/docs/v17/flow/binding-data/tutorial-flow-data-provider.html#lazy-data-binding-using-callbacks

Hope this helps.