Hello
I did added hover effect on my table but Is there a api or snippet to make each row clickable?
I found this api item-selectable but is not what I am looking for
anyone have any ideas here?
We cannot guess your code and setup, can you give an example what you currently have ?
Are you using a template node or a table node, if table - there is an 'interaction' option that you can set to 'click'
Here it go
<template>
<v-data-table :items="items" hover>
<template v-slot:header.id="{ column }">
{{ column.title.toUpperCase() }}
</template>
</v-data-table>
</template>
<script>
export default {
data: () => ({
items: [
{
id: 1,
name: 'T-Shirt',
size: 'M',
color: 'Red',
price: 19.99,
quantity: 10,
},
{
id: 2,
name: 'Jeans',
size: '32',
color: 'Blue',
price: 49.99,
quantity: 5,
},
{
id: 3,
name: 'Sweater',
size: 'L',
color: 'Green',
price: 29.99,
quantity: 7,
},
{
id: 4,
name: 'Jacket',
size: 'XL',
color: 'Black',
price: 89.99,
quantity: 3,
},
{
id: 5,
name: 'Socks',
size: 'One Size',
color: 'White',
price: 9.99,
quantity: 20,
},
],
}),
}
</script>
Hi @xlameee
We see you used a v-slot in the v-data-table to have more control over the column's headers.
The same way, you can use a v-slot:item for a row. (link)
<template>
<v-data-table :items="items" hover>
<template v-slot:header.id="{ column }">
{{ column.title.toUpperCase() }}
</template>
<template v-slot:item="{ item }">
<tr @click="send({payload: item})">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.size }}</td>
<td>{{ item.color }}</td>
<td>{{ item.price }}</td>
<td>{{ item.quantity }}</td>
</tr>
</template>
</v-data-table>
</template>
<script>
export default {
data: () => ({
items: [
{
id: 1,
name: 'T-Shirt',
size: 'M',
color: 'Red',
price: 19.99,
quantity: 10,
},
{
id: 2,
name: 'Jeans',
size: '32',
color: 'Blue',
price: 49.99,
quantity: 5,
},
{
id: 3,
name: 'Sweater',
size: 'L',
color: 'Green',
price: 29.99,
quantity: 7,
},
{
id: 4,
name: 'Jacket',
size: 'XL',
color: 'Black',
price: 89.99,
quantity: 3,
},
{
id: 5,
name: 'Socks',
size: 'One Size',
color: 'White',
price: 9.99,
quantity: 20,
},
],
}),
}
</script>
<style scoped>
tr {
cursor: pointer;
}
tr:active {
background-color: gray;
}
</style>
Once you have that, you can add a @click event on the row and send whatever msg you need back to NR.
In the example we send item which is the whole row object.
Test Flow :
[{"id":"5edc779823b5b40a","type":"ui-template","z":"54efb553244c241f","group":"f6ea4c99104aa411","page":"","ui":"","name":"","order":1,"width":0,"height":0,"head":"","format":"<template>\n <v-data-table :items=\"items\" hover>\n <template v-slot:header.id=\"{ column }\">\n {{ column.title.toUpperCase() }}\n </template>\n <template v-slot:item=\"{ item }\">\n <tr @click=\"send({payload: item})\">\n <td>{{ item.id }}</td>\n <td>{{ item.name }}</td>\n <td>{{ item.size }}</td>\n <td>{{ item.color }}</td>\n <td>{{ item.price }}</td>\n <td>{{ item.quantity }}</td>\n </tr>\n </template>\n </v-data-table>\n</template>\n<script>\n export default {\n data: () => ({\n items: [\n {\n id: 1,\n name: 'T-Shirt',\n size: 'M',\n color: 'Red',\n price: 19.99,\n quantity: 10,\n },\n {\n id: 2,\n name: 'Jeans',\n size: '32',\n color: 'Blue',\n price: 49.99,\n quantity: 5,\n },\n {\n id: 3,\n name: 'Sweater',\n size: 'L',\n color: 'Green',\n price: 29.99,\n quantity: 7,\n },\n {\n id: 4,\n name: 'Jacket',\n size: 'XL',\n color: 'Black',\n price: 89.99,\n quantity: 3,\n },\n {\n id: 5,\n name: 'Socks',\n size: 'One Size',\n color: 'White',\n price: 9.99,\n quantity: 20,\n },\n ],\n }),\n }\n</script>\n\n<style scoped>\n tr {\n cursor: pointer;\n }\n\n tr:active { \n background-color: gray;\n } \n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":340,"y":2760,"wires":[["3b1a33cbcde4d9d3"]]},{"id":"3b1a33cbcde4d9d3","type":"debug","z":"54efb553244c241f","name":"debug 6","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":510,"y":2760,"wires":[]},{"id":"f6ea4c99104aa411","type":"ui-group","name":"Group 1","page":"4a170528989768e9","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":true,"disabled":false,"groupType":"default"},{"id":"4a170528989768e9","type":"ui-page","name":"Page 1","ui":"9ce7a747c7611e54","path":"/page1","icon":"home","layout":"grid","theme":"8b76aa29c8af5e06","breakpoints":[{"name":"Default","px":0,"cols":3},{"name":"Tablet","px":576,"cols":6},{"name":"Small Desktop","px":768,"cols":9},{"name":"Desktop","px":1024,"cols":12}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"9ce7a747c7611e54","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"8b76aa29c8af5e06","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
2 Likes
This is what I was looking for thank you
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
