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.