, 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:
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.