Nuxt•5mo ago

Links in Nuxt UI table

As per the title, I want to add something like an href individually, for every row. IS something like that possible?

1 Reply

tobi•5mo ago

yes, you can use the column-data slots available (see https://ui.nuxt.com/components/table#column-data) e.g. something like this:

<script setup lang="ts">
  const columns = [{ key: "link", label: "Link", ... }];
  [ ... ]
</script>

<template>
  <UTable :rows="data" :columns="columns">
    <template #link-data="{ row }">
      <ULink :to="row.link">Link</ULink>
    </template>
  </UTable>
</template>

<script setup lang="ts">
  const columns = [{ key: "link", label: "Link", ... }];
  [ ... ]
</script>

<template>
  <UTable :rows="data" :columns="columns">
    <template #link-data="{ row }">
      <ULink :to="row.link">Link</ULink>
    </template>
  </UTable>
</template>

Nuxt UI

Table - Nuxt UI

Display data in a table.

Gaming

Programming

Links in Nuxt UI table