Issue Rendering Custom Components in DataTable with Metronic v9.0.6, TailwindCSS, and Vue
Hi everyone,
We're using metronic v9.0.6 with tailwindcss and vue. While trying to use a render function for the DataTable component, custom components returned are not being rendered.
My example code is here (was erroring while trying to post it here): https://snipit.io/public/snippets/89917
In the example, <avatar name="John Doe"></avatar> is successfully rendered, while the `<avatar name="Mary Jane"></avatar> Mary Jane`; is not.
Is there a way to make those being rendered?
Thank you
Replies (1)
Hi João Pedro
The DataTable returns raw HTML, but Vue components such as <avatar> must be compiled and rendered by Vue itself, not just injected as raw HTML strings.
Vue's rendering system doesn't automatically compile custom components when inserted this way via innerHTML.
To make Vue components like <avatar> render dynamically within DataTables, you'll need to manually mount Vue components where necessary, as Vue cannot automatically render components from raw HTML.
https://snipit.io/public/lists/26457/89938
Then, after DataTable is populated, you can use Vue’s createApp to mount the Vue component manually in the location returned by the render function:
