Make the jobID textfield in datagrid be a clickable URL
As the title described, for now, I used the JobID in textfield component from refine/mui in this way:
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: "id",
headerName: "Job ID",
minWidth: 370,
renderCell: function render({ row }) {
const jobId = row?.id;
const apiUrl = useApiUrl();
const jobshowURL =
${apiUrl}/jobs/show/${jobId}
const handleCopyClick = () => {
// copy the text into clipboard
copyToClipboard(jobId);
window.alert("Job ID copied");
};
return (
<>
<TextField value={jobId}/>
<IconButton onClick={handleCopyClick} aria-label="Copy">
<FileCopyIcon style={{ fontSize: 16 }}/>
</IconButton>
</>
);
},
},
how can I make the textfiled a clickable link to this job show page when user click the jobID in frontend?2 Replies
Hi @zion_48046. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To make the TextField a clickable link, you can wrap it in a
<a> tag or use Material UI's <Link> component. However, the useApiUrl hook cannot be used inside the renderCell function as hooks cannot be called inside nested functions or loops.
Here's an example of how you can do it:
In this example, I've used the relative URL for the job show page. If you need to use the absolute URL, you should call the useApiUrl hook outside of the renderCell function and pass the API URL as a prop to the component that renders the grid.
Please note that this code is based on the general React and Material UI knowledge, and it's not directly extracted from the provided sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1156621086176321576> kapa.ai is still learning and improving, please let us know how it did by reacting below