React Bootstrap Таблица модификаций и фильтрации

Question

Изменение макета таблицы реагирующей начальной загрузки, чтобы она выглядела как список карт реакции, а не как таблица, и с включенными фильтрами кнопок.

Я добавил базовую таблицу с фильтром.Я хотел выяснить, есть ли способ изменить структуру таблицы так, чтобы она больше походила на загрузочные карты, а не на таблицу.Кроме того, мой фильтр, похоже, не работает.Как только я нажимаю кнопку, чтобы применить определенную категорию, ничего не отображается.Кроме того, есть ли способ скрыть выбор ввода на столе и просто оставить кнопку?

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;