How to add ~500-1000 records every second to virtual dom while showing initial/few records to the user

[satyam10zs]

Hi,

Could you please tell how to add ~500-1000 records every second (let's say total time 10 seconds) to virtual dom while showing initial/few records to the user ??

[olifolkerd]

Hey @satyam10zs

Have a look at the documentation for Progressive Ajax Loading

I would warn you that if you want to do that indefinitely you will eventually slow down and crash the users computer as it runs out of memory.

Cheers

Oli :)

[satyam10zs]

Hi @olifolkerd #

My application is not using ajax URL to fetch the data from the server.

My application has an array which stores records(JSON format) received from the server via OPC UA. The array is the data source for the tabulator instance.

My case is, the array adds ~500-1000 records every second. The maximum limit for the array is 50000 records.

What I am trying is achieve is to add the data from the array to the tabulator instance without lacking user experience i.e. the delay for loading data as the new data arrives every second. Is there something I can do with virtual dom in this particular case, For example, some function to append data to virtual dom every second while display initial 100-200 records only to the user.

The idea works ok with virtual dom when initially I provide 50000 records to the tabulator instance

data: tableData,

but in my case data comes sequentially.

Could you please help to figure this out?

[olifolkerd]

Hey @satyam10zs

In that case you can just use the *addData function and pass in the next set of data.

$("#example-table").tabulator("addData", [{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}]);

The Virtual DOM will only display the rows the user can see, it will add other rows to the DOM as the user scrolls to them.

Cheers

Oli :)