Click on table row and redirect URL

[pochat]

Description

Hi all,

I hope you are well.

I am using the table component, and it looks pretty slick. Can I click on a row and open a new link? For example, I have a column with website addresses. I want to click a row and open the website on a new window.

I tried adding the selected prop, but it's only one of the checkboxes. Additionally, I tried a function @click, but the Utable does not take that prop.

Would you have any ideas on how to do this?

Thank you for your time.

Here is my code, and screenshot:

<script setup>
import { StudioDirectory } from '~/staticData/studioDirectory'

const columns = [
  {
  key: 'name',
  label: 'Name',
  sortable: true
  },

  {
  key: 'country',
  label: 'Country',
  sortable: true
  },

  {
  key: 'city',
  label: 'City',
  sortable: true
  },

  {
  key: 'stateProvince',
  label: 'State / Province',
  sortable: true
  },

  {
  key: 'website',
  label: 'Website',
  sortable: true
  },

  {
  key: 'type',
  label: 'Type',
  sortable: true
  }
]

const people = StudioDirectory

const q = ref('')

const filteredRows = computed(() => {
  if (!q.value) {
    return people
  }

  return people.filter((person) => {
    return Object.values(person).some((value) => {
      return String(value).toLowerCase().includes(q.value.toLowerCase())
    })
  })
})

const selected = ref([StudioDirectory[1]])

</script>

<template>
  <div class="mt-32">
    <div class="flex px-3 py-3.5 border-b border-gray-200 dark:border-gray-700">
      <UInput v-model="q" :placeholder="generalUI.search" />
    </div>

    <UTable :rows="filteredRows" :columns="columns" @click="handleRowClick" v-model="selected"/>
  </div>
</template>

[benjamincanac]

Have you tried the @select listener as described at the end of this section? https://ui.nuxt.com/components/table#selectable

[pochat]

Hi @benjamincanac,

Thank you for responding.

I’ll give that a try

thank you!

[moshetanzer]

Hi @pochat,

Supposing your issue was solved? If not please tag me and will be happy to re-open issue 😄 .

[pochat]

I solved it with the answer from @benjamincanac. Thank you!

[mkraha]

Could anyone post solution here please.

[pochat]

Hi @mkraha,

Here is my solution:

`

`

[iamrevolver]

and how to make sure that the middle mouse button can be opened in a new window?

[pochat]

and how to make sure that the middle mouse button can be opened in a new window?

Not sure how to do this with Nuxt UI. Isn't this a mouse or windows setting?

[iamrevolver]

and how to make sure that the middle mouse button can be opened in a new window?

Not sure how to do this with Nuxt UI. Isn't this a mouse or windows setting?

I meant that if it was a link, then it would work on the middle mouse button. It turns out that you need to make the field in the table a link, but how to do this is unclear, using @select you can only process the click, but no more