React Material-UI add link in DataGrid

Question

I am using DataGrid from Material-UI, I would like to apply a link to end of the each row.
but it displays it as follows: ( [object Object] )

I want it to display like 123456789 id of the record and be a link to /form/123456789 ... and I use Link from react-router-dom but I couldn't figure it out what am I missing or DataGrid component is not the best fit... I just want to add a link at the end of each row

Here is what I tried to do so far;

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
import {
  DataGrid,
  GridToolbarContainer,
  GridColumnsToolbarButton,
  GridFilterToolbarButton,
} from '@material-ui/data-grid';
import { Container, Backdrop, CircularProgress } from '@material-ui/core';
import { Redirect, Link } from 'react-router-dom';
import { getAllForms } from '../actions/formActions';
import Message from '../layout/Message';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';

const useStyles = makeStyles((theme) => ({
  container: {},
  backdrop: {
    zIndex: '10',
  },
  datagrid: {
    width: '100%',
  },
}));

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridColumnsToolbarButton />
      <GridFilterToolbarButton />
    </GridToolbarContainer>
  );
}

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: 'Name' },
  { field: 'cellnumber', headerName: 'Cell Number', width: 150 },
  {
    field: 'type',
    headerName: 'Type',
    width: 150,
  },
  {
    field: 'brand',
    headerName: 'Brand',
    width: 150,
  },
  {
    field: 'price',
    headerName: 'Price',
    width: 150,
  },
  {
    field: 'status',
    headerName: 'Status',
    width: 150,
  },
  {
    field: 'createdAt',
    headerName: 'createdAt',
    width: 150,
  },
  {
    field: 'link',
    headerName: 'link',
    width: 150,
  },
];

const Forms = () => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const userDetails = useSelector((state) => state.userDetails);
  const {
    userInfo,
    loading: loadingDetails,
    error: errorDetails,
  } = userDetails;
  const formGetAll = useSelector((state) => state.formGetAll);
  const { forms, loading: loadingForms, error: errorForms } = formGetAll;

  useEffect(() => {
    dispatch(getAllForms());
  }, [dispatch]);

  if (!userInfo) {
    return <Redirect to='/login'></Redirect>;
  }

  let rows2 = [];
  for (let x in forms) {
    let rowItem = {};
    rowItem.id = forms[x]._id;
    rowItem.name = forms[x].name;
    rowItem.cellnumber = forms[x].cellnumber;
    rowItem.type = forms[x].type;
    rowItem.brand = forms[x].brand;
    rowItem.price = forms[x].price;
    rowItem.status = forms[x].status;
    rowItem.createdAt = forms[x].createdAt;
    rowItem.link = <Link to={`${forms[x]._id}`}>Link</Link>;

    rows2.push(rowItem);
    console.log(rows2.link);
  }

  return (
    <Container className={classes.container} maxWidth='lg'>
      <div style={{ height: 400, width: '100%' }}>
        {errorForms && <Message variant='error' message={errorForms}></Message>}
        {loadingForms ? (
          <Backdrop open={true} className={classes.backdrop}>
            <CircularProgress></CircularProgress>
          </Backdrop>
        ) : (
          <DataGrid
            rows={rows2}
            columns={columns}
            pageSize={5}
            className={classes.datagrid}
            components={{ Toolbar: CustomToolbar }}
            density='comfortable'
          />
        )}
      </div>
    </Container>
  );
};

export default Forms;

Answer 1

You can override the renderCell method in the column definition if you want to render custom React component instead of plain string. See render cell section.

{
  field: "email",
  headerName: "Email",
  width: 300,
  renderCell: (params) => (
    <Link href={`/form/${params.value}`}>{params.value}</Link>
  )
}

Live Demo

Answer 2

Fiz quase igual do amigo acima. porem utilizei o LINK to

{ field: "email", headerName: "Email", width: 300, renderCell: (params) => ( <Link to={ /form/${params.value} }>{params.value} ) }