Add an example of an editable cell for data-table

[jean-moldovan]

Having an editable cell inside data-table is quite common use-case. In the future versions this will be supported out-of-the-box. For now, let's add an example on how to implement this using scoped slots:

<template>
  <va-card :title="$t('tables.labelsActions')">
    <va-data-table
      :fields="fields"
      :data="users"
      no-pagination
    >
      <template slot="email-editable" slot-scope="props">
        <span style="cursor: pointer">
          {{ props.rowData.email }}

          <va-popup>
            <va-card style="width: 300px">
              <va-input v-model="props.rowData.email" />
            </va-card>
          </va-popup>
        </span>
      </template>

      <template slot="country-editable" slot-scope="props">
        <span style="cursor: pointer">
          {{ props.rowData.country }}

          <va-popup>
            <va-card style="width: 300px">
              <va-input v-model="props.rowData.country" />
            </va-card>
          </va-popup>
        </span>
      </template>
    </va-data-table>
  </va-card>
</template>

<script>
import users from '../../../data/users.json'

export default {
  data () {
    return {
      users: users.slice(0, 6),
    }
  },
  computed: {
    fields () {
      return [{
        name: '__slot:email-editable',
        title: this.$t('tables.headings.email'),
      }, {
        name: '__slot:country-editable',
        title: this.$t('tables.headings.country'),
      }]
    },
  },
}
</script>

<style lang="scss">
</style>

[dschonholtz]

I need this for a project I'm working on using Vue 3. Is this currently possible with Vuestic?