# 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:** 12

<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

```

---

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