如何使用 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