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

Specific Domains Web Stack
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 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="$ids">
	<v-app>
	  <v-data-table
		:headers="headers"
		:items="Valores"
		:items-per-page=$columns
	></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: '#$ids',
	  vuetify: new Vuetify(),
	  data () {
			return $data 
		}
	})
</script>
<style>
	.v-application--wrap {
		min-height: 1vh;
	}
	.v-data-footer__select {
		display: none;
	}
</style>
""")
end

Thanks again