我正在尝试使用mdbreact
这样的方式在 reactjs 中生成一个可排序和可搜索的表
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;
表格渲染得很好,但由于正文中有<a></a>
标签,相关列变得unsortable和unsearchable。
几天来,我一直在思考如何使该列可排序和可搜索,但是在阅读了大量内容之后,我却一无所获。
更新
似乎在 Chrome 中该列既不可搜索也不可排序,但在 Firefox 中,该列可排序但不可搜索。