Datatables Vue 3 render components doesn`t seem to work with global components on nested trees
Datatables Vue 3 render components doesn`t seem to work with global components on nested trees
Is it possible to render nested (global) components in the render slot?
In my attempts, what I noticed is that only the first component of the tree is rendered.
Only when components are imported explicitly it does work as expected.
This is a problem when you try to use components registered via app.component() for example.
Exploring DataTable.vue, looking at the createRenderer function, I could see that appContext for vNode (let content = h(...)) is missing. Adding an instance of ComponentPublicInstance (or ComponentInternalInstance) to the vNode.appContext fixes the issue.
Working code:
/**
* Create a DataTables rendering function for a slot
*
* @param slot Slot to render
* @param {ComponentPublicInstance|ComponentInternalInstance} slot Vue instance
*/
function createRenderer(slot: any, instance: any) {
return function (
data: any,
type: string,
row: any,
meta: any
) {
let key = meta.row + ',' + meta.col;
if (!elements[key]) {
const slotRender = slot({
cellData: data,
colIndex: meta.col,
rowData: row,
rowIndex: meta.row,
type
});
slotRender[0].appContext = instance.appContext;
let content = h('div', slotRender);
elements[key] = document.createElement('div');
render(content, elements[key]);
}
return elements[key];
}
}