# GUI to edit matrix in Julia?

**URL:** <https://discourse.julialang.org/t/gui-to-edit-matrix-in-julia/48663>\
**Category:** Data\
**Tags:** question, gui\
**Created:** [October 19, 2020, 10:53pm UTC](https://discourse.julialang.org/t/gui-to-edit-matrix-in-julia/48663 "2020-10-19T22:53:24Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [October 19, 2020, 10:53pm UTC](https://discourse.julialang.org/t/gui-to-edit-matrix-in-julia/48663/1 "2020-10-19T22:53:24Z")

</div>

I would like to ask a similar question to Stack Overflow’s [GUI to Create Table in Julia](https://stackoverflow.com/questions/37925356/gui-to-create-table-in-julia). Is there any Pkg in Julia that has a GUI like uitable in Matlab or similar that allows editing interactively a matrix/table? And once done with the edits, continue the normal flow of the program.

---

<div class="post-metadata">

**Author:** ![samuel\_okon](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/samuel_okon/32/10285_2.png) [@samuel\_okon](https://discourse.julialang.org/u/samuel_okon)\
**Post date:** [October 20, 2020, 12:27am UTC](https://discourse.julialang.org/t/gui-to-edit-matrix-in-julia/48663/2 "2020-10-20T00:27:14Z")

</div>

check if [https://github.com/JuliaComputing/TableView.jl](https://github.com/JuliaComputing/TableView.jl) meets your needs

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [October 20, 2020, 6:39am UTC](https://discourse.julialang.org/t/gui-to-edit-matrix-in-julia/48663/3 "2020-10-20T06:39:53Z")

</div>

Thanks for the pointer but after some investigation it seems that it is still work in progress to edit cells in place? See post: [Edit a cell in TableView](https://discourse.julialang.org/t/edit-a-cell-in-tableview/25363/7).  
So with a code example, the question is how to edit matrix in-place in a GUI:

```julia
using DataFrames, TableView
mat = [1 4.0 7; 2 5.0 8; 3 6.0 9]
matdf = DataFrame(mat)
showtable(matdf)
# Is there anything like **edittable**?

```

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [October 20, 2020, 8:14am UTC](https://discourse.julialang.org/t/gui-to-edit-matrix-in-julia/48663/4 "2020-10-20T08:14:40Z")

</div>

I know this does not answer your quetion, but

1. if it is just a few entries, you can just use `setindex!` (`mat[2, 3] = 42`) from the REPL,

2. if you need to edit a lot of data, presumably you have it in some external format so you can edit that using the appropriate external tool.

---

<div class="post-metadata">

**Author:** ![lungben](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lungben/32/12314_2.png) [@lungben](https://discourse.julialang.org/u/lungben)\
**Post date:** [October 20, 2020, 10:17am UTC](https://discourse.julialang.org/t/gui-to-edit-matrix-in-julia/48663/5 "2020-10-20T10:17:15Z")

</div>

I am not aware that such a package exists, but agree that it would be very helpful.  
Ideally, it would be a html / js frontend coupled to a Julia Tables.jl compatible data structure, like a DataFrame. This way, it could be used in Pluto or Julia web applications (e.g. with Genie).

For the frontend, there are already solutions available like

> **[GitHub - mindmup/editable-table: tiny jQuery/Bootstrap widget that makes a...](https://github.com/mindmup/editable-table)**
>
> tiny jQuery/Bootstrap widget that makes a HTML table editable - GitHub - mindmup/editable-table: tiny jQuery/Bootstrap widget that makes a HTML table editable

(this may not be the best choice because the repo is not active anymore).

It would be a nice project to wrap something like it into a Julia library, but unfortunately I do not have any JS knowledge ☹

Related is the following discussion for displaying tabular data:

> [@Interactive Data Table in Pluto.jl (via a silly hack)](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/26):
>
> @mthelm85 Thanks man actually I change the function just a little, but your advice help me a lot. Now I’m trying to save this function in a Module so I can call it from any .jl or Pluto notebook essentially, just typing using MyModule o the name you want, if you have the time it would be really usefull to have this module ready to download from GitHub, this hack that you did help me a lot, I know that is gonna be useful for a lot of people out there. function data\_table(data,columns,ids) return…

---

<div class="post-metadata">

**Author:** ![lmiq](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lmiq/32/18314_2.png) [@lmiq](https://discourse.julialang.org/u/lmiq)\
**Post date:** [October 20, 2020, 11:58am UTC](https://discourse.julialang.org/t/gui-to-edit-matrix-in-julia/48663/6 "2020-10-20T11:58:46Z")

</div>

Not that I intend to say that this is an actual solution, but depending on the use case it is a pretty practical workaround (I have used it sometimes):

```julia
julia>using DelimitedFiles
      function ed!(M)
         tmp_file_name = tempname()
         writedlm(tmp_file_name,M)
         InteractiveUtils.edit(tmp_file_name)
         readM = readdlm(tmp_file_name)
         @. M = readM
         rm(tmp_file_name)
       end
ed! (generic function with 1 method)

julia> M = zeros(4,4)
4×4 Array{Float64,2}:
 0.0 0.0 0.0 0.0
 0.0 0.0 0.0 0.0
 0.0 0.0 0.0 0.0
 0.0 0.0 0.0 0.0

# This will open vim and you can edit the data 
# Here I changed the first element to 1.0
julia> ed!(M)  

julia> M
4×4 Array{Float64,2}:
 1.0 0.0 0.0 0.0
 0.0 0.0 0.0 0.0
 0.0 0.0 0.0 0.0
 0.0 0.0 0.0 0.0

julia>

```

---

<div class="post-metadata">

**Author:** ![pfitzseb](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pfitzseb/32/45566_2.png) [@pfitzseb](https://discourse.julialang.org/u/pfitzseb)\
**Post date:** [October 20, 2020, 12:37pm UTC](https://discourse.julialang.org/t/gui-to-edit-matrix-in-julia/48663/7 "2020-10-20T12:37:26Z")

</div>

You can definitely use TableView for this, it just needs a bit of plumbing:

```julia
using Blink, TableView
w = Blink.Window();
x = rand(10,10)
function update_cell(arr, msg)
    row = msg["row"] + 1 # zero-indexed in JS
    col = parse(Int, match(r"Column(\d+)", msg["col"])[1])
    arr[row, col] = parse(eltype(arr), msg["new"])
end
body!(w, TableView.showtable(x, cell_changed = msg -> update_cell(x, msg)))

```

This will obviously only work for concretely-typed arrays of numbers, but you can of course adjust it to whatever you want.

Feel free open an issue or PR at [https://github.com/JuliaComputing/TableView.jl](https://github.com/JuliaComputing/TableView.jl) if you have ideas on how to make the whole experience smoother.

Edit: Fixed the row indexing.

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [October 20, 2020, 1:22pm UTC](https://discourse.julialang.org/t/gui-to-edit-matrix-in-julia/48663/8 "2020-10-20T13:22:16Z")

</div>

Wow! This is great, thank you @pfitzseb for the magic.  
For some reason, I had to increase row by 1 in the function to avoid 0 indexes. Tested your solution beautifully in loop below.  
_PS: a minor recommendation would be to add an OK button to close the GUI window when done with editing._

```julia
using Blink, TableView

function update_cell(arr, msg)
    row = msg["row"] + 1
    col = parse(Int, match(r"Column(\d+)", msg["col"])[1])
    arr[row, col] = parse(eltype(arr), msg["new"])
end

x = rand(10,10)

# mock-up loop of Julia program not terminating to the REPL until user decides so
leave = false
while !leave
    w = Blink.Window();
    body!(w, TableView.showtable(x, cell_changed = msg -> update_cell(x, msg)))
    println("Enter to continue or Y to leave: ")
    str = readline()
    if str == "y" || str == "Y"
       leave = true
    end
end

```