[Feature / Question] Custom elements about vue-good-table HOT 9 CLOSED

@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.

from vue-good-table.

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>

from vue-good-table.

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

from vue-good-table.

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

from vue-good-table.

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.

from vue-good-table.

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?

from vue-good-table.

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 :)

from vue-good-table.

@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.

from vue-good-table.

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 👍

from vue-good-table.