Real-Time Data

[neocybereth]

Hey there, I'm looking to add real-time data to a price-grid and was wondering if Tabulator can work with Socket.io to update data real time?

[neocybereth]

if not, do you have any suggestions on how to accomplish this with node/express?

[olifolkerd]

Hey,

I would suggest you use the updateOrAddData function to push in your data to the table, that way it will create a new row if the data dosnt exist or update an existing one if it does:

$("#example-table").tabulator("updateOrAddData", [{id:1, name:"bob"}, {id:3, name:"steve"}]);

Let me know if that helps.

Cheers

Oli

[neocybereth]

$("#example-table-theme").tabulator({ height: false, // set height of table (optional) fitColumns:true, headerFilterPlaceholder:"Search Coins", resizableColumns: false, rowClick:function(e, row){ window.open("https://cryptoreport.com/ https://cryptoreport.com/" + row.getData().symbol); }, responsiveLayout: false, //fit columns to width of table (optional)

columns:[ //Define Table Columns
    {title:"#", field:"rank", sorter:"number", width:50, frozen: true},
    {title:"Coin", field:"name", sorter:"string", width:150, frozen: true, headerFilter:"input"},
    {title:"Symbol", field:"symbol", sorter:"string", width:100},
    {title: "Price", field:"price_usd", width:150, sorter:"number", align:"center", formatter:"money", formatterParams:{symbol:"$"}},
    {title: "Market Cap", field:"market_cap_usd", width:200, sorter:"number", align:"center", formatter:"money", formatterParams:{symbol:"$", precision:null}},
    {title:"24hr Volume", field:"24h_volume_usd", width:200, sorter:"number", align:"center", formatter:"money", formatterParams:{symbol:"$", precision:null}},
    {title:"Available Supply", field:"available_supply", sorter:"date", align:"center", formatter:"money", formatterParams:{precision:null}},
],

});

So if the above is my sample code and I wanted to pull from an api, I would just do like so?

$("#example-table").tabulator("updateOrAddData", [{title:”Price", field:”price_usd"}, {title:”Market Cap", field:”market_cap_usd”}, {title:”24hr Volume”, field”24h_volume_usd"}]);

Also, how often would this make the data flow in?

On 16/07/2017, at 7:23 PM, Oli Folkerd <notifications@github.com mailto:notifications@github.com> wrote:

Hey,

I would suggest you use the updateOrAddData function to push in your data to the table, that way it will create a new row if the data dosnt exist or update an existing one if it does:

$("#example-table").tabulator("updateOrAddData", [{id:1, name:"bob"}, {id:3, name:"steve"}]); Let me know if that helps.

Cheers

Oli

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/olifolkerd/tabulator/issues/456#issuecomment-315591068, or mute the thread https://github.com/notifications/unsubscribe-auth/ANjTDvHbRoi1X3Vu2aFyEImp78IgNvmxks5sObqAgaJpZM4OZOIx.

https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png https://github.com/olifolkerd/tabulator https://github.com/olifolkerd/tabulator/issues/456#issuecomment-315591068

[olifolkerd]

You would need to define one of the fields in each row as an index that contains a unique value, so that tabulator would know how to link the data to the row:

$("#example-table").tabulator({
    index: "id", // make the id field the index
});

You are using the updateOrAddData function slightly wrong there, the array should be an array of row data objects, so each object should be for one row of the table, contain any fields you want to update and the appropriate index column, so for your example:

 $("#example-table").tabulator("updateOrAddData", [
    {"id":123, "price_usd":1.254, "market_cap_usd":2.54, "24h_volume_usd":5213.6},
    {"id":124, "price_usd":2.653, "market_cap_usd"4.36, "24h_volume_usd":1532.4},
    {"id":125, "price_usd":0.245, "market_cap_usd":7.69, "24h_volume_usd":2451.2},
]);

