CODEWITHSUNDEEP
vue.jsformat
Decrux
Decrux

Reputation: 207

Format output row data in Vue Good Table

I've built a Vue.js component. I have a vue-good-table, where it fetches data from the server. I need to format the output data. Now the data comes with numbers. For example: it's show number 1 as a value. Instead of "1" it has to be ITEM1, for 2 - ITEM2 and so on.

<vue-good-table
  :columns="columns"
  :rows="formattedItems"
  :paginate="true"
  :lineNumbers="true">
</vue-good-table>

<script type="text/javascript">
  import config from '../main.js'
  import moment from 'moment'

  export default {

    components: {

    },

    data(){
      return {
        items: [],
        columns: [
          {
            label: 'Number',
            field: 'number',
            type: 'String',
            filterable: true,
            placeholder: 'Number'
          },
          {
            label: 'Name',
            field: 'name',
            type: 'String',
            filterable: true,
            placeholder: 'Name'
          },
          {
            label: 'Validity Date',
            field: 'validitydate',
            type: 'String',
            filterable: true,
            placeholder: 'dd/mm/yyyy'
          },
          {
            label: 'Authority',
            field: 'authority',
            type: 'String',
            filterable: true,
            placeholder: 'Authority'
          },
          {
            label: 'Status',
            field: 'status',
            type: 'String',
            filterable: true,
            placeholder: 'Status'
          },
          {
            label: 'Structure',
            field: 'structure',
            type: 'String',
            filterable: true,
            placeholder: 'Structure'
          },
          {
            label: 'Type',
            field: 'type',
            type: 'String',
            filterable: true,
            placeholder: 'Type'
          },
          {
            label: 'National',
            field: 'isnational',
            type: 'String',
            filterable: true,
            placeholder: 'National'
          },
        ],

        json_meta: [
          [{
            "key": "charset",
            "value": "utf-8"
          }]
        ]
      }
    },

    methods: {

    computed: {
      formattedItems () {
        if (!this.items || this.items.length === 0) return []
        return this.items.map(item => {
            return {
              ...item,
            validitydate: item.validitydate === null ? null : 
              moment(item.validitydate).format('DD/MM/YYYY')
      }
      })
      }
    }

  }
</script>

I need to do it for columns Authority, Status, Structure, Type and National. For Authority: 1 - ITEM1, 2 - ITEM2, 3 - ITEM3 For Status: 1 - Status1, 2 - Status2, 3 - Status3 And so on.

Update: I was wondering for using Map as a way to make it. However, I am not very sure how.

Upvotes: 1

Views: 3653

Answers (1)

xaksis
xaksis

Reputation: 458

vue-good-table supports a column proprty called formatFn where you can format the data before it shows up on the column. 

// in your columns
{
  label: 'Authority',
  field: 'authority',
  type: 'String',
  filterable: true,
  placeholder: 'Authority',
  formatFn: this.formatAuthority,
}

// in your methods
methods: {
  formatAuthority(value) {
    return `ITEM ${value}`;
  }
}

you can see the documentation here: https://xaksis.github.io/vue-good-table/guide/configuration/column-options.html#formatfn

Upvotes: 1

Related Questions