Data table with clickable row and hover

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.