Live Kino DataTable

You can use Kino.Frame and render new Kino.DataTable into the frame as needed.

@jonatanklosko, I had tried this out earlier by modifying the Kino.Frame docs for a DataTable like this:

frame = Kino.Frame.new() |> Kino.render()

for i <- 1..100 do
  table = Kino.DataTable.new([%{no: i}])

  Kino.Frame.render(frame, table)
  Process.sleep(50)
end

This didn’t render, and I thought that Kino.Frame was not the way to go. However, when I saw your reply, I increased the sleep time to 100 miliseconds and I got a very jittery rendering. Things stabilized once I increased the sleep time to a second. I guess what was happening was that the DataTable took more that 50ms to render, so re-rendering it at that speed led to nothing being rendered at all (except at the last re-render).

Perhaps a note in the Kino.Frame docs regarding this would be a good idea?

Even re-rendering every second is slightly jittery because the entire DataTable has to be re-rendered. The render cell momentarily disappears while the DataTable is rendering. I am guessing this is because we are also re-rendering the Table interface, reloading the associated js and css etc. One way to optimize this is to reload only the data, and not the table viewer itself. After that, I could apply diffs instead. This is out of Kino.DataTable’s scope, so writing my own JS doesn’t seem to much to ask.

Oh, I assumed you don’t need to re-render so often. The slow re-render is less about Kino.Frame and more about Kino.DataTable, which is rendered inside an iframe (as are all Kino.JS), so it does need to load and run the JS again. If you want the table to quickly react to updates, then it should be a single Kino.JS.Live reacting to events.

We have a lower-level abstraction called Kino.Table, where you have more control over how you query the data, and you can enable a “Refetch” button to re-run the query. However, that’s still not reactive.

The current design of Kino.DataTable is very much static. To make it reactive we could add Kino.Table.update, which would invoke a new callback @callback update(update_arg) to update the state and then re-fetch and broadcast the current page. And then we could add Kino.DataTable.update(tabular) and implement the callback, which would be similar to the current Kino.Table.new and @callback init(init_arg).

cc @josevalim

That’s what I thought.

That sounds great. Like you and I said, this is out of DataTable’s scope, but Elixir being a language that puts a lot of emphasis on being able to handle live data, I think a way to deal with live updates would be appreciated.

Maybe if Table.update works out, we could add a Table.listen.

Yes, allowing the data table to be updated would be great.

Like you and I said, this is out of DataTable ’s scope

To be clear, I meant that it’s static now, but we could support the update : )

Yes, allowing the data table to be updated would be great.

I opened an issue, so that we don’t forget.

That’s fine too! I didn’t notice your last sentence in that quote.