NuxtUI / Utable component : question about nested data and slot customization

I'm trying to create a Utable with data fetched from an api, but its return object is a json with nested data that i need to display on the table, for example

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

const defaultColumns = [{
        key: 'vin',
        label: 'VIN',
        sortable: true
    }, {
        key: 'first.secondLayer.start_date',
        label: 'Date de début de suivi',
        sortable: true
    }, {
        key: 'tenant',
        label: 'Flotte'
    }, {
        key: 'key.current.score',
        label: 'Score'
    }]

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

const defaultColumns = [{
        key: 'vin',
        label: 'VIN',
        sortable: true
    }, {
        key: 'first.secondLayer.start_date',
        label: 'Date de début de suivi',
        sortable: true
    }, {
        key: 'tenant',
        label: 'Flotte'
    }, {
        key: 'key.current.score',
        label: 'Score'
    }]

In the Utable tag i put a template to access the row of the score data, the idea is to change the color of the badge from the score, but nothing happen as the image below

<template #score-data="{ row }">
          <UBadge
            :label="row.status"
            :color="row.status <= 50 ? 'green' : row.status <= 80 ? 'orange' : 'red'"
            variant="subtle"
            class="capitalize"
          />
        </template>

<template #score-data="{ row }">
          <UBadge
            :label="row.status"
            :color="row.status <= 50 ? 'green' : row.status <= 80 ? 'orange' : 'red'"
            variant="subtle"
            class="capitalize"
          />
        </template>

My guess is its comes from the nested data because i was able to do the same thing with the first column "vin" that has not the nested data.

I hope it is pretty clear, thanks in advance !

Capture_decran_2024-04-18_a_11.35.02.png

Nuxt•2y ago•

3 replies

thunderbird7756

NuxtUI / Utable component : question about nested data and slot customization

I'm trying to create a Utable with data fetched from an api, but its return object is a json with nested data that i need to display on the table, for example

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

const defaultColumns = [{
        key: 'vin',
        label: 'VIN',
        sortable: true
    }, {
        key: 'first.secondLayer.start_date',
        label: 'Date de début de suivi',
        sortable: true
    }, {
        key: 'tenant',
        label: 'Flotte'
    }, {
        key: 'key.current.score',
        label: 'Score'
    }]

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

const defaultColumns = [{
        key: 'vin',
        label: 'VIN',
        sortable: true
    }, {
        key: 'first.secondLayer.start_date',
        label: 'Date de début de suivi',
        sortable: true
    }, {
        key: 'tenant',
        label: 'Flotte'
    }, {
        key: 'key.current.score',
        label: 'Score'
    }]

In the Utable tag i put a template to access the row of the score data, the idea is to change the color of the badge from the score, but nothing happen as the image below

<template #score-data="{ row }">
          <UBadge
            :label="row.status"
            :color="row.status <= 50 ? 'green' : row.status <= 80 ? 'orange' : 'red'"
            variant="subtle"
            class="capitalize"
          />
        </template>

<template #score-data="{ row }">
          <UBadge
            :label="row.status"
            :color="row.status <= 50 ? 'green' : row.status <= 80 ? 'orange' : 'red'"
            variant="subtle"
            class="capitalize"
          />
        </template>

My guess is its comes from the nested data because i was able to do the same thing with the first column "vin" that has not the nested data.

I hope it is pretty clear, thanks in advance !

NuxtUI / Utable component : question about nested data and slot customization

Similar Threads

NuxtUI / Utable component : question about nested data and slot customization

Similar Threads

Similar Threads

Similar Threads