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.



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



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