CODEWITHSUNDEEP
javascriptarraystwitter-bootstrapvue.js
ARNON
ARNON

Reputation: 1217

How to break row inside a Bootstrap table?

I'm trying to make a .join() on an array that is inside a table. The expected result is that each car (in the example below) is on one row.

I've tried using .join("\r\n") and .join("<br />"), but it doesn't work. What am I missing?

new Vue({
  el: "#table",
  data() {
    return {
      items: [
        { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] },
        { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] },
        { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] },
        { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] }
      ],
      fields: [
        { key: "firstname", label: "First name" },
        { key: "lastname", label: "Last name" },
        { key: "cars", label: "Cars" }
      ]
    };
  },
  methods: {
    join() {
      for (let item of this.items) {
        item.cars = item.cars.join("<br />")
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="table">
  <b-button @click="join">Join Array</b-button>
  <b-table :fields="fields" :items="items" />
</div>

Same snippet above but on CodePen.

Upvotes: 1

Views: 656

Answers (2)

GenericUser
GenericUser

Reputation: 3230

The issue you are seeing is that the content is not being interpreted so it appears as text. To adjust for this, use the cell(key) slot. Then within the slot, use v-html to interpret the string as html.

new Vue({
  el: "#table",
  data() {
    return {
      items: [
        { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] },
        { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] },
        { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] },
        { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] }
      ],
      fields: [
        { key: "firstname", label: "First name" },
        { key: "lastname", label: "Last name" },
        { key: "cars", label: "Cars" }
      ]
    };
  },
  methods: {
    join() {
      for (let item of this.items) {
        item.cars = item.cars.join("<br />")
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="table">
  <b-button @click="join">Join Array</b-button>
  <b-table :fields="fields" :items="items">
      <template #cell(cars)="data">
        <span v-html="data.value"></span>
      </template>
  </b-table>
</div>

Upvotes: 2

Hiws
Hiws

Reputation: 10324

Assuming you want it to always be on a separate line (and not only after clicking the button in your example), then you can use the slots that <b-table> provides to customize the content of the column, and use a simple v-for to render each element in it's own <div>.

new Vue({
  el: "#table",
  data() {
    return {
      items: [
        { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] },
        { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] },
        { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] },
        { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] }
      ],
      fields: [
        { key: "firstname", label: "First name" },
        { key: "lastname", label: "Last name" },
        { key: "cars", label: "Cars" }
      ]
    };
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="table">
  <b-table :fields="fields" :items="items">
    <template #cell(cars)="{ value }">
      <div v-for="car in value" :key="car">
        {{ car }}
      </div>
    </template>
  </b-table>
</div>

Upvotes: 1

Related Questions