NuxtN
Nuxt•2y ago
Coton

Nuxt ui / UTable component : can we set a value to the column ?

I'm trying to refactor a simple table element including a v-for for <tr> to the UTable component
I have little concerns regarding columns / value https://ui.nuxt.com/components/table#columns

<UTable :rows="rows" :columns="columns" />

<script setup lang="ts">
import type { Product } from "~/types/interfaces";
const { data: products } = await useFetch<Product[]>("/api/products");

const page = ref(1);
const pageCount = ref(7);
const pageTotal = ref(products.value?.length);

const rows = computed(() => {
   products.value?.slice(
    (page.value - 1) * pageCount.value,
    page.value * pageCount.value,
  );
});

const columns = [
  {
    key: "image",
    label: "Image",
  },
  {
    key: "name",
    label: "Produit",
    sortable: true,
  },
  {
    key: "price",
    label: "Prix de vente",
    sortable: true,
  },
  {
    key: "",
    label: "Statut",
  },
  {
    key: "",
    label: "Action",
  },
];

I have two things that I can't resolve, given the fact that we can't pass a "value" but only "key, label..." on columns
1 - How to display the image using Utable ? It displays the src value but I would like to have it in a <img>
On simple <table> I am using
              <img
                v-if="product.image"
                class="max-h-full w-16 max-w-full md:w-32"
                :src="product.image"
                alt="Product image"
              />


2 - How to pass a "custom" value to column ? Like here, Action' I would like to have a dump "Edit" button/link on every row, where I could get the current row product id to custom a modal

I really need to custom rows and add html inside ? If yes its seems possible tu customize rows but not to say to UTable to display rawhtml values if there is

Thanks !
CleanShot_2024-04-07_at_12.25.172x.png
Was this page helpful?