Блог

использование react-bootstrap-table2 для таблицы и совместного поиска, как показано ниже

 <ToolkitProvider
          bootstrap4
          keyField='id'
          data={data}
          columns={columns}
          search
      >
          {props=>(
              <>
                  <SearchBar {...props.searchProps} placeholder='Start typing'/>
                  <br/>
                  <BootstrapTable condensed bordered
                                    id='bootstrap-tr'
                                    {...props.baseProps} 
                                    noDataIndication={() => 'There is no data to display'} 
                                    loading={loading} 
                                    overlay={overlayFactory({ spinner: true })} 
                                    pagination={paginationFactory(options)}
                                    // rowClasses={rowClasses}
                                    // expandRow={expandRow}
                                    />
              </>
          )}
      </ToolkitProvider>
 

панель поиска выглядит следующим образом

я использую значки FontAwesome-5 и хочу добавить значок fa-search в панель поиска react-bootstrap-table2-toolkit, как показано ниже

есть какие-нибудь предложения по этому поводу

я решил эту проблему, добавив приведенный ниже стиль к значку fa-search

 css
#{yourid} {
    position: absolute;
    width: 2.375rem;
    /*height: 2.375rem;*/
    line-height: 2.375rem;
    text-align: center;
    color: #7B7B7B;
}

js file
<i className='fas fa-search' id='filtersubmit' style={{fontSize:'15px'}}/>
<SearchBar {...props.searchProps} placeholder=''/>