Formatter column - Bootstrap-vue - VueJS

Question

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:

Expected result:

@Dcoder currently Currently the values of the "From" and "To" columns are being displayed through the code according to the "items" list, however I would like to format them according to the "dataBackend" list so that the description is show and not show the code. — rufus05, May 15 '20 at 16:11

Hiws · Accepted Answer · 2020-05-15T17:44:19.637

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/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.14.0/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/bootstrap-vue@2.14.0/dist/bootstrap-vue.js"></script>


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

If any of the lines I am formatting do not have a dataBackend value, is it possible then to return the original value on those lines? — rufus05, May 15 '20 at 17:40

Formatter column - Bootstrap-vue - VueJS

1 Answers1