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

Question

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

you need to implement your own inputs inside the table headers. if you provide us a codesandbox, i think i can alter it a little bit to show you how — Apostolos
– Apostolos, Commented Jun 16, 2021 at 9:16
@Apostolos do you have access to it ? codesandbox.io/s/elastic-poitras-tnb6z?file=/src/App.js — J.erome
– J.erome, Commented Jun 16, 2021 at 9:28

Apostolos · Accepted Answer · 2021-06-16 10:09:35Z

4

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

answered Jun 16, 2021 at 10:09

Apostolos

10.5k5 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related