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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.