search

angeliski / vue-tabulator

Vue Tabulator - The best way to use Tabulator in Vue projects
https://vue-tabulator.netlify.com/
MIT License
35 stars 13 forks source link

[Feature] - Inject custom Vue components into table cells #94

Open harryjubb opened 3 years ago

harryjubb commented 3 years ago

Is your feature request related to a problem? Please describe. I'm exploring Tabulator / vue-tabulator as a table display option in an app, but have a requirement to be able to use existing Vue components in table cells. The rendering of these would need to be as customisable as possible, potentially including a "template" of nested components. Cell data would need to be accessible to the nested component(s).

Describe the solution you'd like The Vue-est solution that makes sense would be to be able to use scoped slots in vue-tabulator in the same way as the Bootstrap Vue table does, so that it's possible to nest components in fields seamlessly with access to cell data.

Describe alternatives you've considered The existing method for this as far as I'm aware is tabulator formatter functions, but I'm not clear on a path to utilising these to render custom components. I'm not sure if it's possible to write a formatter function to mount a Vue instance to show the custom components in: but even if possible that's a complex workaround and less Vue-friendly. Any thoughts or ideas on this appreciated.

Additional context N/A

angeliski commented 3 years ago

Hey @harryjubb Great suggestion, we can try to use the formatter function to render that.

Can you open a draft so we can work together?

TheCelebrimbor commented 3 years ago

+1, Is this currently possible?. Vue 3 does not seem to have a compile() function that can compile existing sfc to a HTML string that can be inserted via cell formatters. This seems to be critical as I have to resort to some other templating solution like EJS or PUG to do the same for now.

timothymarois commented 3 years ago

Would also like this functionality. This is probably the biggest reason I cant use tabulator with vue.

timothymarois commented 3 years ago

Ideally, this would be nice to be able to use slots, so that you can inject actual vue functionality, just outputting a vue component into HTML to rending into a cell will not work because you'll lose all reactivity within that vue component. Not sure if its even possible.

timothymarois commented 3 years ago

An example of why the cell column formatter system will not work, think of a SPA setup and you have a table which has items that are links to specific pages within your app, using formatter:'link' can allow you to set columns up that have links to locations, but since they are outside the scope of the app, they reload the application upon link click rather than keeping SPA active. Defeats the purpose. The only rig I would say around this, potentially using the click callback to allow you to run events on cell clicks, but I really hate to do things like that too.

harryjubb commented 3 years ago

@timothymarois It may be possible to do something with Portal Vue or Vue 3 native portals to inject Vue components into cells, but haven't investigated this: ended up rolling a Vue-native solution.