Buefy - Show array results as separated tags in table

Question

I'm retrieving a data set that has a few fields as a list included. The results need to be shown in a Buefy table (https://buefy.org/documentation/table) and I would like to show the list items as separate tags (https://buefy.org/documentation/tag/) in the table cell.

The code below simulates the issue. The result of this is showing the data in the second column as plain text Value1,Value2,Value3.

Not only does this look bad, but because there are no spaces between the values, it makes the table too wide for the screen and other columns are not visible anymore because of it.

I would like it to look something like this in the List cell:

The code to reproduce:

<template>
    <b-table :data="data" :columns="columns"></b-table>
</template>

<script>
    export default {
        data() {
            return {
                data: [
                    { 'id': 1, 'list': ["Value1","Value2","Value3"] },
                    { 'id': 2, 'list': ["Value1","Value2","Value3"] },
                    { 'id': 3, 'list': ["Value1","Value2","Value3"] }
                ],
                columns: [
                    {
                        field: 'id',
                        label: 'ID',
                    },
                    {
                        field: 'list',
                        label: 'List',
                    }
                ]
            }
        }
    }
</script>

Answer 1

Try out the following custom rendering and add the class helper mr-2 to make space between tags :

  <b-table :data="data">
    <b-table-column field="id" label="ID" centered v-slot="props">
      {{props.row.id}}
    </b-table-column>
    <b-table-column field="list" label="List" centered v-slot="props">
      <span v-for="item in props.row.list" class="tag mr-2">
        {{item}}
      </span>
    </b-table-column>
  </b-table>

Live demo