Skip to content

Instantly share code, notes, and snippets.

@codextremist
Created January 23, 2021 11:33
Show Gist options
  • Save codextremist/e033adaedbbd7706c90f4b294391dd3e to your computer and use it in GitHub Desktop.
Save codextremist/e033adaedbbd7706c90f4b294391dd3e to your computer and use it in GitHub Desktop.
<template>
<div>
<h1>Providers</h1>
<a href='https://postgrest.org/en/v7.0.0/api.html'>check search syntax</a>
<select v-model='pinCol'>
<option v-for='field in header'>{{ field['name'] }}</option>
</select>
<input v-model='query' />
<button @click='fetch'>fetch</button>
<sticky-table
class='el:m-table--highlight-on-hover'
:sticky-col-behavior=true
:sticky-col='pinCol'
:max-chars-per-field='200'
:data=data
:header=header>
<template v-slot:tbody-logo="slotProps">
<td
:title="slotProps.record.slug"
:data-dt-col-value="slotProps.record.slug"
:data-dt-sticky-col="slotProps.stickyCol"
class='lh0 va-m'
>
<svg v-if='slotProps.record.slug' class='h1em w1em'>
<use :xlink:href='`#providers-${slotProps.record.slug}`' />
</svg>
</td>
</template>
</sticky-table>
</div>
</template>
<script>
import StickyTable from "~external/StickyTable.vue";
export default {
name: 'providers',
components: {
StickyTable
},
data () {
return {
header: [
{
name: 'id',
label: 'id'
},
{
name: 'name',
label: 'name'
},
{
name: 'slug',
label: 'slug'
},
{
name: 'logo',
label: 'logo'
},
{
name: 'published',
label: 'published'
},
{
name: 'afn_url_template',
label: 'afn_url_template'
},
{
name: 'created_at',
label: 'created_at'
},
{
name: 'updated_at',
label: 'updated_at'
}
],
pinCol: 'id',
query: '',
data: []
}
},
created() {
this.fetch()
},
methods: {
fetch() {
var vm = this;
this.$api.get(`/providers?${this.query}`).then(response => { vm.data = response.data });
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment