Read Chunked JSON Stream in Tabulator Grid

Question

I have a Tabulator Grid, and use Ebay's jsonpipe library to load the JSON from my server in a chunked format, so I can begin filling my datagrid immediately even when the results are very large. The method for getting this kind of data into Tabulator is

table.addRow(row, true);

This works fine, but you have to add a setTimeout for each record or the user sees nothing for a few seconds. But the setTimeout slows things down - even when really small - and even loading from a local file takes way too long to load 800 records.

Has anyone figured out a way to read chunked JSON directly in Tabulator? Their existing Ajax methods do not included streaming/chunked newline encoded JSON.

I'd like to add that the data is ALREADY chunked from my server - it is sent streaming to begin with, there is no need for Ajax to make repeated requests as it apparently does when you set use

ajaxProgressiveLoad:"load", //sequentially load all data into the table

Answer 1

While this is not the correct technical solution, this loads my data almost instantaneously. I got rid of the (horrible) setTimeout, and added this instead to my success function of jsonpipe. The variables arr and count must be defined at the top of the fn that performs the request.

    if (count == 50) {
        table.addData(arr, true);
        count = 0;
        arr = [];
    }

I monkeyed with it a little and 50 at a time seems to produce the fastest result, I did not check this with serverside yet, only the local file, so I'll update if that needs to be tweaked. Far far better than just using the addRow for each chunk.

Answer 2

Tabulator has built in Progessive Ajax loading functionality that will work just like pagination allowing you pull in data in chunks

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
    ajaxProgressiveLoad:"load", //sequentially load all data into the table
});

you can also use scroll progressive loading which only loads the data as the user scrolls to it:

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
    ajaxProgressiveLoad:"scroll", //load data into the table as the user scrolls
});

Full details can be found in the Progressive Data Loading Documentation