Clickable url value in ag-grid with react

user_1195527 0
Viewed 10721

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:

enter image description here

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?

enter image description here

ag-grid-react ag-grid reactjs
3 Answers

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

Edit demo app on CodeSandbox

user_94494260

Try this for newer versions:

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