Optional hover menu and mouseover events

package.json

@@ -1,22 +1,16 @@
 {
-  "name": "vue3-easy-data-table",
+  "name": "wl-vue3-easy-data-table",
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.5.47",
+  "version": "1.5.48",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [
     "dist",
     "types"
   ],
-  "keywords": [
-    "vue3",
-    "data-table-component",
-    "data-table",
-    "vue3-component",
-    "vue-component"
-  ],
+  "keywords": [],
   "homepage": "https://github.com/HC200ok/vue3-easy-data-table",
   "main": "./dist/vue3-easy-data-table.umd.js",
   "module": "./dist/vue3-easy-data-table.es.js",

src/components/DataTable.vue

@@ -48,7 +48,7 @@
               :style="getFixedDistance(header.value)"
               @click.stop="(header.sortable && header.sortType) ? updateSortField(header.value, header.sortType) : null"
             >
-              <MultipleSelectCheckBox
+            <MultipleSelectCheckBox
                 v-if="header.text === 'checkbox'"
                 :key="multipleSelectStatus"
                 :status="multipleSelectStatus"
@@ -105,6 +105,7 @@
           v-else-if="headerColumns.length"
           class="vue3-easy-data-table__body"
           :class="{'row-alternation': alternating}"
+          @mouseleave="hoverRowToShowElement && clearHoverRowIndex()"
         >
           <slot
             name="body-prepend"
@@ -132,11 +133,16 @@
                 clickRow(item, 'single', $event);
                 clickRowToExpand && updateExpandingItemIndexList(index + prevPageEndIndex, item, $event);
               }"
+              @mouseover="($event) => {
+                hoverRow(item, $event);
+                hoverRowToShowElement && updateHoverRowIndex(index + prevPageEndIndex, item, $event);
+              }"
               @dblclick="($event) => {clickRow(item, 'double', $event)}"
               @contextmenu="($event) => {contextMenuRow(item, $event)}"
             >
               <td
                 v-for="(column, i) in headerColumns"
+                :id="`checkBoxTD_${index}`"
                 :key="i"
                 :style="getFixedDistance(column, 'td')"
                 :class="[{
@@ -197,6 +203,22 @@
                 />
               </td>
             </tr>
+            <tr
+              v-if="ifHasHoverSlot && hoverRowIndex === index + prevPageEndIndex"
+              :class="['hover-row', {'even-row': (index + 1) % 2 === 0}]"
+            >
+              <td
+                :colspan="headersForRender.length"
+              >
+              <div :style="getHoverStyle(index)" :class="{'even-row': alternating && (index + 1) % 2 === 0}">
+                <slot
+                  name="hover"
+                  v-bind="item"
+                />
+              </div>
+
+              </td>
+            </tr>
           </template>
           <slot
             name="body-append"
@@ -318,10 +340,11 @@ import useTotalItems from '../hooks/useTotalItems';
 
 import type { Header, Item } from '../types/main';
 import type { HeaderForRender } from '../types/internal';
-
 // eslint-disable-next-line import/extensions
 import { generateColumnContent } from '../utils';
 import propsWithDefault from '../propsWithDefault';
