How to render an Link inside MUI data cell

Derrick.X 0
Viewed 25

I tried to render a Link component inside the MUI data-grid cell, my code is as below:

import { GridColDef } from "@mui/x-data-grid";
import { Link } from "react-router-dom";

const myColumns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 70 },        
    {
        field: "prLink",
        headerName: "PR Link",
        width: 150,
        renderCell: (params) => <Link to={params.value} >{params.value}</Link>,
    },
    {
      field: "needExtraCost",
      headerName: "Need E/Cost",
      width: 120,
    },
    ];

    export {
    extraCostColumns
    }

And I get error like below:

ERROR in src/app/models/extra-cost.ts:64:12 TS1005: ';' expected.

It's from the renderCell call, when I remove the line, it's back to normal, I followed the MUI document, is there anything I doing wrong? please advice, thanks.

datagrid hyperlink material-ui reactjs
1 Answers

I think I made a silly mistake that I define these in one of my interface which is ts file, not tsx and that's why it doesn't recognize the node. After I changed to .tsx file and compile again, the error is gone! Thanks.

Derrick.X0
Related