CODEWITHSUNDEEP
javascriptreactjsdatagridmaterial-ui
Ales Maticic
Ales Maticic

Reputation: 1965

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

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

Upvotes: 19

Views: 22893

Answers (4)

Atul Sharma
Atul Sharma

Reputation: 9

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

Upvotes: 0

Aditya Choudhary
Aditya Choudhary

Reputation: 19

I tried this and it worked for me.

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

Upvotes: 2

acxes
acxes

Reputation: 41

Updated.

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

Upvotes: 4

Josh
Josh

Reputation: 575

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.

Upvotes: 19

Related Questions