# Interactive Data Table in Pluto.jl (via a silly hack)

**URL:** <https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678>\
**Category:** Web Stack\
**Created:** [August 10, 2020, 12:39pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678 "2020-08-10T12:39:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [August 10, 2020, 12:39pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/1 "2020-08-10T12:39:18Z")

</div>

@fonsp This is meant to be more fun than anything serious - I came up with a nice little hack for creating interactive data tables in my Pluto notebooks 🙂

After wrangling a .csv file into a `Dict` with a very specific structure, I can convert it to JSON and pass it to a function that will return all of the HTML/JavaScript necessary to load the data table:

Convert to `Dict`:

```julia
states = readdlm(raw"C:\Users\mthel\Julia\src_data\states_abbrevs_fips.csv", ',', header=true)

states_dict = Dict(
    "headers" => [Dict("text" => "Name", "value" => "name"), Dict("text" => "Abbreviation", "value" => "abbrev"), Dict("text" => "FIPS", "value" => "fips")],
    "states" => [Dict("name" => states[1][i,1], "abbrev" => states[1][i,2], "fips" => states[1][i,3]) for i in 1:size(states[1],1)]
)

```

Function that takes JSON argument and returns data table:

```julia
function data_table(data)
	return HTML("""
		<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
		<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

	  <div id="app">
		<v-app>
		  <v-data-table
		  :headers="headers"
		  :items="states"
		></v-data-table>
		</v-app>
	  </div>

	  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
	  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
	
	<script>
		new Vue({
		  el: '#app',
		  vuetify: new Vuetify(),
		  data () {
				return $data
			}
		})
	</script>
	<style>
		.v-application--wrap {
			min-height: 10vh;
		}
		.v-data-footer__select {
			display: none;
		}
	</style>
	""")
end

```

And the result:

 ![radio_button_test4](https://global.discourse-cdn.com/julialang/original/3X/6/b/6bac1395077d74e355eecc6a032407cb8c61e932.gif)

---

<div class="post-metadata">

**Author:** ![fonsp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fonsp/32/222349_2.png) [@fonsp](https://discourse.julialang.org/u/fonsp)\
**Post date:** [August 12, 2020, 9:46am UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/2 "2020-08-12T09:46:41Z")

</div>

Very cool! Happy to see that this is possible inside Pluto 🙂 Could you send the csv? I’d like to try it out!

This looks very useful already - maybe we can turn this into a feature/package/something one day!

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [August 12, 2020, 12:09pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/3 "2020-08-12T12:09:57Z")

</div>

Sure! The data is available here: [https://gist.github.com/mthelm85/f3967387e13ff03f92f615f6423f0f45](https://gist.github.com/mthelm85/f3967387e13ff03f92f615f6423f0f45)

The ability to render a Vue app inside of an output cell is pretty cool and opens the door to lots of interesting possibilities. In this case, I am leveraging the Vuetify plugin for [the data table](https://vuetifyjs.com/en/components/data-tables/) and Vuetify expects a JSON object of the following form:

```javascript
{
headers: [
    { text: 'Column 1', value: 'col1' },
    { text: 'Column 2', value: 'col2' }
  ],
  data: [
    {
      col1: 'Item 1',
      col2: 500
    },
    {
      col1: 'Item 2',
      col2: 250
    }
  ]
}

```

I might write a simple function that can wrangle any .csv with a header row into this format so that I can use this in a more general way in my Pluto notebooks 😀 I have a decent amount of experience with Vue (although I’m a bit rusty at the moment) so I can see myself leveraging it when I really want a wow factor in my Pluto notebooks.

---

<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:** [August 18, 2020, 6:07pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/4 "2020-08-18T18:07:28Z")

</div>

Great idea!  
It woud be good to support the Tables.jl interface for input. Then it would not only work for CSVs, but also for DataFrames, SQL Query results, etc.

---

<div class="post-metadata">

**Author:** ![Tomas\_Pevny](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tomas_pevny/32/25466_2.png) [@Tomas\_Pevny](https://discourse.julialang.org/u/Tomas_Pevny)\
**Post date:** [August 18, 2020, 8:07pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/5 "2020-08-18T20:07:14Z")

</div>

I Absolutely love this hack.

I am recently thinking about wrapping Sigma.js library [http://sigmajs.org/](http://sigmajs.org/) and this might make it very easy to do (to some extent).

Any suggestions, how to include sigma.js script are welcomed, as I am a total newbie in this area, but I really want interactive tool to visualize graphs.

---

<div class="post-metadata">

**Author:** ![anon37204545](https://avatars.discourse-cdn.com/v4/letter/a/439d5e/32.png) [@anon37204545](https://discourse.julialang.org/u/anon37204545)\
**Post date:** [August 18, 2020, 10:30pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/6 "2020-08-18T22:30:26Z")

</div>

This hack isn’t silly, it’s very smart. 😆

I think you can drop this dependency:

```julia
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

```

since there are only two icons (\< and \>) and replace it with something minimal.

---

<div class="post-metadata">

**Author:** ![pdeffebach](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pdeffebach/32/10320_2.png) [@pdeffebach](https://discourse.julialang.org/u/pdeffebach)\
**Post date:** [August 18, 2020, 11:29pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/7 "2020-08-18T23:29:09Z")

</div>

Does TableView not work out of the box with Pluto?

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [August 18, 2020, 11:40pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/8 "2020-08-18T23:40:39Z")

</div>

> Does TableView not work out of the box with Pluto?

It didn’t work for me when I tried it…

---

<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:** [August 19, 2020, 7:20am UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/9 "2020-08-19T07:20:14Z")

</div>

Stipple (by @essenciary) uses also Vue

> [@Stipple: Reactive data dashboards with Julia \[WIP\]](https://discourse.julialang.org/t/stipple-reactive-data-dashboards-with-julia-wip/37291):
>
> I wanted to show a quick teaser of an early prototype of reactive UIs with Julia and ask for some early feedback on the API/look-and-feel. This is a data table component that I’m currently working on (two-way reactive form inputs and text elements are already functional). I took a declarative approach where one sets up a ReactiveModel - and Stipple automatically sets up the reactive UI. The example shows the default rendering of a DataFrame loaded via CSV. Quick demo: …

Maybe there are synergies between Stipple and PlutoUI?

---

<div class="post-metadata">

**Author:** ![essenciary](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/essenciary/32/210469_2.png) [@essenciary](https://discourse.julialang.org/u/essenciary)\
**Post date:** [August 19, 2020, 7:23am UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/10 "2020-08-19T07:23:07Z")

</div>

For sure! Planning to make Stipple run on Pluto soon (though probably not compatible with PlutoUI as they use different tech and do the same things).

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [August 19, 2020, 2:22pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/11 "2020-08-19T14:22:36Z")

</div>

> For sure! Planning to make Stipple run on Pluto soon

Stipple + Pluto = one drool-worthy notebook…

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [August 19, 2020, 3:32pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/12 "2020-08-19T15:32:26Z")

</div>

> [@lungben](#):
>
> It woud be good to support the Tables.jl interface for input. Then it would not only work for CSVs, but also for DataFrames, SQL Query results, etc.

Changing the function in the OP to this should work with the Tables.jl interface (I just tested with `CSV.File` and with a `DataFrame` and it worked fine:

```julia
using JSON2
using Tables

function data_table(table)
	d = Dict(
        "headers" => [Dict("text" => string(name), "value" => string(name)) for name in Tables.columnnames(table)],
        "data" => [Dict(string(name) => row[name] for name in Tables.columnnames(table)) for row in Tables.rows(table)]
    )
	djson = JSON2.write(d)
	
	return HTML("""
		<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
		<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

	  <div id="app">
		<v-app>
		  <v-data-table
		  :headers="headers"
		  :items="data"
		></v-data-table>
		</v-app>
	  </div>

	  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
	  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
	
	<script>
		new Vue({
		  el: '#app',
		  vuetify: new Vuetify(),
		  data () {
				return $djson
			}
		})
	</script>
	<style>
		.v-application--wrap {
			min-height: 10vh;
		}
		.v-data-footer__select {
			display: none;
		}
	</style>
	""")
end

```

---

<div class="post-metadata">

**Author:** ![pdeffebach](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pdeffebach/32/10320_2.png) [@pdeffebach](https://discourse.julialang.org/u/pdeffebach)\
**Post date:** [August 19, 2020, 3:34pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/13 "2020-08-19T15:34:58Z")

</div>

You should try and get TableView to work. The lazy loading is essential for performance and non-trivial to implement. Without it things get very slow with many rows of data (10k+)

---

<div class="post-metadata">

**Author:** ![fonsp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fonsp/32/222349_2.png) [@fonsp](https://discourse.julialang.org/u/fonsp)\
**Post date:** [August 19, 2020, 10:58pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/14 "2020-08-19T22:58:22Z")

</div>

exciting! let me know if i can help - [fonsvdplas@gmail.com](mailto:fonsvdplas@gmail.com)

---

<div class="post-metadata">

**Author:** ![essenciary](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/essenciary/32/210469_2.png) [@essenciary](https://discourse.julialang.org/u/essenciary)\
**Post date:** [August 20, 2020, 8:34am UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/15 "2020-08-20T08:34:46Z")

</div>

Fantastic @fonsp! I’ll follow up 🤩

---

<div class="post-metadata">

**Author:** ![Peter24K2G](https://avatars.discourse-cdn.com/v4/letter/p/a9adbd/32.png) [@Peter24K2G](https://discourse.julialang.org/u/Peter24K2G)\
**Post date:** [October 10, 2020, 4:39am UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/16 "2020-10-10T04:39:58Z")

</div>

Hi @mthelm85 I’m using your function, which is great btw, for composing a little report in Pluto where I need to print like 31 values, this kind of notebooks are really amazing when you export them as pdf, I would like to present the full table, 31 rows, to be able to export the notebook as pdf whit the full information, Do you think that you Table could present the 31 rows? Thanks btw.

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [October 10, 2020, 2:55pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/17 "2020-10-10T14:55:29Z")

</div>

@Peter24K2G, welcome to the Julia community!

Unfortunately, in order to display all 31 rows you would have to modify the Vuetify.js source code (I doubt it’s worth the effort). Instead, I think what I would do in your case is export your notebook as an `.html` file and then you should be able to just add to the HTML table that is generated. If you do a Google search for “html table generator” there are even sites that offer simple GUIs for creating your HTML table. You should then be able to plug this into the HTML document and then convert to a PDF, although I’ve never done such a thing myself.

---

<div class="post-metadata">

**Author:** ![andre1sk](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/andre1sk/32/17907_2.png) [@andre1sk](https://discourse.julialang.org/u/andre1sk)\
**Post date:** [October 10, 2020, 11:28pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/18 "2020-10-10T23:28:53Z")

</div>

> [@Peter24K2G](#):
>
> need to print like 31 values

items-per-page looks like what you are looking for  
[https://vuetifyjs.com/en/api/v-data-table/#props](https://vuetifyjs.com/en/api/v-data-table/#props)

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [October 11, 2020, 12:51pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/19 "2020-10-11T12:51:49Z")

</div>

> [@andre1sk](#):
>
> items-per-page looks like what you are looking for

Oh! They do have a prop for that, nice! So, just do:

```html
		  <v-data-table
		  :headers="headers"
		  :items="data"
          :items-per-page=31
		></v-data-table>

```

---

<div class="post-metadata">

**Author:** ![bhoov](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/bhoov/32/18604_2.png) [@bhoov](https://discourse.julialang.org/u/bhoov)\
**Post date:** [October 12, 2020, 3:38pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/20 "2020-10-12T15:38:03Z")

</div>

This hack is genius and it gets me thinking – is there any way to build our own more complex javascript/Vue visualizations in a local file (say in the same repository as our notebook) and import them into pluto?

[Next page](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678.md?page=2)