Реагировать JS пользовательская сторона клиента bootstrap таблица с параметрами формата данных

Question

Как отформатировать данные в таблице React bootstrap и добавить пользовательские CSS и функции для элементов таблицы.

Items Array

      {  
         "item_id":"101",
         "Category":"Engine",
         "item_name":"Engine Oil Filter",
         "last_purchase":"29-Oct-2019 00:00",
         "item_count":30,
         "mobile":'99164-xxxxx',
         "email":"abccorp@bizworld.com",
         "address":"Pennsauken Township, NJ, United States",
         "vendor_name":"ABC Corp Ltd." 
      } ,{  
         "item_id":"103",
         "Category":"Engine",
         "item_name":"Engine Piston-3 ",
         "last_purchase":"02-Feb-2020 15:00",
         "item_count":60,
         "mobile":'65463-xxxxx',
         "email":"help@Saskelm.com",
         "address":"Church Street, London, United Kingdom",
         "vendor_name":"Saskelm Inc" 
      }  
   ]```

**React JS Bootstarp table**
    <div>
    <BootstrapTable ref={component1=> {
        this.table = component1;
        }}
        data={this.state.itemsList}
        pagination={ true }
        search
        options={options}
        exportCSV
        hover={true}
        striped={true}
        hover={true}
        tableHeaderClass="my-header-class custDataTable"
        tableBodyClass="table-rows-style"
        containerStyle={{ overflowX: "scroll" }}
        >
        <TableHeaderColumn width={"120px"} dataField="Category" dataSort={true} dataFormat={this.renderCatType.bind(this)}>
            Category
        </TableHeaderColumn>
        <TableHeaderColumn width={"180px"} dataField="item_name" isKey={true} dataSort={true} dataFormat={this.renderItemsLink.bind(this)}>
            Item Name
        </TableHeaderColumn>
        <TableHeaderColumn width={"100px"} dataField="vendor_name" dataSort={true}>
            Vendor Name
        </TableHeaderColumn>
        <TableHeaderColumn width={"90px"} dataSort={true} dataField="item_count" dataFormat={this.renderCount.bind(this)}>
            Item Count
        </TableHeaderColumn>
        <TableHeaderColumn width={"130px"} dataSort={true} dataField="last_purchase">
            Last Purchase
        </TableHeaderColumn>
        <TableHeaderColumn width={"120px"} dataField="address" dataSort={true} dataFormat={this.renderAddress.bind(this)}>
            Contact
        </TableHeaderColumn>
    </BootstrapTable>
</div>

1. Как создать пользовательскую таблицу данных на стороне клиента с параметрами форматирования данных.
2. Изменить элемент поиска и открыть модальное окно по щелчку имени элемента.