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
– rufus05, Commented May 15, 2020 at 16:11

Hiws · Accepted Answer · 2020-05-15 17:44:19Z

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>

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?

Collectives™ on Stack Overflow

Formatter column - Bootstrap-vue - VueJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related