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

cauesantosre4cauesantosre4 Posts: 3Questions: 0Answers: 0

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];
    }
}
Sign In or Register to comment.