Nuxt•8mo ago

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 !

1 Reply

numbani•8mo 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>

Gaming

Programming

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