React to clicks in Kino DataTable (or anything similar for LiveBook)

Hi All

I am trying to play with LiveBook as a research playground to analyze data and create first ugly prototypes of the internal or not so internal tool (isn’t it what such notebooks are good for?).

Concept
We are operating in the hiring space and idea is pretty much like:

  1. Select a job ad from currently open ones (or based on some other criteria)
  2. Select some applicant
  3. Fetch extra information that we happen to know about the applicant (e.g. history from the past jobs)
  4. Ask AI to analyze the results and provide automated opinion on this or that characteristic

Selecting in DataTable - how to do it
So as you see there are a couple of steps which are about presenting long list of records (with some details) and choosing something there. Number of records is like dozens to thousands so for a research prototype I don’t really care about any kind of caching.

I though that Kino.DataTable should be a good choice for it as it has built-in pagination and search (though search just highlights items instead of filtering or I don’t know how to hide unmatching stuff easily).

But… I failed to figure how to register any sort of “clicked” or “selected” events in datatable. There seem to be ways to do it for a Button, so I thought i could use datatable’s formatter to inject button somewhere, but it also seems not possible.

How to select from a long list of records in LiveBook [easily]?
What would you in such a case? Or what do you use already?

I figured a way to use select control, but it really is not made for looking at many record details and looks wrong when you want to make a conscious choice of many records.

Is my only option to create a clone of DataTable or is there a known hack or a different control to make a choice between many elements easy?

1 Like

There is currently no API do to that with data table. In general, you could implement a custom table output and have an Elixir API to get the currently selected row, but the thing is that the changes won’t be tracked. If the user selects a different row, the cell that read the current value won’t be marked as stale (as is the case for Kino.Input.read/1). The change tracking only works with built-in inputs. This wouldn’t be a problem if, instead of reading the current value, the API was to receive an update (like Kino.Control components), but this would imply the “reactive app” style, where you kinda need to write everything in a single cell to handle events and update frames. Perhaps in the future we could add an abstraction for creating custom inputs with proper change tracking, but that’s not one the roadmap currently.

So if you want to rely on input reading, you need to either use a select, or perhaps render the table with ids, and have a text field below where the user enters the id(s) (definitely not the best UX, but allows you to use the table).

1 Like