# Data table with clickable row and hover

**URL:** <https://discourse.nodered.org/t/data-table-with-clickable-row-and-hover/94181>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [26 December 2024 15:19 UTC](https://discourse.nodered.org/t/data-table-with-clickable-row-and-hover/94181 "2024-12-26T15:19:43Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [26 December 2024 15:19 UTC](https://discourse.nodered.org/t/data-table-with-clickable-row-and-hover/94181/1 "2024-12-26T15:19:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [29 December 2024 09:21 UTC](https://discourse.nodered.org/t/data-table-with-clickable-row-and-hover/94181/2 "2024-12-29T09:21:47Z")

</div>

anyone have any ideas here?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [29 December 2024 10:12 UTC](https://discourse.nodered.org/t/data-table-with-clickable-row-and-hover/94181/3 "2024-12-29T10:12:02Z")

</div>

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'

---

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [29 December 2024 18:00 UTC](https://discourse.nodered.org/t/data-table-with-clickable-row-and-hover/94181/4 "2024-12-29T18:00:27Z")

</div>

Here it go

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [30 December 2024 08:29 UTC](https://discourse.nodered.org/t/data-table-with-clickable-row-and-hover/94181/5 "2024-12-30T08:29:14Z")

</div>

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](https://vuetifyjs.com/en/components/data-tables/basics/#item-slot))

```html
<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 :**

```auto
[{"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"}}]

```

---

<div class="post-metadata">

**Author:** ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)\
**Post date:** [1 January 2025 04:31 UTC](https://discourse.nodered.org/t/data-table-with-clickable-row-and-hover/94181/6 "2025-01-01T04:31:27Z")

</div>

This is what I was looking for thank you

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 January 2025 04:32 UTC](https://discourse.nodered.org/t/data-table-with-clickable-row-and-hover/94181/7 "2025-01-15T04:32:22Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.