Editable table using Stipple UI

I want to build a web app to interact with backend data processing. How can I write a editable table with stipple? I can’t find helpful documents and become struggling. Any help or suggestions would be much appreciated!

@wuxinyu There isn’t an easy way to do this right now but I’d like to look into it and implement it.

Do you have an example of what exactly you’re trying to do? Will you edit the whole row (eg select row and show a form with an input for each column)? Or cell by cell? What kind of data do you have (text, numbers, images, etc)?

Personally I think integrating into something like sheetjs is a ‘killer app’ for a lot of data-oriented webapps:

Observablejs recently integrated with it

1 Like

@sashmit Looks great, I’ll take a closer look!

Ag-grid provides editable tables. An example for Pluto integration using JS is GitHub - lungben/PlutoGrid.jl

Bindings for React and Vue are also available. It should be possible to use it also with Stipple.

Thank you for your reply! I want to edit the table cell by cell and select or remove row by row. The data that I want to edit is text or numbers. Really thank you for interest to implement it for I know little in this and struggle!

Thank you for your reply. It looks like a good solution, I’ll take a closer look. For I just want a simple table I may just use the PlutoGrid.jl without stipple. Thank you very much!

The editable_table looks good, but how can I change it back to a DataFrames or vectors? I have tried the create_dataframe function in your package but I don’t know how to use it. Would you give me some information for it?

A usage example is here (I know that the GitHub repo documentation could be better…).

Revise is only used for my development, you can skip it if you do not need it for other purposes.
The package is intended to be used in Pluto, it will not work 1:1 as stand-alone script (but could be modified for it).

### A Pluto.jl notebook ###
# v0.17.1

using Markdown
using InteractiveUtils

# This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
macro bind(def, element)
        local iv = try Base.loaded_modules[Base.PkgId(Base.UUID("6e696c72-6542-2067-7265-42206c756150"), "AbstractPlutoDingetjes")].Bonds.initial_value catch; b -> missing; end
        local el = $(esc(element))
        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : iv(el)

# ╔═╡ 53805c10-0379-11ec-0687-152487744aef
	using Pkg
	using Revise
	using DataFrames

# ╔═╡ 56fbe806-2a8b-4b0b-b920-9a801dda41b6
	using PlutoGrid

# ╔═╡ adcd80e1-2f4a-4e00-9acd-f4c275f93567

# ╔═╡ 1244f430-3dea-48e6-bcfe-4e978875b76f
df = DataFrame(x=1:n, y=n:-1:1, z=["row_$i" for i=1:n], a=rand(n), b=rand(n), c=rand(Bool, n))

# ╔═╡ 478f9e8f-6e1d-47fa-97ef-553850f610e1
readonly_table(df; pagination=false)

# ╔═╡ d9fb0aac-ff21-4c93-bc97-17ee4b632ccc
@bind x editable_table(df, height=400, auto_confirm=true)

# ╔═╡ 42ab2c04-045b-4cd4-8582-8a3a27a2d467

# ╔═╡ 74a9e26d-0696-49b0-9a9b-64ae9a710651
df_edited = create_dataframe(x; drop_modified_indicator=true)

# ╔═╡ 7ea89c42-d1bb-4d72-ae5b-5ed5f44017c9

# ╔═╡ 86f683ec-3a97-48b5-a3b5-46c567ded189
# Appendix

# ╔═╡ Cell order:
# ╠═adcd80e1-2f4a-4e00-9acd-f4c275f93567
# ╠═1244f430-3dea-48e6-bcfe-4e978875b76f
# ╠═478f9e8f-6e1d-47fa-97ef-553850f610e1
# ╠═d9fb0aac-ff21-4c93-bc97-17ee4b632ccc
# ╠═42ab2c04-045b-4cd4-8582-8a3a27a2d467
# ╠═74a9e26d-0696-49b0-9a9b-64ae9a710651
# ╠═7ea89c42-d1bb-4d72-ae5b-5ed5f44017c9
# ╠═86f683ec-3a97-48b5-a3b5-46c567ded189
# ╠═56fbe806-2a8b-4b0b-b920-9a801dda41b6
# ╠═53805c10-0379-11ec-0687-152487744aef
@bind data_edited PlutoGrid.editable_table(data,auto_confirm=true,return_only_modified=true)

where data is a DataFrames and data_edited is a Vector{Dict{Any Any}}. It works really good!