Nuxt•8mo ago

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 !

3 Replies

Nook•8mo ago

Hi ! Actually the key property is only able to reach the first level of the object. You can use it like this instead:

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

const defaultColumns = [{
        key: 'vin',
        label: 'VIN',
        sortable: true
    }, {
        // Name it according to your needs
        key: 'first.secondLayer.start_date',
        label: 'Date de début de suivi',
        sortable: true
    }, {
        key: 'tenant',
        label: 'Flotte'
    }, {
        key: 'score', // just use score key
        label: 'Score'
    }]

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

const defaultColumns = [{
        key: 'vin',
        label: 'VIN',
        sortable: true
    }, {
        // Name it according to your needs
        key: 'first.secondLayer.start_date',
        label: 'Date de début de suivi',
        sortable: true
    }, {
        key: 'tenant',
        label: 'Flotte'
    }, {
        key: 'score', // just use score key
        label: 'Score'
    }]

I'm not sure my code will exactly suit your needs, but if you can show what a row looks like I could help further

thunderbird7756OP•8mo ago

Okay, thanks for the answer but the problem in this case is that the "score" key is in a nested object like this

{
    "last_scan": "2024-04-18T12:23:05.206Z",
    "current_configuration": null,
    "current_scam": {
        "scam_uuid": "00000000-0000-0000-0000-000000000000",
        "detected_at": "0001-01-01T00:00:00Z",
        "state": {
            "step": "",
            "date": "0001-01-01T00:00:00Z"
        },
        "score": 0
    }
}

{
    "last_scan": "2024-04-18T12:23:05.206Z",
    "current_configuration": null,
    "current_scam": {
        "scam_uuid": "00000000-0000-0000-0000-000000000000",
        "detected_at": "0001-01-01T00:00:00Z",
        "state": {
            "step": "",
            "date": "0001-01-01T00:00:00Z"
        },
        "score": 0
    }
}

` In fact, i managed to the score in the table, but the slot use to customize it with a badge is not working But with this code, the template slot is not working as expected, first image is with nested declaration on the template, second is with no badge

Nook•8mo ago

There is no "status" in your data, but this should work

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

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

Gaming

Programming

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