Vuetify data table: add insert row icon

user_63730 0
Viewed 376

I'm looking for a way to add a dynamic "Insert Row" icon to a Vuetify data-table, similar to the screenshot below:

enter image description here

Any suggestions on how to implement this?

vuetify.js vue.js
1 Answers

Use template to insert a div that reveals only on hover with a sidebutton on absolute:

<v-data-table>
  <template #item="{ item }">
    <div class="myBorderBottomBlueClass"> // only reveal on hover
      // my icon in absolute position left with @click
    </div>
  </template>
</v-data-table>

user_72765810
Related