Add columns to datatable in code

テクニカル諏訪子

I use Axios to get database data, but I want to create columns based on received data.
Only initialised columns get added, not the data-based columns.

Example:

Vue.axios.get(process.env.API_SERV + '/api/getcustomer/' + this.id).then(data => {
  data.data.map(cb => {
    cb.map(x => {
      if (x === 'kaishain') {
        this.columns.push({
          label: '会社員',
          field: 'kaishain',
          width: '140px',
          filter: true,
          sort: true,
          type: 'string'
        })
      }
      if (x === 'okyakusama') {
        this.columns.push({
          label: 'お客様',
          field: 'okyakusama',
          width: '140px',
          filter: true,
          sort: true,
          type: 'string'
        })
      }
    })
  })
})

Advice is appreciated.

mesqueeb

Dear @テクニカル諏訪子
What do you mean with “Only initialised columns get added, not the data-based columns.”

(I’m actually from Japan, maybe you can try asking in Japanese, I’ll try to help)

テクニカル諏訪子

I mean columns in “data”.

Example:

data: function () {
  return {
    ...
   columns: [
      {
        label: '氏名',
        field: 'shimei',
        width: '140px',
        filter: true,
        sort: true,
        type: 'string'
      },
      {
        label: '性別',
        field: 'seibetsu',
        width: '140px',
        filter: true,
        sort: true,
        type: 'string'
      },
      {
        label: '誕生日',
        field: 'tanjoubi',
        width: '140px',
        filter: true,
        sort: true,
        type: 'string'
      }
    ]
  }
}

Then I get a table with all full name, gender, and birthday, but no employee and customer.

(I will proceed in English, so more people can support.)

benoitranque

You want to add columns dynamically?

I remember someone had a similar issue. If I’m not mistaken, the columns do get added, they just are not selected to display by default. You can access the inner state of data-table to add them, I’'m not sure if removing he ability to select what columns are displayed also fixes the issue.