HC200ok / vue3-easy-data-table

A customizable and easy-to-use data table component made with Vue.js 3.x
MIT License
536 stars 105 forks source link

Optional hover menu and mouseover events #326

Open adunndevster2 opened 1 year ago

adunndevster2 commented 1 year ago

Type

It lets the user optionally create a slot that appears on hover over a row. This is super useful for user experiences where you'd like a menu of options to appear on the row if you hover over it. Very common case, as google and many others use it all the time. It also gives the user the option to listen to a "hover" event if they'd like.

We need this for our product! Thank you for this table, it rocks.

Put an x in the boxes that apply_

Checklist

Put an x in the boxes that apply._

DEMO

https://github.com/HC200ok/vue3-easy-data-table/assets/38018663/2d02eab0-8cab-4b19-a827-7daecc8897ac

USAGE:

  1. just add hover-row-to-show-element to your DataTable
  2. make use of the slot like so:
    <template #hover="item">
    <div style="padding: 10px 0px 0px 15px;">
    This might show menu options or something for {{ item.name }}...
    </div>
    </template>
adunndevster2 commented 1 year ago

@HC200ok - I hope this helps the project! Let me know what you think. It's something we definitely need, for sure!

adunndevster2 commented 1 year ago

@HC200ok I've made some more improvements to this, and we are using it in our production site now. (I had to make a new npm package temporarily until/if this is merged in). Do you think you might be able to take a look at it?