+import useHoverRow from '../hooks/useHoverRow';
+import useHoverRowElement from '../hooks/useHoverRowElement';
 
 const props = defineProps({
   ...propsWithDefault,
@@ -384,6 +407,7 @@ const slots = useSlots();
 const ifHasPaginationSlot = computed(() => !!slots.pagination);
 const ifHasLoadingSlot = computed(() => !!slots.loading);
 const ifHasExpandSlot = computed(() => !!slots.expand);
+const ifHasHoverSlot = computed(() => !!slots.hover);
 const ifHasBodySlot = computed(() => !!slots.body);
 
 // global dataTable $ref
@@ -401,10 +425,12 @@ onMounted(() => {
 
 const emits = defineEmits([
   'clickRow',
+  'hoverRow',
   'contextmenuRow',
   'selectRow',
   'deselectRow',
   'expandRow',
+  'showHoverElement',
   'updateSort',
   'updateFilter',
   'update:itemsSelected',
@@ -538,6 +564,16 @@ const {
   emits,
 );
 
+const {
+  hoverRowIndex,
+  updateHoverRowIndex,
+  clearHoverRowIndex,
+} = useHoverRowElement(
+  pageItems,
+  prevPageEndIndex,
+  emits,
+);
+
 const {
   fixedHeaders,
   lastFixedColumn,
@@ -555,6 +591,13 @@ const {
   emits,
 );
 
+const {
+  hoverRow,
+} = useHoverRow(
+  showIndex,
+  emits,
+);
+
 const contextMenuRow = (item: Item, $event: MouseEvent) => {
   if (preventContextMenuRow.value) $event.preventDefault();
   emits('contextmenuRow', item, $event);
@@ -567,11 +610,44 @@ const getColStyle = (header: HeaderForRender): string | undefined => {
   return undefined;
 };
 
-const getFixedDistance = (column: string, type: 'td' | 'th' = 'th') => {
+// const getHoverStyle = (index:number): string | undefined => {
+
+//   let checkBoxTDId = `checkBoxTD_${index}`;
+//   let checkboxTD = document.getElementById(checkBoxTDId);
+//   if(checkboxTD)
+//   {
+//     const width = checkboxTD.clientWidth + 2;
+//     const height = checkboxTD.clientHeight - 1;
+//     return `width: calc(100% - ${width}px); min-width: calc(100% - ${width}px); margin-left:  ${width}px; top: ${-height}px; height: ${height}px; min-height: ${height}px`;
+//   }
+
+//   return undefined;
+// };
+
+const getHoverStyle = (index:number): string | undefined => {
+
+let checkBoxTDId = `checkBoxTD_${index}`;
+let checkboxTD = document.getElementById(checkBoxTDId);
+if(checkboxTD)
+{
+  const width = checkboxTD.clientWidth + 2;
+  const height = checkboxTD.clientHeight;
+return `margin-left: ${width}px; top: ${-height}px; height: ${height - 2}px; min-height: ${height - 2}px`;
+}
+
+return undefined;
+};
+
+const getFixedDistance = (column: string, type: 'td' | 'th' = 'th', setMarginLeft: boolean = false) => {
   if (!fixedHeaders.value.length) return undefined;
   const columInfo = fixedColumnsInfos.value.find((info) => info.value === column);
   if (columInfo) {
-    return `left: ${columInfo.distance}px;z-index: ${type === 'th' ? 3 : 1};position: sticky;`;
+    if(!setMarginLeft)
+    {
+      return `left: ${columInfo.distance}px;z-index: ${type === 'th' ? 3 : 1};position: sticky;`;
+    } else {
+      return `margin-left: ${columInfo.distance}px;`;
+    }
   }
   return undefined;
 };
@@ -582,6 +658,7 @@ watch(loading, (newVal, oldVal) => {
     if (newVal === false && oldVal === true) {
       updateCurrentPaginationNumber(serverOptionsComputed.value.page);
       clearExpandingItemIndexList();
+      clearHoverRowIndex();
     }
   }
 });
@@ -602,6 +679,7 @@ watch([searchValue, filterOptions], () => {
 
 watch([currentPaginationNumber, clientSortOptions, searchField, searchValue, filterOptions], () => {
   clearExpandingItemIndexList();
+  clearHoverRowIndex();
 }, { deep: true });
 
 watch(pageItems, (value) => {
@@ -626,7 +704,7 @@ defineExpose({
   updatePage,
   rowsPerPageOptions: rowsItemsComputed,
   rowsPerPageActiveOption: rowsPerPageRef,
-  updateRowsPerPageActiveOption: updateRowsPerPage,
+  updateRowsPerPageActiveOption: updateRowsPerPage
 });
 
 </script>
@@ -693,4 +771,5 @@ defineExpose({
 .vue3-easy-data-table__main.fixed-height {
   height: v-bind(tableHeightPx);
 }
+
 </style>

src/hooks/useHoverRow.ts

@@ -0,0 +1,20 @@
+import { Ref, ComputedRef } from 'vue';
+import type { Item } from '../types/main';
+import type { EmitsEventName, ClickEventType } from '../types/internal';
+
+export default function useHoverRow(
+  showIndex: Ref<boolean>,
+  emits: (event: EmitsEventName, ...args: any[]) => void,
+) {
+  const hoverRow = (item: Item, $event: Event) => {
+    const hoverRowArgument = { ...item };
+      const { index } = item;
+      delete hoverRowArgument.index;
+      hoverRowArgument.indexInCurrentPage = index;
+    emits('hoverRow', hoverRowArgument, $event);
+  };
+
+  return {
+    hoverRow,
+  };
+}

src/hooks/useHoverRowElement.ts

@@ -0,0 +1,32 @@
+import { ref, Ref, ComputedRef } from 'vue';
+import type { Item } from '../types/main';
+import type { EmitsEventName } from '../types/internal';
+
+export default function useHoverRowElement(
+  items: Ref<Item[]>,
+  prevPageEndIndex: ComputedRef<number>,
+  emits: (event: EmitsEventName, ...args: any[]) => void,
+) {
+  const hoverRowIndex = ref<number>();
+
+  const updateHoverRowIndex = (index: number, hoverItem: Item, event: Event) => {
+    event.stopPropagation();
+    if (index !== -1) {
+      hoverRowIndex.value = index;
+    } else {
+      const currentPageExpandIndex = items.value.findIndex((item) => JSON.stringify(item) === JSON.stringify(hoverItem));
+      emits('showHoverElement', prevPageEndIndex.value + currentPageExpandIndex, hoverItem);
+      hoverRowIndex.value = prevPageEndIndex.value + currentPageExpandIndex;
+    }
+  };
+
+  const clearHoverRowIndex = () => {
+    hoverRowIndex.value = undefined;
+  };
+
+  return {
+    hoverRowIndex,
+    updateHoverRowIndex,
+    clearHoverRowIndex,
+  };
+}

src/modes/Client.vue

@@ -12,7 +12,7 @@
     <DataTable
       table-node-id="my-table"
       v-model:items-selected="itemsSelected"
-      click-row-to-expand
+      hover-row-to-show-element
       ref="dataTable"
       alternating
       border-cell
@@ -70,6 +70,12 @@
         </div>
       </template>
 
+      <template #hover="item">
+        <div style="padding: 10px 0px 0px 15px;">
+          This might show menu options or something for {{ item.name }}...
+        </div>
+      </template>
+
       <template #header-name="header">
         <div class="filter-column">
           <span

src/propsWithDefault.ts

@@ -187,6 +187,10 @@ export default {
     type: Boolean,
     default: false,
   },
+  hoverRowToShowElement: {
+    type: Boolean,
+    default: false,
+  },
   tableNodeId: {
     type: String,
     default: '',

src/scss/vue3-easy-data-table.scss

@@ -258,6 +258,43 @@ table {
   cursor: pointer;
 }
 
+// hover row feature related
+.hover-row {
+  height: 0 !important;
+  padding: 0;
+
+  td {
+    height: 0;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    border: none;
+
+    div {
+      position: absolute;
+      right: 0px;
+      z-index: 10;
+      background-color: inherit;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -80px;
+        bottom: 0;
+        width: 90px;
+        background: linear-gradient(to right, transparent, var(--easy-table-body-row-background-color))
+      }
+    }
+
+    div.even-row {
+      &::before {
+        background: linear-gradient(to right, transparent, var(--easy-table-body-even-row-background-color))
+      }
+    }
+  }
+}
+
 .vue3-easy-data-table__footer {
   background-color: var(--easy-table-footer-background-color);
   color: var(--easy-table-footer-font-color);

src/types/internal.d.ts

@@ -26,4 +26,4 @@ export type ClickEventType = 'single' | 'double'
 export type MultipleSelectStatus = 'allSelected' | 'noneSelected' | 'partSelected'
 
 // eslint-disable-next-line max-len
-export type EmitsEventName = 'clickRow' | 'selectRow' | 'deselectRow' | 'expandRow' | 'updateSort' | 'update:itemsSelected' | 'update:serverOptions' | 'updateFilter' | 'updatePageItems' | 'updateTotalItems' | 'selectAll'
+export type EmitsEventName = 'clickRow' | 'hoverRow' | 'selectRow' | 'deselectRow' | 'expandRow' | 'showHoverElement' | 'updateSort' | 'update:itemsSelected' | 'update:serverOptions' | 'updateFilter' | 'updatePageItems' | 'updateTotalItems' | 'selectAll'