feat: CDataTable row-clicked event modification #59

- add clicked cell column name as a third argument
- emit event also on details row click

Author: woothu

src/components/table/CDataTable.vue

@@ -98,9 +98,9 @@
         >
           <template v-for="(item, itemIndex) in currentItems" >
             <tr
+              @click="rowClicked(item, itemIndex + firstItemIndex, $event)"
               :class="item._classes" 
               :tabindex="clickableRows ? 0 : null"
-              @click="rowClicked(item, itemIndex + firstItemIndex)"
               :key="itemIndex"
             >
               <template v-for="(colName, index) in rawColumnNames" >
@@ -121,6 +121,7 @@
             </tr>
             <tr
               v-if="$scopedSlots.details"
+              @click="rowClicked(item, itemIndex + firstItemIndex)"
               class="p-0"
               style="border:none !important"
               :key="'details' + itemIndex"
@@ -503,8 +504,17 @@ export default {
       }
       return style
     },
-    rowClicked (item, index) {
-      this.$emit('row-clicked', item, index)
+    rowClicked (item, index, e) {
+      this.$emit('row-clicked', item, index, this.getClickedColumnName(e))
+    },
+    getClickedColumnName (e) {
+      if (e) {
+        const children = Array.from(e.target.closest('tr').children)
+        const clickedCell = children.filter(child => child.contains(e.target))[0]
+        return this.rawColumnNames[children.indexOf(clickedCell)]
+      } else {
+        return 'details'
+      }
     },
     getIconState (index) {
       const direction = this.sorterState.asc ? 'asc' : 'desc'

src/components/table/tests/CDataTable.spec.js

@@ -47,6 +47,9 @@ function createCustomWrapper () {
       sorterValue: { column: 'username', asc: false },
       columnFilterValue: { registered: '2', 'non_existing': 'smh' },
       pagination: true
+    },
+    slots: {
+      details: '<div class="details">Details slot</div>'
     }
   })
 }
@@ -90,9 +93,11 @@ describe(ComponentName, () => {
     customWrapper.findAll('option').at(2).setSelected()
     expect(customWrapper.emitted()['pagination-change'][0][0]).toBe(10)
   })
-  it('emits event when row is clicked', () => {
-    customWrapper.find('tbody').find('tr').trigger('click')
-    expect(customWrapper.emitted()['row-clicked']).toBeTruthy()
+  it('emits correct event when row is clicked', () => {
+    customWrapper.find('tbody').find('td').trigger('click')
+    expect(customWrapper.emitted()['row-clicked'][0][2]).toBe('username')
+    customWrapper.find('.details').trigger('click')
+    expect(customWrapper.emitted()['row-clicked'][1][2]).toBe('details')
   })
   it('correctly triggers items update', () => {
     const localWrapper = createCustomWrapper()

src/components/table/tests/__snapshots__/CDataTable.spec.js.snap

@@ -329,7 +329,20 @@ exports[`CDataTable renders correctly 2`] = `
           </td>
         </tr>
          
-        <!---->
+        <tr
+          class="p-0"
+        >
+          <td
+            class="p-0"
+            colspan="5"
+          >
+            <div
+              class="details"
+            >
+              Details slot
+            </div>
+          </td>
+        </tr>
         <tr>
           <td
             class="user-custom-class"
@@ -368,7 +381,20 @@ exports[`CDataTable renders correctly 2`] = `
           </td>
         </tr>
          
-        <!---->
+        <tr
+          class="p-0"
+        >
+          <td
+            class="p-0"
+            colspan="5"
+          >
+            <div
+              class="details"
+            >
+              Details slot
+            </div>
+          </td>
+        </tr>
         <tr>
           <td
             class="user-custom-class"
@@ -407,7 +433,20 @@ exports[`CDataTable renders correctly 2`] = `
           </td>
         </tr>
          
-        <!---->
+        <tr
+          class="p-0"
+        >
+          <td
+            class="p-0"
+            colspan="5"
+          >
+            <div
+              class="details"
+            >
+              Details slot
+            </div>
+          </td>
+        </tr>
         <tr>
           <td
             class="user-custom-class"
@@ -446,7 +485,20 @@ exports[`CDataTable renders correctly 2`] = `
           </td>
         </tr>
          
-        <!---->
+        <tr
+          class="p-0"
+        >
+          <td
+            class="p-0"
+            colspan="5"
+          >
+            <div
+              class="details"
+            >
+              Details slot
+            </div>
+          </td>
+        </tr>
          
         <!---->
       </tbody>