如果单元格包含 HTML，则 MDBDataTable 无法对列进行排序

Question

我正在尝试使用 mdbreact 在 reactjs 中生成一个 sortable 和可搜索的 table

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;

table 渲染得很好，但是因为正文中有 <a></a> 标签，相关列变成 unsortable 并且无法搜索.

几天来我一直在思考如何使该列排序 table 并可搜索，但是在大量阅读之后我一头雾水。

更新

似乎在 Chrome 中该列既不可搜索也不可排序table，但在 Firefox 中该列可排序table 但不可搜索。

Answer 1

参考：https://mdbootstrap.com/support/react/make-a-mdbdatatable-row-clickable/

我找到了一个名为 clickEvent 的保留行键，可以像这样使用：

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;

然后我可以按我喜欢的任何方式处理点击事件，也许使用 window.location.href = '/' + name; 来模拟 <a> 标签所需的功能。

如果单元格包含 HTML，则 MDBDataTable 无法对列进行排序

MDBDataTable Cannot Sort Column if Cell Contains HTML

html

datatables

jsx

reactjs

mdbreact