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:

`<script setup lang="ts">
import { cta, generalUI } from '../../i18n/en-us.json'

const route = useRoute();

// Use t
const { t } = useI18n()

// To prefix the link with the locale
const localePath = useLocalePath();

// Fetch data from the Events and sort it by newest at the top
const { data } = await useAsyncData('article', () =>
queryContent('/careers')
.sort({ date: -1 }) // Sort by date in descending order (newest to oldest)
.find()
);

// Detect chosen language
const { locale } = useI18n()

// Initialize date variable
let dateLocale = locale.value;

// Append the country to the locale because Intl.DateTimeFormat expects it.
// Example, 'en' becomes 'en-US', 'mx' becomes 'es-MX'; 'fr' becomes 'fr-FR'
if (locale.value === "en") {
dateLocale = 'en-US';
}

if (locale.value === "fr") {
dateLocale = 'fr-FR';
}

if (locale.value === "mx") {
dateLocale = 'es-MX'; // Corrected from 'dateLocale'
}

//Format date. Example: Feb 3, 2025
const formatDate = (dateString: string | number | Date) => {
const date = new Date(dateString);
return date.toLocaleDateString(dateLocale, {
year: "numeric",
month: "short",
day: "numeric",
hour: "numeric",
minute: "numeric",
hour12: true,
});
};

// Use blog layout
definePageMeta({
layout: 'blog'
})

// Table

const columns = [
{
key: 'title',
label: 'Position'
},
{
key: 'delivery',
label: 'Delivery'
},
{
key: 'language',
label: 'Language of Instruction'
},
{
key: 'area',
label: 'Area'
},
]

// Listen to a row click and open the website
function select(row) {
// Check if the selected row has a website property
if (row && row._path) {
// Open the URL in a new window
window.open(localePath(row._path),); // Add '_blank' to open on a new window
}
}

// Selects rows in table
const selected = ref([data]);

</script>

<UTable :columns="columns" :rows="data" @select="select" class="mt-32"/>

<Title> VANAS | {{ $t('generalUI.footerCareers') }} </Title> <style scoped> </style>

`

[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