N
Nuxt5mo 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" />
<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",
},
];
<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"
/>
<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 !
No description
1 Reply
numbani
numbani5mo ago
i did something like this for my project, in my case i added two buttons in the same row, like the toggle in your pic,
<UTable :columns="columns" :rows="services" class="card rounded-md w-1/2">
<template #actions-data="{ row }">
<UButton color="gray" variant="ghost" icon="i-heroicons-trash-20-solid" />
<UButton
color="gray"
variant="ghost"
icon="i-heroicons-pencil-square-20-solid"
/>
</template>
</UTable>
<UTable :columns="columns" :rows="services" class="card rounded-md w-1/2">
<template #actions-data="{ row }">
<UButton color="gray" variant="ghost" icon="i-heroicons-trash-20-solid" />
<UButton
color="gray"
variant="ghost"
icon="i-heroicons-pencil-square-20-solid"
/>
</template>
</UTable>
Want results from more Discord servers?
Add your server