[Feature / Question] Custom elements

[bmfteixeira]

Any way to get this working with custom elements?

[xaksis]

hey @bmfteixeira! tell me more? If you mean html elements within table cells, you can do that by setting html: true on column https://github.com/xaksis/vue-good-table#column-options

[bmfteixeira]

Hey @xaksis, not really HTML elements (which is already good 👍 ) but custom elements. Like, passing slots to my table cells with my components to be rendered.

[xaksis]

hmm. that would be tough, given that the rows are generated dynamically based on your data object. If you explain your use case more, i'll see if it is feasible. Do you wanna show custom vue components inside your dynamically generated table cells?

[cristijora]

@bmfteixeira Usually an example of code on how you expect it to be helps a lot understanding the issue. Just make a very simple example of input and expected output and from there on ideas and implementation might be done faster rather than going back and forth with replies.

[bmfteixeira]

Just getting inspired on datatables from Vuetify:

Input: https://github.com/vuetifyjs/docs/blob/master/examples/tables/3.vue Ouput: https://vuetifyjs.com/components/data-tables (search for #3 - ignore search and pagination stuff)

What happens is that they manage the cell's content by slot. The sorting is done by a cell property. This give a lot of leeway to build a dynamic table :)

[xaksis]

@bmfteixeira I see what you mean now. they use scoped slots to let you decide how to display tds within a row.

Could be a good usecase for an advanced version. I'll look into it but can't commit to this just yet. Thank you for bringing it up though and apologies for not understanding the use case initially.

[bmfteixeira]

All good @xaksis. I think this is a major feature and will bring the vue-good-table to another level (once everyone can make the table way more dynamic). Good luck with that and maybe I'll try to give you a hand if I have time to it 👍

[xaksis]

Alright! iteration 1 of this feature is now available in v1.3.0. Example Usage:

<vue-good-table
  title="Dynamic Table"
  :columns="columns"
  :rows="rows"
  :lineNumbers="true"
  :defaultSortBy="{field: 'age', type: 'asec'}"
  :globalSearch="true"
  :paginate="true"
  styleClass="table condensed table-bordered table-striped">
  <template slot="table-row" scope="props">
    <td>{{ props.row.name }}</td>
    <td class="fancy">{{ props.row.age }}</td>
    <td>{{ props.row.percent }}</td>
  </template>
</vue-good-table>

[bmfteixeira]

Great to see this @xaksis. Will try in a near future.