# 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:** 1\
**Showing post:** 25

<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 16, 2020, 5:06pm UTC](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678/25 "2020-10-16T17:06:28Z")

</div>

> [@Peter24K2G](#):
>
> @mthelm85 Hi, I have another question, It is possible to use the function
> 
> ```julia
> data_table(JSON2.write(data))
> 
> ```
> 
> more than once in Pluto, the first time I use this print the table perfectly, but the second time I call the function whit other data, it doesn’t show anything.

😆, I never thought about that. It’s because of the static `id` for the `<div>` where the Vue app is rendered. Use this version instead:

```julia
using JSON2
using Random
using Tables

function data_table(table)
	app_id = randstring('a':'z')
	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_id">
		<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_id',
		  vuetify: new Vuetify(),
		  data () {
				return $djson
			}
		})
	</script>
	<style>
		.v-application--wrap {
			min-height: 10vh;
		}
		.v-data-footer__select {
			display: none;
		}
	</style>
	""")
end

```

Note that you now need to load the Random package.

---

_[View the full topic](https://discourse.julialang.org/t/interactive-data-table-in-pluto-jl-via-a-silly-hack/44678)._