Index.vue

<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>