Additional Data table / Glideapps datagrid features

[adiibanez]

Hi

I'm currently trying to extend the glideapp features of the kino datatable. In particular cell edits and copy & paste. As enabler for google sheets style usecases.

https://github.com/adiibanez/kino/blob/main/lib/kino/table.ex#L198

Having a bit of a hard time in understanding how components play together rsp. how to best extend the datatable functionality.

Question: How to process "granular" cell value updates while respecting existing datastructures ( assigns data_rows / slicing_cache / content -> data ). Updating the complete tabular data for every single edit feels a little wasteful.

[jonatanklosko]

The table it self is read-only by design (it's an output). If it was editable, the user would expect the underlying variable to change, which we wouldn't do (we can't easily mutate, and we definitely wouldn't want to for reproducability reasons).

In Livebook, the way to have UIs that "mutate" something is via Smart cells. Smart cells are UI components that generate code. For example we have "Data transform cell", where you specify a source dataframe variable, then use the UI to apply modifications, but underneath it generates actual (which the user can see), that code runs and produces the updated data frame.

I'm not sure how a Smart cell would look for editing individual cells, or rather, what code would that generate. One option would be a blank sheet where you enter data and it generates Elixir code with a corresponding data structure. Either way, I think it would be a whole separate thing.

[adiibanez]

Ok, I somehow get the point with reproducability reasons.
Nevertheless I think that livebook should remain open to usecases where editing "non reproducable" data is important.

My usecase:

• Livebook as "puppet master" to orchestrate a number of external tools. Humble requirements as a starting point; Mostly query & edit
• Google sheet style workflow; filtering via search / "on / off" checkboxes; copy & paste of tabular data
• Leverage glide app datagrid features as much as possible without PhD level integration efforts.
• External req api calls to a small number of 3rd party infrastructure

Not sure how a smart cell would help in the mentioned scenario. Could you pls elaborate? KISS is kind of a requirement.
Having a readonly but also a edit datagrid with the same data seems wrong.

[adiibanez]

btw. my kino fork already supports cell edits. WIP, not fully integrated yet; getting a better understanding of concept / constraints is the main reason I reached out before continuing with integration efforts.

[hugobarauna]

@jonatanklosko

In Livebook, the way to have UIs that "mutate" something is via Smart cells. Smart cells are UI components that generate code.

I believe his use case is for a Livebook app, not a Livebook notebook. Assuming that's the context, Smart cells don't seem like the right approach. Maybe a custom Kino.JS.Live component would be better.

Out of curiosity, here's a Kino for inputting data as a table: https://hexdocs.pm/kino_table_input/readme.html

---

Additionally, but not related to editing data, I've already been thinking about a growing need for a more interactive data grid component. For admin-related tasks, it is common to display data in a table, then be able to select a row and do something with that selection.

Here's a real example where an interactive data table would help me:

CleanShot.2025-06-27.at.08.45.41.mp4

In this app, I search for orgs that match a name, then I want to click on an org from the table and show related info below. But I can't programmatically react to clicking an org. Nor can I add a "show related data" column to that data and react to clicking that action link.

So, the alternative solution was to show the data, and have an input below where I can copy an ID from that org and submit it in a form to show related data.

I'm just mentioning this other use case because it might be relevant to the overall topic of "interactive data tables".

[adiibanez]

@jonatanklosko The confusing part is mostly about how to initialize the glideapp react component in a livebook context. Tried to extract bits and pieces from datatable but so far not too successful. In particular because of packaging, initialization, how main.js and init / handle_connect interact, ...

Also it seems as kino initializes some react components that I would need to workaround ( double initialization ). not quite sure how to "harmonize" the different "moving parts".

Failed to load the widget JS module, got the following error:

    Identifier 'useState' has already been declared

See the browser console for more details. If running behind an authentication proxy, make sure the /public/* routes are publicly accessible.

Looking for ways to find a good "MVP" starting point and enable more glideapp features from there. kino should still be available for existing UI components eg. checkboxes, buttons, search input fields ... .
test2.html.zip
proto.livemd.zip

Any hints on how to reduce the complexity of a dedicated glideapp livebook component would be highly appreciated.
My strategy would be to start with a livebook and then extract things into a dedicated repository later.

[jonatanklosko]

Identifier 'useState' has already been declared

In the source code you posted, you have duplicated useState import:

import React, { useState, useCallback, useMemo, useState } from "react";

I see you are doing Kino.DataTable.new, but also writing some custom Kino.Live.JS component. I think the best starting point would be to copy kino data table bits and the JavaScript building setup there.

The Kino.Live.JS is actually implemented in Kino.Table, so that's the most interesting part. It is an extra behaviour we created, because we had multiple different table use cases: Kino.DataTable has logic how to convert basic data structures to table data, but we also have kino_explorer that defines how to convert a dataframe to table data. The actual table component though is mostly implemented in Kino.Table.

[adiibanez]

yeah, my files are a bit of a mess to be honest.
It's an experimental and very much trial & error process of moving from datatable to dedicated Kino.Live.JS.

Thanks for the useState hint; One tiny step closer but still lacking "deep understanding" what kino / livebook expects in combination with react components. Feels like a bit of a rabbit hole of JS errors.
Any chance a minimal, properly built example could be provided by someone that actually knows what he is doing when it comes to js packages, kino init functions? eg. livebook live component + minimalistic glideapp data grid init ( without any fancy features ).

This could also serve as helpful documentation and entrypoint for JS framework based Kino components.

Failed to load the widget JS module, got the following error:

    Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../".

See the browser console for more details. If running behind an authentication proxy, make sure the /public/* routes are publicly accessible.

[jonatanklosko]

See this repo for a simple Kino component implemented in react. The full implementation is in this commit. You can use that as a stating point, install glide as npm dependency and build on top.

[adiibanez]

@jonatanklosko thanks a lot. the repo is very helpful