Is there any way to dynamically add templates/components to the vue table columns?

[taozhaolib]

Thank you for the reply to my previous question #107. I really like your veutable because it is very lightweight and easy to use by new Vue learners like me.

Here is another issue: I want to have a generic vuetable that can be adapted for any kind of data. So I want to put there some configurations so that the columns can add dynamically any kinds of components or templates based on the data settings. For example, I may want a column to have a <router-link> for this data, but next time for another set of data, I want a column that contains a <my-customized-template>. Would you please give us an example how to achieve this, if possible?

Thanks a lot.

[taozhaolib]

I wonder how return createElement('td', data, props.column.template(props.row.data)) in TableCell.vue works to render the data by calling the template function. Could you show me some doc about the template() function?

[Lloople]

Hi @taozhaolib ,

I'm doing similar to what you described

<table-component :data="fetchData">
    <table-column v-for="column in columns"
            :show="column.show"
            :label="column.label"
            :header-class="column.headerClass"
            :cell-class="column.cellClass"
    >
</table-component>

I define a columns object in javascript and then the component uses to render the different columns.

[spatie-bot]

Dear contributor,

because this issue seems to be inactive for quite some time now, I've automatically closed it. If you feel this issue deserves some attention from my human colleagues feel free to reopen it.

[vahidalvandi]

hi . i use this technic but have error in syntax !
how i can add columns by v-for ??

<TableColumn v-for="column in columns" show="column.show" label="column.label"</TableColumn>

[vahidalvandi]

i fixed it by add key
<TableColumn v-for="(column,index) in columns" :show="column.show" :label="column.label" :key="index"></TableColumn>