Clickable url value in ag-grid with react

Question

I\'m currently giving ag-grid a try and trying to build a table where if the user clicks a column value, they are taken to a page containing that entry\'s details.

<

Answer 1

You want to use a cellRenderer for that, instead of valueGetter:

https://www.ag-grid.com/javascript-grid-cell-rendering-components/#gsc.tab=0

Random example from above documentation:

// put the value in bold
colDef.cellRenderer = function(params) {
    return '' + params.value.toUpperCase() + '';
}

You can return a string (easier) with your link if you don't want to attach any events.

Otherwise, here's an example of a colDef if you want to attach events to an element:

{
    headerName: 'ID',
    field: 'id',
    cellRenderer: (params) => {
        var link = document.createElement('a');
        link.href = '#';
        link.innerText = params.value;
        link.addEventListener('click', (e) => {
            e.preventDefault();
            console.log(params.data.id);
        });
        return link;
    }
}