[Vuejs]-Custom columns in BootstrapVue table

by

0👍

You need to use the fields prop, and supply an array of field objects you want to display.
The key will determine which property from your object it gets the data from, and the label will be what is displayed in the header.
You can also add virtual fields here, with a key that doesn’t exist in your object.
You can then use slots to display some custom data in that column.

Here’s some reference from the docs if you need more info.

Fields ref: https://bootstrap-vue.org/docs/components/table#fields-column-definitions

Custom data: https://bootstrap-vue.org/docs/components/table#custom-data-rendering

new Vue({
  el: "#app",
  data() {
    return {
      items: [{
          id: 1,
          name: "Test 1",
          phone: "111-222-333",
          address: "Some address"
        },
        {
          id: 2,
          name: "Test 2",
          phone: "444-555-666",
          address: "Another address"
        },
        {
          id: 3,
          name: "Test 3",
          phone: "777-888-999",
          address: "Questionable address"
        }
      ],
      fields: [{
          key: "name",
          label: "Full Name"
        },
        {
          key: "address",
          label: "User Address"
        },
        {
          key: "custom_column",
          label: "Custom Column"
        }
      ]
    };
  }
});
<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@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue-icons.js"></script>

<div id="app">
  <b-table :items="items" :fields="fields">
    <template #cell(custom_column)>
      <b-icon icon="question-circle"></b-icon>
    </template>
  </b-table>
</div>

Leave a comment