Editable table using Stipple UI

General Usage
, , ,
1

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!

2

@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)?

3

Personally I think integrating into something like sheetjs is a ‘killer app’ for a lot of data-oriented webapps:
https://github.com/SheetJS/sheetjs

Observablejs recently integrated with it

1 Like
4

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

5

Ag-grid provides editable tables. An example for Pluto integration using JS is https://github.com/lungben/PlutoGrid.jl

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

6

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!

7

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!

8

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?

9

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)
    quote
        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)
        el
    end
end

# ╔═╡ 53805c10-0379-11ec-0687-152487744aef
begin
	using Pkg
	Pkg.activate(mktempdir())
	Pkg.add("Revise")
	using Revise
	Pkg.add("DataFrames")
	using DataFrames
end

# ╔═╡ 56fbe806-2a8b-4b0b-b920-9a801dda41b6
begin
	Pkg.develop("PlutoGrid")
	using PlutoGrid
end

# ╔═╡ adcd80e1-2f4a-4e00-9acd-f4c275f93567
n=10_000

# ╔═╡ 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
x

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

# ╔═╡ 7ea89c42-d1bb-4d72-ae5b-5ed5f44017c9
readonly_table(df_edited)

# ╔═╡ 86f683ec-3a97-48b5-a3b5-46c567ded189
md"""
# 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
2 Likes
10 
@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!

2 Likes