CODEWITHSUNDEEP
vue.jsbootstrap-vue
rufus05
rufus05

Reputation: 43

Formatter column - Bootstrap-vue - VueJS

I need to apply a formatter to the from and to column, so that they are recognized as the value shown in the table, their description and not their code.

<b-table id="my-table" hover striped small outlined :items="items" :fields="fields" class="mt-0 mb-0">
    <template slot="actions" slot-scope="data">
        <b-button variant="info" @click="viewMessage(data.item)" class="mr-2" size="sm">
            <i class="fa fa-envelope-open"> View</i>
        </b-button>
    </template>
</b-table>

items: [
    { date: '01/01/2008', from: '1', to: '2', city: 'Paris' },
    { date: '06/03/2018', from: '3', to: '1', city: 'New York' },
    { date: '05/06/2012', from: '3', to: '2', city: 'Tokyo' },
    { date: '07/08/2019', from: '2', to: '3', city: 'Paris' }
]

fields: [
    { key: 'date', label: 'Date', sortable: true },
    { key: 'from', label: 'From', sortable: true },
    { key: 'to', label: 'To', sortable: true },
    { key: 'city', label: 'City', sortable: true },
}

dataBackend = [
    0 = { code: 1, description: 'Joel' },
    1 = { code: 2, description: 'Maria' },
    2 = { code: 3, description: 'Lucas' }
]

Current:

enter image description here

Expected result:

enter image description here

Upvotes: 0

Views: 3962

Answers (1)

Hiws
Hiws

Reputation: 10324

You can use the formatter function on your two fields to achieve this.

The formatter will be run on each row and receives the value of the cell, in this case the code. That you can then use to find the object in your backend data you want, and return the description.

More info about the formatter can be found under the field definition reference on the Bootstrap-Vue documentation.

https://bootstrap-vue.org/docs/components/table#field-definition-reference

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        { date: '01/01/2008', from: '1', to: '2', city: 'Paris' },
        { date: '06/03/2018', from: '3', to: '1', city: 'New York' },
        { date: '05/06/2012', from: '3', to: '2', city: 'Tokyo' },
        { date: '07/08/2019', from: '2', to: '3', city: 'Paris' },
        { date: '07/08/2019', from: '2', to: '4', city: 'Copenhagen' }
      ],
      fields: [
        { key: 'date', label: 'Date', sortable: true },
        { key: 'from', label: 'From', sortable: true, formatter: 'getDescription'},
        { key: 'to', label: 'To', sortable: true, formatter: 'getDescription'},
        { key: 'city', label: 'City', sortable: true }
      ],
      dataBackend: [
        { code: 1, description: 'Joel' },
        { code: 2, description: 'Maria' },
        { code: 3, description: 'Lucas' }
      ]
    }
  },
  methods: {
    getDescription(code) {
      const data = this.dataBackend.find(data => data.code == code)
      return data ? data.description : code;
    }
  }
})
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-table hover striped small outlined :items="items" :fields="fields">
  </b-table>
</div>

Upvotes: 3

Related Questions