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