How do I set a custom aggrid cellRenderer?

[juledwar]

Question

I cannot get a custom cellRenderer to work at all other than the nicegui's own checkboxRenderer. The documentation for aggrid says I can use a function to return anything with HTML in it, but doing something like this:

render = """funtion(params) { return '<a href="https://example.com">' + params.value + '</a>' }"""

and then adding 'cellRenderer': render in my columnDefs results in nothing happening.

All I want to do is linkify some text in a cell.

Thanks for any help!

[falkoschindler]

Hi @juledwar!
As far as I know it is currently not possible to set custom cell renderers in NiceGUI.
But for displaying links there is a parameter html_columns that allows specifying columns that should be rendered as HTML:

ui.aggrid({
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'URL', 'field': 'url'},
    ],
    'rowData': [
        {'name': 'Google', 'url': '<a href="https://google.com">https://google.com</a>'},
        {'name': 'Facebook', 'url': '<a href="https://facebook.com">https://facebook.com</a>'},
    ],
}, html_columns=[1])

[juledwar]

Hi there, thanks for the response! That's a shame we can't set custom renderers, but at least I can do the linkification for now, thanks.

Is there anything specific that is preventing this from happening? Is it a bug or lack of a feature? I'm not familiar with the code at all but I could dive in if sufficiently motivated 😄

Thanks again.

[falkoschindler]

Currently it's a limitation because we would need to transfer the JavaScript code for the custom renderer to the client and evaluate it there, similar to how we do it for ui.table's dynamic props:

nicegui/nicegui/elements/table.js

Lines 17 to 25 in 4a398a4

	if (attr.startsWith(":")) {
	try {
	convertedColumn[attr.slice(1)] = new Function("return " + convertedColumn[attr])();
	delete convertedColumn[attr];
	} catch (e) {
	console.error(`Error while converting ${attr} attribute to function:`, e);
	}
	}
	}

It should be possible, but I haven't looked into the details.

[xaptronic]

<note to self/others> It appears that this became possible https://github.com/zauberzeug/nicegui/blob/main/nicegui/elements/aggrid.js#L18

E.g.:

LinkRenderer = """
    class LinkRenderer {
        init(params) {
            this.eGui = document.createElement('a');
            this.eGui.innerText = params.value;
            this.eGui.setAttribute('href', `https://website.com/profile/${params.data.id}`);
            this.eGui.setAttribute('style', "text-decoration:none");
            this.eGui.setAttribute('target', "_blank");
        }
        getGui() {
            return this.eGui;
        }
    }
"""

gridOptions = {       
    "columnDefs": [
        {
            "field": "name",
            "headerName": "Name",
        },
        {
            "field": "profile",
            "headerName": "Profile",
            ":cellRenderer": LinkRenderer,
        }
    ]
}

Note the : prefix to the cellRenderer parameter which will result in that being evaluated in the js component.