magic-amber•13mo ago

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

kapa.ai•13mo ago

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:

import { Link } from "@mui/material";

const columns = React.useMemo<GridColDef[]>(
    () => [
        {
            field: "id",
            headerName: "Job ID",
            minWidth: 370,
            renderCell: function render({ row }) {
                const jobId = row?.id;
                const jobshowURL = `/jobs/show/${jobId}`
                const handleCopyClick = () => {
                    // copy the text into clipboard
                    copyToClipboard(jobId);
                    window.alert("Job ID copied");
                };
                return (
                    <>
                        <Link href={jobshowURL}>
                            <TextField value={jobId}/>
                        </Link>
                        <IconButton onClick={handleCopyClick} aria-label="Copy">
                            <FileCopyIcon style={{ fontSize: 16 }}/>
                        </IconButton>
                    </>
                );
            },
        },
    ]
);

import { Link } from "@mui/material";

const columns = React.useMemo<GridColDef[]>(
    () => [
        {
            field: "id",
            headerName: "Job ID",
            minWidth: 370,
            renderCell: function render({ row }) {
                const jobId = row?.id;
                const jobshowURL = `/jobs/show/${jobId}`
                const handleCopyClick = () => {
                    // copy the text into clipboard
                    copyToClipboard(jobId);
                    window.alert("Job ID copied");
                };
                return (
                    <>
                        <Link href={jobshowURL}>
                            <TextField value={jobId}/>
                        </Link>
                        <IconButton onClick={handleCopyClick} aria-label="Copy">
                            <FileCopyIcon style={{ fontSize: 16 }}/>
                        </IconButton>
                    </>
                );
            },
        },
    ]
);

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: ----------------------

kapa.ai•13mo ago

<@1156621086176321576> kapa.ai is still learning and improving, please let us know how it did by reacting below