[Vuejs]-How to render a line break ↵ in table – Vuejs?

by

1👍

✅

You can use this solution while iterating over the elements of items in a computed property, and add white-space: pre-line; styling to the b-table to preserve the new lines:

new Vue({
  el:"#app",
  data() {
    return {
      fields: ["first_name", "last_name", "age", "hobbies"],
      items: [
        { isActive: true, age: 40, first_name: "Charles", last_name: "Macdonald", hobbies: "Reading↵ Singing" },
        { isActive: false, age: 21, first_name: "Larsen", last_name: "Shaw", hobbies: "Surfing↵ Stamp Collecting↵ Games" }
      ]
    }
  },
  computed: {
    myItems: function() {
      // iterate over items
      return this.items.map(item => {
        // copy current item
        const current = Object.assign({}, item);
        // iterate over item keys
        Object.keys(current).forEach(key => {
          // if value of this key is a string, replace
          if(typeof current[key] === 'string')
            current[key] = current[key].replace(/↵/g, '\n');
        });
        return current;
      });
    }
  }
});
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table striped hover :items="myItems" :fields="fields" style="white-space: pre-line;"></b-table>
</div>

1👍

Simply use CSS

<style>
.table tbody tr td {
  white-space: pre-wrap
}
</style>

enter image description here

also, you need to use the computed prop, :items="myItems"

If you don’t like the centering, then again use CSS with text-align:left, on both the header and the content.

<style>
.table thead tr th {
  text-align:left
}
.table tbody tr td {
  white-space: pre-wrap;
  text-align:left
}
</style>

Leave a comment