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.

How can I make a cell value clickable in ag-grid?

I've tried using valueGetter: this.urlValueGetter with columnDefs and:

urlValueGetter(params) {
  return '<a href=\'bill/' + params.data.id + '\'>details</a>';
}

but it now looks like this:

I then tried using template: '<a href=\'bill/{id}\'>details</a>' which does show the cell text as clickable but the id is not replaced. I assume this could work if I could somehow pass in the id?

score 9 · Accepted Answer · answered Jul 21 '17 at 07:46

9

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 '<b>' + params.value.toUpperCase() + '</b>';
}

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;
    }
}

answered Jul 21 '17 at 07:46

thirtydot

224,678
48
389
349

4

As above, but the cell renderer can also be a React component by using cellRendererFramework – Sean Landsman Jul 27 '17 at 17:28
2

Try to only use the React component version if you *really* need to, it can be slower than the native DOM version. It matters more with lots of columns, or on slower computers, or if you're trying to keep the grid scrolling fast. – thirtydot Jul 27 '17 at 20:28
Yep, agreed - just thought it worth mentioning – Sean Landsman Jul 27 '17 at 20:49
1

Is there any way to do it for `react-router-dom 's `? – Sushmit Sagar Feb 13 '20 at 06:42
@Sushmit: https://reacttraining.com/react-router/web/api/Hooks/usehistory programmatically navigate with `.push()`. – thirtydot Feb 13 '20 at 15:05
Finally I realized that my code had JSX rather than plaintext for the HTML, so that's why my ag-Grid cellRenderer wasn't working. Thanks. Also helpful: https://blog.ag-grid.com/adding-hyperlinks-to-the-grid/ – Ryan Nov 18 '21 at 03:39

score 3 · Answer 2 · answered Aug 09 '20 at 04:49

Since you've already used React, you should use frameworkComponent instead. Somebody mentioned about the overhead of React but because this is a very simple component, I do not think it matters much in this case.

Anyway, here is the example setup.

function LinkComponent(props: ICellRendererParams) {
  return (
    <a href={"https://yourwebsite/entity/detail?id=" + props.value}>
      {props.value}
    </a>
  );
}

...

// in your render method
<AgGridReact
  {...}
  columnDefs={[...,{
    headerName: "Detail",
    field: "detail",
    cellRenderer: "LinkComponent"
  }]}
  frameworkComponents={{
    LinkComponent
  }}
/>

Live Example

score 0 · Answer 3 · answered Sep 08 '22 at 08:22

0

Try this for newer versions:

cellRenderer: function(params) {
        return <a href="https://www.google.com" target="_blank" rel="noopener"> {params.value} </a>

answered Sep 08 '22 at 08:22

Akshay Meshram

3
2

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 13 '22 at 04:51

Clickable url value in ag-grid with react

3 Answers3

Live Example

Linked