无法搜索 material table 中的 link 文本

Question

下面是我的代码：

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
});

如您所见，jobId 列是 link，搜索功能适用于除 job id 列以外的其他列，我怀疑这是因为 job id 文本被包裹在 link，如何让它可以搜索到？

Answer 1

感谢@Yatrix 的建议，使我的代码如下所示，现在可以搜索 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
});

无法搜索 material table 中的 link 文本

Search does not work for link text in material table

reactjs

material-ui

material-table