MDBDataTable Cannot Sort Column if Cell Contains HTML

Question

I'm trying to generate a sortable and searchable table in reactjs using mdbreact like so

import React from 'react';
import { MDBDataTable } from 'mdbreact';

const tableData = {
    columns: [
        {
            field: 'first_name',
            label: 'First Name'
        },
        {
            field: 'last_name',
            label: 'Last Name'
        },
        {
            field: 'age',
            label: 'Age'
        }
    ],
    rows: [
        {
            first_name: <a href='/example-route/John'>John</a>,
            last_name: 'Smith',
            age: 29
        },
        {
            first_name: <a href='/example-route/Jane'>Jane</a>,
            last_name: 'Doe',
            age: 34
        }
    ]
};

class Table extends React.Component {
    render() {
        return(
            <MDBDataTable data={tableData} />
        )
    }
}

export default Table;

The table renders just fine, but because there are <a></a> tags in the body, the relevant column becomes unsortable and unsearchable.

I've thought for a few days now about how to make that column sortable and searchable, but after doing a boatload of reading I've come up blank.

UPDATE

It seems that in Chrome the column is neither searchable nor sortable, but in Firefox the column is sortable but not searchable.

Answer 1

ref: https://mdbootstrap.com/support/react/make-a-mdbdatatable-row-clickable/

I have found a reserved row key called clickEvent that can be used like so:

import React from 'react';
import { MDBDataTable } from 'mdbreact';

class Table extends React.Component {

    handleClick(name) {
        console.log(name);
    }

    render() {
        return(
            <MDBDataTable data={{
                columns: [
                    {
                        field: 'first_name',
                        label: 'First Name'
                    },
                    {
                        field: 'last_name',
                        label: 'Last Name'
                    },
                    {
                        field: 'age',
                        label: 'Age'
                    }
                ],
                rows: [
                    {
                        first_name: 'John',
                        last_name: 'Smith',
                        age: 29,
                        clickEvent: () => this.handleClick('john')
                    },
                    {
                        first_name: 'Jane',
                        last_name: 'Doe',
                        age: 34,
                        clickEvent: () => this.handleClick('jane')
                    }
                ]
            }} />
        )
    }
}

export default Table;

I can then handle the click event in whichever way I'd like, maybe using window.location.href = '/' + name; to simulate the required functionality of an <a> tag.