如何解决如何使用 react-bootstrap/table 添加列过滤器?
我想添加对表格列进行排序/过滤的功能。在网上我找不到任何关于如何使用 react-bootstrap/table 来做到这一点的例子。
这是我的代码:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Table from 'react-bootstrap/Table';
export default class Success extends React.Component {
render() {
return (
<div className="container">
</div>
<div className="row">
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Label</th>
<th>Text</th>
<th>Prediction</th>
<th>Validation</th>
</tr>
</thead>
<tbody>
{Object.keys(this.state.jsondata.label).map(k =>
<tr>
<td>{k}</td>
<td>{this.state.jsondata.label[k]}</td>
<td>{this.state.jsondata.prediction[k]}</td>
<td>
<Button variant="danger" size="sm" onClick={() => { this.removeData(k) }}>Cancel<XOctagonFill/></Button>
</td>
</tr>
)}
</tbody>
</Table>
</div>
</div>
)
}
}
我找不到任何关于如何在不使用 react-bootstrap-table2 的情况下向列添加过滤器的资源,但随后我需要修改我的整个项目
解决方法
我创建了一个关于如何根据列值过滤数组的最小示例。
您在 th
内创建一个输入文本,然后将此值用作属性过滤器。
然后,如果您想根据相等或 startsWith
或 includes
等进行字符串比较
请检查this sandbox
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。