[LWC] Implementation of Pagination in lwc

[dsingh7]

Hi Team,

As discussed in last post (viewtopic.php?p=130624#p130624) lazy loading is not supported yet and will be supporting soon. So till then is there any alternative to load more data in LWC component?

I tried with pagination (https://bryntum.com/products/grid/examples/paged/) to load more data. but the AjaxStore needs a read URL for data load and that is not possible in LWC. Is there a way to achieve pagination or load more data into grid instead of loading all data once?

[dsingh7]

Hi Team,

Any update on this post??

[alex.l]

Hi,

You are right, pagination is possible only for remote data now. LWC makes it impossible to use in regular way. Before we released a new feature for local data, you could try to implement a workaround with mock urls. Catch store request in mock url handler and return data from your endpoint.

Here is example of the code using mock data

AjaxHelper.mockUrl('/pagedMockUrl', (url, params) => {
    const
        page     = parseInt(params.page, 10),
        pageSize = parseInt(params.pageSize, 10),
        startIdx = (page - 1) * pageSize;

if (data.length !== rowCount) {
    data = DataGenerator.generateData(
        rowCount,
        null,
        1
    );
}

let returnedData = data.slice();

// Filter the data if filter parameter is passed
if (params.filter) {
    returnedData = returnedData.filter(
        CollectionFilter.generateFiltersFunction(
            JSON.parse(params.filter).map(f => {
                f.property = f.field;
                return new CollectionFilter(f);
            })
        )
    );
}

// Sort the data if sort parameter is passed
if (params.sort) {
    returnedData.sort(store.createSorterFn(JSON.parse(params.sort)));
}

return {
    responseText : JSON.stringify({
        success : true,
        total   : returnedData.length,
        data    : returnedData.slice(startIdx, startIdx + pageSize)
    })
};
});

Method might be async, so you can fetch data inside using LWC api and prepare data to store.

[dsingh7]

Hi Alex,

I was implementing you Mock Url solution in LWC as below with blank data set.

bryntum.grid.AjaxHelper.mockUrl("/pagedMockUrl", (url, params) => {
            

      
        console.log('params', params);
        console.log('url', url);
      
      
        return {
          responseText: JSON.stringify({
            success: true,
            total: 0,
            data: [],
          }),
        };
      });

Grid Store config

store: new bryntum.grid.AjaxStore({
                headers         : {},
                modelClass      : MyModel,
                readUrl         : '/pagedMockUrl',
                pageParamName   : 'page',
                sortParamName   : 'sort',
                filterParamName : 'filter',
                pageSize : 10,
                autoLoad        : true
            }),

but got error in console as following.

Bryntum Ajax Mock Error.PNG (102.64 KiB) Viewed 180 times

{
action: "read",
error: TypeError: Headers is not a constructor at ao.mockAjaxFetch (.../grid.lwc.module.js:10:200465) at async fS.sendLoadRequest (.../grid.lwc.module.js:10:649732),
eventName: "afterRequest",
exception: true,
exceptionType: "server",
params: {page: 1, pageSize: 10},
url: "/pagedMockUrl"
}

Please suggest if I am doing something wrong or its Lib limitation in LWC.

[dsingh7]

Hi team,
Any update on this post

[Maxim Gorkovsky]

Hello.
That happens because Salesforce blocked Headers constructor. You can try to declare a global class Header on a window instance to trick Bryntum bundle into instantiating it. You can start with a blank class and mocking APIs which are used by the request processing logic. You will be informed by exceptions:

window.Headers = class {}

There is another solution - open bundle source code, find mockUrl and mockAjaxFetch functions, copy them somewhere to your application and get rid of new Headers() call. Those are merely utility methods to help with testing, so feel free to clone the code.