title: React Bootstrap Table (Version2): Adding Html Buttons
body: <p>this is my first time to use React Bootstrap table Version 2 and I'm starting bulding CMS and my plan is to list all inserted mail to the data table. I already list all value from database. however the problem is how to put the buttons to the column of action.. I hope someone could help me to finish this. Thanks... </p>
  
  <p><strong>The problem:</strong> regarding rendering buttons inside <strong>Action</strong> column and why the function button not shown inside of cell. </p>
  
  <p><strong>My goal: is to get the ID of every user and when i click the button it will Route Link to the other page.</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/8Xdm5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Xdm5.jpg" alt="Output Should be"></a></p>
  
  <p><strong>My Function Button:</strong></p>
  
  <pre><code> viewmail(cell, row){
      &lt;Link to={"/view/mail/"+cell}&gt;&lt;button className='btn btn-outline-primary btn lg'&gt;Test&lt;/button&gt;&lt;/Link&gt;    
   }
  </code></pre>
  
  <p><strong>My Columns Code:</strong></p>
  
  <pre><code>const options = {
          paginationSize: 5,
          pageStartIndex: 1,
          firstPageText: 'First',
          prePageText: 'Back',
          nextPageText: 'Next',
          lastPageText: 'Last',
          nextPageTitle: 'First page',
          prePageTitle: 'Pre page',
          firstPageTitle: 'Next page',
          lastPageTitle: 'Last page',
          showTotal: true,
          paginationTotalRenderer: customTotal,
          sizePerPageList: [{
            text: '2', value: 2
          }, {
            text: '5', value: 5
  
          // }, {
          //   text: 'All', value: this.state.unread_mail_api.length
          }] // A numeric array is also available. the purpose of above example is custom the text
        };
  
  
  
  
  
          const { SearchBar } = Search;
  
          const columns = [{
              dataField: 'id',
              text: 'Id',
              sort: true
              }, {
              dataField: 'fullname',
              text: 'Full Name'
              }, {
              dataField:'subject',
              text: 'Subject'
  
              } ,{
              dataField: 'id',
              text: 'Action',
              dataFormat:this.viewmail
          }];
  </code></pre>
  
  <p><strong>My Render JSX:</strong></p>
  
  <pre><code>&lt;ToolkitProvider
  keyField="id"
  data={ this.state.unread_mail_api }
  columns={ columns }
  
  search
  &gt;
  {
      props =&gt; (
      &lt;div&gt;
          &lt;h3&gt;Input something at below input field:&lt;/h3&gt;
          &lt;SearchBar { ...props.searchProps } /&gt;
          &lt;hr /&gt;
          &lt;BootstrapTable
          { ...props.baseProps }
          pagination={ paginationFactory(options) }
          /&gt;
      &lt;/div&gt;
      )
  }
  &lt;/ToolkitProvider&gt;
  </code></pre>