simple way of creating dynamic table - arrays

Question

i have creating table with this way:
first i have my child component that act as the whole table warper
<div class="table-responsive hidden-xs">
<table class="table table-striped" :class="tableClass">
<!-- header -->
<thead class="bg-primary">
<tr class="text-nowrap">
<th v-for="item in columnData" v-if="!item.hide && !item.disable">
<div #click="sort(item.key)" v-if="item.sort" class="cursor-pointer">
<span v-html="item.title"></span>
<span v-if="params.column === item.key">
<span v-if="params.direction === 'asc'"><i class="icon-sort-amount-asc"></i></span>
<span v-else><i class="icon-sort-amount-desc"></i></span>
</span>
<span class="icon-sort text-muted" v-else></span>
</div>
<div v-else>
<span v-html="item.title"></span>
</div>
</th>
</tr>
</thead>
<!-- loading body -->
<tbody v-if="itemDataStat === 'loading'">
<tr>
<td :colspan="columnData.length">
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 100%">
<span class="sr-only">100% Complete</span>
</div>
</div>
</td>
</tr>
</tbody>
<!-- data body -->
<tbody v-for="(items,index) in groupData" v-else-if="itemDataStat === 'success'" #contextmenu.prevent = "$refs.menu.open">
<tr class="active border-double" v-if="group.show">
<td :colspan="columnData.length">
Kelompok {{ group.title }}: <b>{{index}}</b>
</td>
</tr>
<slot name="item-desktop" v-for="(item,index) in items" :item="item" :index="index"></slot>
</tbody>
<!-- error body -->
<tbody v-else-if="itemDataStat === 'fail'">
<tr>
<td :colspan="columnData.length">
Oops.. Terjadi kesalahan, silahkan coba lagi.
</td>
</tr>
</tbody>
</table>
</div>
and from there i just import this table component into my page and just do this
<template slot="item-desktop" slot-scope="props">
<tr :class="{ 'info': selectedItem.id === props.item.id }" class="text-nowrap" #click="selectedRow(props.item)">
<td>
{{ props.index + 1 + (+itemData.current_page-1) * +itemData.per_page + '.'}}
</td>
<td v-if="!columnData[1].hide">
<img :src="'/images/' + kelas + '/' + props.item.picture + 'n.jpg'" class="img-rounded img-responsive img-sm" v-if="props.item.picture">
<img :src="'/images/no_image.jpg'" class="img-rounded img-responsive img-sm" v-else>
</td>
<td v-if="!columnData[2].hide">
<check-value :value="props.item.name"></check-value>
</td>
<td v-if="!columnData[3].hide">
<check-value :value="props.item.price1"></check-value>
</td>
<td v-if="!columnData[4].hide">
<check-value :value="props.item.price2"></check-value>
</td>
<td v-if="!columnData[5].hide">
<check-value :value="props.item.discount"></check-value>
</td>
<td v-if="!columnData[6].hide" v-html="$options.filters.dateTime(props.item.created_at)" class="text-nowrap"></td>
<td v-if="!columnData[7].hide">
<span v-if="props.item.created_at !== props.item.updated_at" v-html="$options.filters.dateTime(props.item.updated_at)"></span>
<span v-else>-</span>
</td>
</tr>
</template>
and what columnData array looked like is
columnData: [
{
title: 'No.',
key: 'No.',
excelType: 'string',
sort: false,
hide: false,
disable: false
},
{
title: 'Image',
key: 'picture',
excelType: 'string',
sort: false,
hide: false,
disable: false
},
{
title: 'Nama',
key: 'name',
excelType: 'string',
sort: true,
hide: false,
disable: false,
filter: true,
filterType: 'string',
},
{
title: 'Seller 1 Price',
key: 'price1',
excelType: 'string',
sort: true,
hide: false,
disable: false
},
{
title: 'Seller 2 Price',
key: 'price2',
excelType: 'string',
sort: true,
hide: false,
disable: false
},
{
title: 'Discount',
key: 'discount',
excelType: 'string',
sort: false,
hide: false,
disable: false
},
{
title: 'Created',
key: 'created_at',
sort: true,
hide: false,
disable: false
},
{
title: 'Updated',
key: 'updated_at',
sort: true,
hide: false,
disable: false
}
],
and i also have methods that use for hiding the column by changing columnData[].hide value to true and it will not show/hide the column header and column body
everything works fine, but when i have more and more column in one table then it will be a repetitive task. so is there any more elegant way? to just do some looping?