[Vuejs]-Add percentage sign to column of numbers in bootstrap-vue table

by

1👍

✅

If you can directly modify your data, you can simply use Array.prototype.map:

export default {
  data() {
    return {
      items: [
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { age: 38, first_name: 'Jami', last_name: 'Carney' }
      ].map(item => (
        item.age = item.age + "%",
        item
      )),
    }
  }
}
👤code

2👍

The straightforward implementation is to use the formatted callback function provided in BootstrapVue to add the percentage sign. Next, set the field property sortByFormatted to false so that sorting is done according to the unformatted original number values.

Relevant documentation links;
https://bootstrap-vue.org/docs/components/table#formatter-callback
https://bootstrap-vue.org/docs/components/table#field-definition-reference

Here’s the code change needed;

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // Note 'isActive' is left out and will not appear in the rendered table
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true,
            // Variant applies to the whole column, including the header and footer
            variant: 'danger',
            //Code modification needed. Add the 2 properties below;
            "sortByFormatted": false,
            formatter: value => {
                return (value + '%')
            },          
          }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>
👤guagay_wk

Leave a comment