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 =
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?
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?