You would would need to set up an ajax request that was called periodically, (you could use the standard js setInterval function from this), that would then call your tables updateOrAddData function. you could set the interval at whatever rate you wanted.

[neocybereth]

Fair enough, thank you sir!

So in my case, my project has about 300 rows, is there any other way to constantly update data for each row? Or is this the only method and I’ll just have to make 300 individual row data objects?

If so, does the update happen in realtime without a refresh?

On 16/07/2017, at 7:49 PM, Oli Folkerd <notifications@github.com mailto:notifications@github.com> wrote:

You would need to define one of the fields in each row as an index that contains a unique value, so that tabulator would know how to link the data to the row:

$("#example-table").tabulator({ index: "id", // make the id field the index }); You are using the updateOrAddData function slightly wrong there, the array should be an array of row data objects, so each object should be for one row of the table, contain any fields you want to update and the appropriate index column, so for your example:

$("#example-table").tabulator("updateOrAddData", [ {"id":123, "price_usd":1.254, "market_cap_usd":2.54, "24h_volume_usd":5213.6}, {"id":124, "price_usd":2.653, "market_cap_usd"4.36, "24h_volume_usd":1532.4}, {"id":125, "price_usd":0.245, "market_cap_usd":7.69, "24h_volume_usd":2451.2}, ]); You would would need to set up an ajax request that was called periodically, (you could use the standard js setInterval function from this), that would then call your tables updateOrAddData function. you could set the interval at whatever rate you wanted.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/olifolkerd/tabulator/issues/456#issuecomment-315592172, or mute the thread https://github.com/notifications/unsubscribe-auth/ANjTDuIfS4lwVZv7D1oCTraz2lHQ9Kmjks5sOcCLgaJpZM4OZOIx.

https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png https://github.com/olifolkerd/tabulator https://github.com/olifolkerd/tabulator/issues/456#issuecomment-315592172

[olifolkerd]

Im a little confused, you always have to pass data into Tabulator as an array of row data objects regardless of the way you get data into the table.

For most people making an ajax request this is a simple case of using a server side json_econde function on the result of their query to the database (maybe with a bit of processing in between), you can pass all the rows into the table in a single request.

In the case of socket.io you wont need to make ajax requests, you will just need to trigger the updateOrAddData when you receive appropriate data down your socket connection, you just need to make sure that you have formatted the data correctly before you send it and it should be a doddle to implement.

When you call the updateOrAddData function it will automatically update the table for you. but you will have to call it with every update to the data.

Full data reactivity is on the roadmap but it wont be in tabulator for a few months yet.

[neocybereth]

Alright, I think I get what you’re saying better now. I’ll toy around with it tomorrow at work and ask you better questions if I get stuck. Thanks for the hep Oli!

On 16/07/2017, at 8:10 PM, Oli Folkerd <notifications@github.com mailto:notifications@github.com> wrote:

Im a little confused, you always have to pass data into Tabulator as an array of row data objects regardless of the way you get data into the table.

For most people making an ajax request this is a simple case of using a server side json_econde function on the result of their query to the database (maybe with a bit of processing in between), you can pass all the rows into the table in a single request.

In the case of socket.io http://socket.io/ you wont need to make ajax requests, you will just need to trigger the updateOrAddData when you receive appropriate data down your socket connection, you just need to make sure that you have formatted the data correctly before you send it and it should be a doddle to implement.

When you call the updateOrAddData function it will automatically update the table for you. but you will have to call it with every update to the data.

Full data reactivity is on the roadmap but it wont be in tabulator for a few months yet.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/olifolkerd/tabulator/issues/456#issuecomment-315593182, or mute the thread https://github.com/notifications/unsubscribe-auth/ANjTDjEP-jEXGUIjSH_hd7uX3-KOjyfgks5sOcV2gaJpZM4OZOIx.

https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png https://github.com/olifolkerd/tabulator http://socket.io/ https://github.com/olifolkerd/tabulator/issues/456#issuecomment-315593182