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

Question

我想为 table 的 sort/filter 列添加功能。在网络上，我找不到任何关于如何使用 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 的情况下向列添加过滤器的资源，但我需要修改我的整个项目

Answer 1

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

您在 th 中创建了一个输入文本，然后将此值用作 属性 过滤器。 然后，如果您想根据相等或 startsWith 或 includes 等

进行字符串比较，则由您选择

请检查this sandbox