reactjsreact-bootstrapreact-bootstrap-tabletablefilter

How to add columns filter using react-bootstrap/table?


I want to add the ability to sort/filter the columns of my table. On the web I can't find any example on how to do that with react-bootstrap/table.

Here is my code:

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>
        )
    }
}

I can't find any ressource about how to add filters to the column without using react-bootstrap-table2 but then I need to modify my whole project


Solution

  • I have created a very minimal example on how to filter array based on column value.

    You create an input text inside the th and then use this value as a property filter. Then, it's your choice if you want to do string comparisons based on equality or startsWith or includes etc

    Please check this sandbox