How to lazy load items in vaadin grid in LitElement

Question

I have a requirement to render infinite scrollable data in an optimal way in LitElement. Vaadin-grid seems suitable for the use-case. However, the data is huge. So I am trying to lazy load the data in chunks from backend. This backend api supports returning records in chunks (such that total number of records will be returned on first call itself). Is there any possible way to lazy load the data in chunks from backend in vaadin-grid with LitElement.

Answer 1

So here is an example from the mentioned starter:

  private async getGridData(params: GridDataProviderParams, callback: GridDataProviderCallback) {
    const index = params.page * params.pageSize;
    const data = await SamplePersonEndpoint.list(index, params.pageSize, params.sortOrders as any);
    callback(data ?? []);
  }

As you can see the params contain page and pageSize that then can be used in the backend for paging.

The SampleEndpoint uses this:

public List<SamplePerson> list(int offset, int limit, List<GridSorter> sortOrder) {
    Page<SamplePerson> page = service
            .list(PagingUtil.offsetLimitTypeScriptSortOrdersToPageable(offset, limit, sortOrder));
    return page.getContent();
}