Search does not work for link text in material table

Question

below is my code:

const data = [];
Object.keys(json).forEach(key => {
    const jobStr = json[key];
    console.log(`=== historicalJobCallback jobStr: ${jobStr}`);

    const jobItem = jobStr.split(',');
    data.push({
        jobId: <a href={Utils.getLungoEndpoint() + jobItem[0]} target="_blank" rel="noopener noreferrer"
                  className={classes.link}>{jobItem[0]}</a>,
        jobName: jobItem[1],
        submittedBy: jobItem[2],
        submittedTime: jobItem[3],
        tenant: jobItem[4],
        business: jobItem[5]
    })
});

setState({
    columns: [
        {
            title: 'Job ID',
            field: 'jobId',
            render: rowData => <a href={Utils.getLungoEndpoint() + jobItem[0]} target="_blank"
                                  className={classes.link}>{jobItem[0]}</a>
        },
        {title: 'Job Name', field: 'jobName'},
        {title: 'Submitted By', field: 'submittedBy'},
        {title: 'Submitted Time', field: 'submittedTime'},
        {title: 'Tenant', field: 'tenant'},
        {title: 'Business', field: 'business'},
    ],
    data: data
});

As you can see the jobId column is a link, the search feature works for other columns except the job id column, I suspect it is due to the job id text is wrapped in a link, how can I make it searchable?

Answer 1

thanks for the suggestion by @Yatrix, made my code like below and the search is now working for link:

Object.keys(json).forEach(key => {
    const jobItem = json[key].split(',');
    data.push({
        jobId: {
            name: jobItem[0],
            url: Utils.getLungoEndpoint() + jobItem[0]
        },
        jobName: jobItem[1],
        submittedBy: jobItem[2],
        submittedTime: jobItem[3],
        tenant: jobItem[4],
        business: jobItem[5]
    })
});
console.log(`=== historicalJobCallback data: ${JSON.stringify(data)}`);

setState({
    columns: [
        {
            title: 'Job ID',
            field: 'jobId',
            customFilterAndSearch: (term, rowData) => (rowData.jobId.name).indexOf(term) != -1,
            render: rowData => <Link href={rowData.jobId.url} target='_blank'
                                     color='secondary'>{rowData.jobId.name}</Link>
        },
        {title: 'Job Name', field: 'jobName'},
        {title: 'Submitted By', field: 'submittedBy'},
        {title: 'Submitted Time', field: 'submittedTime'},
        {title: 'Tenant', field: 'tenant'},
        {title: 'Business', field: 'business'},
    ],
    data: data
});