Skip to main content

Add a dynamic mouse over for each row in a data-table

Try in Editor:

Vue:

  <div id="app">
    <v-app id="inspire">
      <div>
        <v-data-table
          :headers="headers"
          :items="items"
          :search="search"
          :loading="isLoading"
          hide-default-footer
          item-key="name"
          class="elevation-1"
        >
          <template v-slot:body="{ items }">
            <tbody>
              <tr v-for="(item,index) in items" :key="item.name">
                <td>
                  <p @mouseover="item.show = true" @mouseleave="item.show = false">
                  {{ item.name }}
                  <v-icon v-show="item.show">delete</v-icon>
                  </p>
                </td>
                <td>CONTENT</td>
                <td>CONTENT</td>
                <td>CONTENT</td>
                <td>CONTENT</td>
                <td>CONTENT</td>
              </tr>
            </tbody>
          </template>     
        </v-data-table>
      </div>
    </v-app>
  </div>

  <script type="text/javascript">
    export default {
      return {
        data() {
          show: false
        }
      }
    }
  </script>

const desserts = [
  {
    name: 'Frozen Yogurt',
    calories: 159,
    fat: 6.0,
    carbs: 24,
    protein: 4.0,
    iron: '1%',
    show:false
  },
  {
    name: 'Ice cream sandwich',
    calories: 237,
    fat: 9.0,
    carbs: 37,
    protein: 4.3,
    iron: '1%',
    show:false
  },
  {
    name: 'Eclair',
    calories: 262,
    fat: 16.0,
    carbs: 23,
    protein: 6.0,
    iron: '7%',
    show:false
  },
  {
    name: 'Cupcake',
    calories: 305,
    fat: 3.7,
    carbs: 67,
    protein: 4.3,
    iron: '8%',
  },
  {
    name: 'Gingerbread',
    calories: 356,
    fat: 16.0,
    carbs: 49,
    protein: 3.9,
    iron: '16%',
  },
  {
    name: 'Jelly bean',
    calories: 375,
    fat: 0.0,
    carbs: 94,
    protein: 0.0,
    iron: '0%',
  },
  {
    name: 'Lollipop',
    calories: 392,
    fat: 0.2,
    carbs: 98,
    protein: 0,
    iron: '2%',
  },
  {
    name: 'Honeycomb',
    calories: 408,
    fat: 3.2,
    carbs: 87,
    protein: 6.5,
    iron: '45%',
  },
  {
    name: 'Donut',
    calories: 452,
    fat: 25.0,
    carbs: 51,
    protein: 4.9,
    iron: '22%',
  },
  {
    name: 'KitKat',
    calories: 518,
    fat: 26.0,
    carbs: 65,
    protein: 7,
    iron: '6%',
  },
]

Javascript:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      enabled: null,
      items: desserts,
      search: null,
      slots: [
        'body',
        'body.append',
        'body.prepend',
        'footer',
        'header.data-table-select',
        'header',
        'progress',
        'item.data-table-select',
        'item.<name>',
        'no-data',
        'no-results',
        'top',
      ],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
    }
  },

  computed: {
    showSelect () {
      return this.isEnabled('header.data-table-select') || this.isEnabled('item.data-table-select')
    },
    hideHeaders () {
      return !this.showSelect
    },
    isLoading () {
      return this.isEnabled('progress')
    },
  },

  watch: {
    enabled (slot) {
      if (slot === 'no-data') {
        this.items = []
      } else if (slot === 'no-results') {
        this.search = '...'
      } else {
        this.search = null
        this.items = desserts
      }
    },
  },

  methods: {
    isEnabled (slot) {
      return this.enabled === slot
    },
  },
})

Comments

Post a Comment

Popular posts from this blog

vagrant up not working windows 10 | Stderr: VBoxManage.exe: error: Failed to get device handle and/or partition

 vagrant up not working windows 10 If you get an error message during  vagrant up  or when starting a VirtualBox machine, telling you that VT-x is not available, a reason may be that you have enabled Hyper-V on your Windows 10 machine: VirtualBox and Hyper-V cannot share the VT-x CPU: $ vagrant up Bringing machine 'default' up with 'virtualbox' provider... ==> default: Checking if box 'thesteve0/openshift-origin' is up to date... ==> default: Clearing any previously set network interfaces... ==> default: Preparing network interfaces based on configuration... default: Adapter 1: nat default: Adapter 2: hostonly ==> default: Forwarding ports... default: 8443 (guest) => 8443 (host) (adapter 1) default: 22 (guest) => 2222 (host) (adapter 1) ==> default: Running 'pre-boot' VM customizations... ==> default: Booting VM... There was an error while executing `VBoxManage`, a CLI used by Vagrant for controlling VirtualBox. The command an...
Post a Comment
Read more

HTML to Office Word header and footer generation

Here is an HTML to Office Word header and footer generation code Below: fwrite($oFile, <html xmlns="http://www.w3.org/TR/REC-html40" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title> </title> <!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Print</w:View> <w:Zoom>100</w:Zoom> </w:WordDocument> </xml><![endif]--> <style> <!-- /* Style Definitions */ p.MsoHeader, li.MsoHeader, div.MsoHeader{ margin:0in; margin-top:.0001pt; mso-pagination:widow-orphan; tab-stops:center 3.0in right 6.0in; } p.MsoFooter, li.MsoFooter, div.MsoFooter{ margin:0in 0in 1in 0in; margin-bottom:.0001pt; mso-pagination:widow-orpha...
Post a Comment
Read more

Add footer page number in Microsoft (Word) using PHP

Here is an example of adding a footer page number in a word document( .docx, .doc ) using PHP in ProcessMaker tool.  Sometimes we would like to add the footer connect via styles or tag attributes to enable the footer on pages.  View:          Below screen the output screen to display the custom footer with few lines of code Example: <table border="0" cellpadding="0" cellspacing="0" id="test" style="width: 100%;"> <tbody> <tr> <td> <!--footer starts--> <div id="f1" style="position: fixed; bottom: 5mm; left: 0mm; width: 100%; mso-element: footer;"> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tbody> <tr> <td class="footer"> ...
Post a Comment
Read more