如何使用 react-bootstrap/table 添加列过滤器？答案

【问题标题】：How to add columns filter using react-bootstrap/table?如何使用 react-bootstrap/table 添加列过滤器？
【发布时间】：2021-06-16 09:06:13
【问题描述】：

我想添加对表格列进行排序/过滤的功能。在网上我找不到任何关于如何使用 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 的情况下向列添加过滤器的资源，但是我需要修改我的整个项目

【问题讨论】：

您需要在表头中实现自己的输入。如果你提供给我们一个代码框，我想我可以稍微修改一下，向你展示如何
@Apostolos 你可以访问它吗？ codesandbox.io/s/elastic-poitras-tnb6z?file=/src/App.js
是的。让我检查一下

标签： reactjs react-bootstrap react-bootstrap-table tablefilter

【解决方案1】：

我创建了一个关于如何根据列值过滤数组的非常小的示例。

您在th 中创建一个输入文本，然后将此值用作属性过滤器。然后，您可以选择是否要基于相等或startsWith 或includes 等进行字符串比较

请查看this sandbox

【讨论】：