10000 feat: CDataTable row-clicked event modification #59 · coreui/coreui-vue@2a89938 · GitHub
[go: up one dir, main page]
Skip to content

Commit 2a89938

Browse files
woothuwoothu
committed
feat: CDataTable row-clicked event modification #59
- add clicked cell column name as a third argument - emit event also on details row click
1 parent b295f71 commit 2a89938

File tree

3 files changed

+77
-10
lines changed

3 files changed

+77
-10
lines changed

‎src/components/table/CDataTable.vue

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,9 @@
9898
>
9999
<template v-for="(item, itemIndex) in currentItems" >
100100
<tr
101+
@click="rowClicked(item, itemIndex + firstItemIndex, $event)"
101102
:class="item._classes"
102103
:tabindex="clickableRows ? 0 : null"
103-
@click="rowClicked(item, itemIndex + firstItemIndex)"
104104
:key="itemIndex"
105105
>
106106
<template v-for="(colName, index) in rawColumnNames" >
@@ -121,6 +121,7 @@
121121
</tr>
122122
<tr
123123
v-if="$scopedSlots.details"
124+
@click="rowClicked(item, itemIndex + firstItemIndex)"
124125
class="p-0"
125126
style="border:none !important"
126127
:key="'details' + itemIndex"
@@ -503,8 +504,17 @@ export default {
503504
}
504505
return style
505506
},
506-
rowClicked (item, index) {
507-
this.$emit('row-clicked', item, index)
507+
rowClicked (item, index, e) {
508+
this.$emit('row-clicked', item, index, this.getClickedColumnName(e))
509+
},
510+
getClickedColumnName (e) {
511+
if (e) {
512+
const children = Array.from(e.target.closest('tr').children)
513+
const clickedCell = children.filter(child => child.contains(e.target))[0]
514+
return this.rawColumnNames[children.indexOf(clickedCell)]
515+
} else {
516+
return 'details'
517+
}
508518
},
509519
getIconState (index) {
510520
const direction = this.sorterState.asc ? 'asc' : 'desc'

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ function createCustomWrapper () {
4747
sorterValue: { column: 'username', asc: false },
4848
columnFilterValue: { registered: '2', 'non_existing': 'smh' },
4949
pagination: true
50+
},
51+
slots: {
52+
details: '<div class="details">Details slot</div>'
5053
}
5154
})
5255
}
@@ -90,9 +93,11 @@ describe(ComponentName, () => {
9093
customWrapper.findAll('option').at(2).setSelected()
9194
expect(customWrapper.emitted()['pagination-change'][0][0]).toBe(10)
9295
})
93-
it('emits event when row is clicked', () => {
94-
customWrapper.find('tbody').find('tr').trigger('click')
95-
expect(customWrapper.emitted()['row-clicked']).toBeTruthy()
96+
it('emits correct event when row is clicked', () => {
97+
customWrapper.find('tbody').find('td').trigger('click')
98+
expect(customWrapper.emitted()['row-clicked'][0][2]).toBe('username')
99+
customWrapper.find('.details').trigger('click')
100+
expect(customWrapper.emitted()['row-clicked'][1][2]).toBe('details')
96101
})
97102
it('correctly triggers items update', () => {
98103
const localWrapper = createCustomWrapper()

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

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,20 @@ exports[`CDataTable renders correctly 2`] = `
329329
</td>
330330
</tr>
331331
332-
<!---->
332+
<tr
333+
class="p-0"
334+
>
335+
<td
336+
class="p-0"
337+
colspan="5"
338+
>
339+
<div
340+
class="details"
341+
>
342+
Details slot
343+
</div>
344+
</td>
345+
</tr>
333346
<tr>
334347
<td
335348
class="user-custom-class"
@@ -368,7 +381,20 @@ exports[`CDataTable renders correctly 2`] = `
368381
</td>
369382
</tr>
370383
371-
<!---->
384+
<tr
385+
class="p-0"
386+
>
387+
<td
388+
class="p-0"
389+
colspan="5"
390+
>
391+
<div
392+
class="details"
393+
>
394+
Details slot
395+
</div>
396+
</td>
397+
</tr>
372398
<tr>
373399
<td
374400
class="user-custom-class"
@@ -407,7 +433,20 @@ exports[`CDataTable renders correctly 2`] = `
407433
</td>
408434
</tr>
409435
410-
<!---->
436+
<tr
437+
class="p-0"
438+
>
439+
<td
440+
class="p-0"
441+
colspan="5"
442+
>
443+
<div
444+
class="details"
445+
>
446+
Details slot
447+
</div>
448+
</td>
449+
</tr>
411450
<tr>
412451
<td
413452
class="user-custom-class"
@@ -446,7 +485,20 @@ exports[`CDataTable renders correctly 2`] = `
446485
</td>
447486
</tr>
448487
449-
<!---->
488+
<tr
489+
class="p-0"
490+
>
491+
<td
492+
class="p-0"
493+
colspan="5"
494+
>
495+
<div
496+
class="details"
497+
>
498+
Details slot
499+
</div>
500+
</td>
501+
</tr>
450502
451503
<!---->
452504
</tbody>

0 commit comments

Comments
 (0)
0