Vuejs – Primevue – Display the property of an array of object in a Datatable Column

I’m new to Primevue, Here is my code :

Vue File

    <!-- users here is an array of User object -->
    <DataTable :value="users" :rows="10" :paginator="true">
      <Column field="username" header="Username" :sortable="true"></Column>
      <Column field="email" header="Email" :sortable="true"></Column>
      <Column field="role.name" header="Role" :sortable="true"></Column>
      <Column field="cars" header="Cars" :sortable="true">
      </Column>
    </DataTable>

Here is what is inside a user object :

    User {
      username: 'test',
      email: 'test@junk.com',
      id: 1,
      role: {
        id: 1,
        name: 'Admin',
        description: 'Admin user',
      },
      cars: [ [Object], [Object] ]
    },

Currently cars property contain :

[
  {
    "id": 1,
    "title": "Subaru BRZ"
  },
  {
     "id": 2,
     "title": "Lotus Evora GT"
  }
]

It’s a very simple object. My goal is to display the cars title for a user, in the same column and on the same row (field "cars") using Primevue Datatable and Column.

EDIT

Solution

Here is the Datatable modified :

<DataTable :value="users" :rows="10" :paginator="true">
      <Column field="username" header="Username" :sortable="true"></Column>
      <Column field="email" header="Email" :sortable="true"></Column>
      <Column field="role.name" header="Role" :sortable="true"></Column>
      <Column field="cars" header="Cars" :sortable="true">
          <template #body="slotProps">
            <span v-for="car in slotProps.data.cars">{{car.title}}</span>
          </template>
      </Column>
    </DataTable>

>Solution :

How about using the <template> inside <Column> component? 🙂

Seems there is a nice explanation in the docs: https://www.primefaces.org/primevue/datatable (look at the Templating section. Sorry there is no way to post the direct link)

Hope it will help.