React Bootstrap表修改和过滤

Question

修改React Bootstrap表的布局，使其看起来像React卡列表，而不是表，并启用按钮过滤器。

我添加了带有过滤器的基本表。我想找出是否有一种方法可以修改表格的布局结构，以使其看起来更像是引导卡而不是表格。另外，我的过滤器似乎无法正常工作。单击按钮以应用特定类别后，将不会显示任何内容。另外，有没有一种方法可以隐藏表格上的输入选择并只留下按钮？

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;