How to create a link in a row with @material-ui/data-grid

Question

I am using @material-ui/data-grid to display some data and each row must have a link to the next page. I can pass all the required data, but am not sure how to create a link. The documentation doesn't mention it anywhere. I tried to pass it with the valueGetter like in the example below but due to how React renders HTML it just returns the href as a string.

const columns = [
  {
    field: "id",
    headerName: "ID",
    width: 150,
    valueGetter: (params) => 
      `<a href="${params.getValue("id")}">${params.getValue("id")}</a>`,
  },
  { field: "inviteId", headerName: "Invite Id", width: 150 },
];

Answer 1

You're returning the link as a string:

`<a href="${params.getValue("id")}">${params.getValue("id")}</a>`

Could you not return this as JSX?

return (<a href={params.getValue("id")}>{params.getValue("id")}</a>)

Update

The above is not correct as valueGetter is going to return a string.

It appears you will need to switch out valueGetter with renderCell, which allows you to render a React node. The Material UI docs provide an example here.

Answer 2

Updated.

const columns = [
  {
    field: "id",
    headerName: "ID",
    width: 150,
    renderCell: (params) => 
      <a href="${params.row.id}">${params.row.id}</a>,
  },
];