React Bootstrap Table modifications and filtering - reactjs

Question

Modifying react bootstrap table layout to look like a react card list rather than table and enabling button filters.
I've added a basic table with filter. I wanted to find out if there is a way to modify the table's layout structure so that it looks more like bootstrap cards rather than a table. Also, my filter doesn't seem to be working. Once I click a button to apply a particular category nothing is shown. Also, is there a way to hide the input selection on the table and just leave the button?
import React, { Component } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
class Favourites extends Component {
constructor(props){
super(props);
}
render() {
const { SearchBar } = Search;
const products_data = [
{
"id": "28f07624",
"name": "Workbook1",
"createdAt": "2019-05-17T17:51:17Z"
},
{
"id": "a3c798fd",
"name": "Workbook2",
"createdAt": "2019-05-14T12:19:38Z",
},
{
"id": "520dccf8",
"name": ["Workbook3", "Workbook4"],
"createdAt": "2019-05-16T13:31:07Z"
}
];
let qualityFilter;
const selectOptions = {
0: 'Workbook1',
1: 'Workbook2',
2: 'Workbook3'
};
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
filter: selectFilter({
options: selectOptions,
getFilter: (filter) => {
// qualityFilter was assigned once the component has been mounted.
qualityFilter = filter;
}
})
}, {
dataField: 'createdAt',
text: 'Product Quality',
}];
const handleClick = () => {
qualityFilter(0);
};
return (
<div className="fluid-container">
<div className="container body_wrap">
<h1>Favourites</h1>
<button className="btn btn-lg btn-primary" onClick={ handleClick }>{' Workbook1 '}</button>
<BootstrapTable keyField='id' data={ products_data } columns={ columns } filter={ filterFactory() } />
</div>
</div>
);
}
}
export default Favourites;