4 ms·

Does this provide a method to send only updates/differences/deltas to the frontend and update only the changed/new table rows? (In other words, consume a JSON o

Does this provide a method to send only updates/differences/deltas to the frontend and update only the changed/new table rows? (In other words, consume a JSON on the backend and send only updated rows to the frontend in order to avoid sending the entire table data for every update.) Or is there a more advanced table system that can handle this? (Live-updating views of tabular data retrieved via an SQL query are a requirement that I've been looking for a PHP/Laravel-JS solution for, but maybe there's something better in the pure-JS world for it. Should I be looking at a solution like Meteor, FeathersJS, or Phoenix LiveView?) edit: Wow, I just looked at AG-Grid mentioned in other comments, and the first example is a live-updating table ("Live Streaming Updates"). But it doesn't seem to provide server-side diffing of the source data...guess I'll have to handle that manually in application logic by making the frontend request rows with id > the last id it has.

andai 4y ago
I just built something like that in vanilla JS for a client, took a few days. Dump the table as JSON, render it as a HTML table with inputs, add event listeners for input. On input, convert that row back to JSON and diff it. Did it change? Mark the row as "changed". (You can skip the diffing to keep it simple and just mark it changed on input, but then it will keep it marked as changed even if you restore the original value.) On save, run document.querySelectorAll('tr.changed'), convert them back to JSON and send to backend. Doing everything with vanilla JS and DOM manipulation is a bit gnarly though (in terms of the readability/maintainability of the resulting code), I would be surprised if there isn't an elegant solution out there for this already. Of course by the time I was done I realized I could have just taught my client how to use Ultorg... but this was more fun :)
- creamyhorror 4y ago
  I see how you did it, yeah - makes sense. One of my teammates implemented the same thing for a HTML table editor for a product many years ago. I just completed my own task by getting the frontend to provide the latest row ID it has to the backend. Guess it was really simple since I didn't actually need to update existing records, just get new ones. Ultorg looks like MS Access for general data sources (including Access itself as a data source). Developers just end up rebuilding existing ideas on new infrastructure, hah. We had the same requirement just a few weeks ago and ended up showing the business users how to use HeidiSQL :)

andai 4y ago

I just built something like that in vanilla JS for a client, took a few days. Dump the table as JSON, render it as a HTML table with inputs, add event listeners for input. On input, convert that row back to JSON and diff it. Did it change? Mark the row as "changed". (You can skip the diffing to keep it simple and just mark it changed on input, but then it will keep it marked as changed even if you restore the original value.) On save, run document.querySelectorAll('tr.changed'), convert them back to JSON and send to backend. Doing everything with vanilla JS and DOM manipulation is a bit gnarly though (in terms of the readability/maintainability of the resulting code), I would be surprised if there isn't an elegant solution out there for this already. Of course by the time I was done I realized I could have just taught my client how to use Ultorg... but this was more fun :)

creamyhorror 4y ago
I see how you did it, yeah - makes sense. One of my teammates implemented the same thing for a HTML table editor for a product many years ago. I just completed my own task by getting the frontend to provide the latest row ID it has to the backend. Guess it was really simple since I didn't actually need to update existing records, just get new ones. Ultorg looks like MS Access for general data sources (including Access itself as a data source). Developers just end up rebuilding existing ideas on new infrastructure, hah. We had the same requirement just a few weeks ago and ended up showing the business users how to use HeidiSQL :)