Our blazing fast Grid component built with pure JavaScript

Post by 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?

Post by dsingh7 »

Hi Team,

Any update on this post??

Post by alex.l »


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) => {
        page     = parseInt(params.page, 10),
        pageSize = parseInt(params.pageSize, 10),
        startIdx = (page - 1) * pageSize;

if (data.length !== rowCount) {
    data = DataGenerator.generateData(

let returnedData = data.slice();

// Filter the data if filter parameter is passed
if (params.filter) {
    returnedData = returnedData.filter(
            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) {

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.

All the best,

Post by 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
Bryntum Ajax Mock Error.PNG (102.64 KiB) Viewed 133 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.

Post by dsingh7 »

Hi team,
Any update on this post

Post by Maxim Gorkovsky »

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.

Post Reply