3. Add columns to datatable in code

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.

    0

  • 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)

    1
  • テ

    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.)

    0

  • 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.

    0