Clickable icon in AG Grid

[HertZz98]

Question

I need to add a clickable icon in AG Grid, I tried using the cellRenderer property to render the image but it is not working...

ui.aggrid({
    'defaultColDef': {'flex': 1},
    'columnDefs': [
    // other header definitions
        {'headerName': 'Icon', 'cellRenderer': "IconRenderer"},
    ],
    'rowData': stations_and_process_rows,
    'components': {
        'IconRenderer': IconRenderer
    }
}).on('rowClicked', lambda event: on_row_clicked(event.args), ['data']).classes('w-full') `

IconRenderer = ui.run_javascript("""
function(params) {
    var icon = document.createElement('img');
    icon.src = 'res/icons/test.png';
    icon.style.cursor = 'pointer';
    icon.style.width = '20px';
    icon.style.height = '20px';
    icon.onclick = function() {
        alert('Row data: ' + JSON.stringify(params.data));
    };
    return icon;
}
""")

I also tried to return an image directly using

def IconRenderer():
    return ui.image('res/icons/test.png')

but this did not work as well.
Is this approach right or is there another way render an icon in AG Grid?

[afullerx]

Hi @HertZz98, I'm not personally experienced with AG Grid, but I see there is an option to render columns as HTML. Something like this seems to work:

def on_cell_clicked(args):
    if 'class="icon-cell"' in args['value']:
        ui.notify(f'Icon clicked: {args["data"]["icon_id"]}')

icon_url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAH3AAAB9wEeuin8AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAIBJREFUOI3t0cEJhDAQheF/FltYrGK92IkVbBXbkkW4dpBGBPHm+e0lARkDGz2KAw+GZPIREiQhCSAAcvkAHdCkOZ8H/+sJfM2syW2WAFvkdRZIyOiRI0AWqQoO9cDg1tbUWPwBzCwArRucgDmDBknvkhvUMb6W1Bx9g13dwCWAHyDTLz9JoiqhAAAAAElFTkSuQmCC'
icon_html = f'<img class="icon-cell" src="{icon_url}">'
icon_column = 1

ui.aggrid(
    {
        'columnDefs': [
            {'headerName': 'Column 1', 'field': 'col_1'},
            {'headerName': 'Icon', 'field': 'icon'},
        ],
        'rowData': [
            {'col_1': 'Example Text 1', 'icon': icon_html, 'icon_id': 1},
            {'col_1': 'Example Text 2', 'icon': icon_html, 'icon_id': 2},
        ],
    },
    html_columns=[icon_column],
).on('cellClicked', lambda event: on_cell_clicked(event.args), ['value', 'data'])

[afullerx]

After playing with AG Grid a bit more, I improved my example. It now responds only when the cell containing the image is clicked, instead of the entire row. The only way I saw to do this was by matching against the contents of the cell. It seems like there should be a better way. I might be missing something.

[HertZz98]

Thanks @afullerx. It is working as intended :-)