CODEWITHSUNDEEP
reactjsreact-bootstrap-table
DevGe
DevGe

Reputation: 1459

React Bootstrap Table (Version2): Adding Html Buttons

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...

The problem: regarding rendering buttons inside Action column and why the function button not shown inside of cell.

My goal: is to get the ID of every user and when i click the button it will Route Link to the other page.

Output Should be

My Function Button:

 viewmail(cell, row){
    <Link to={"/view/mail/"+cell}><button className='btn btn-outline-primary btn lg'>Test</button></Link>    
 }

My Columns 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
        }];

My Render JSX:

<ToolkitProvider
keyField="id"
data={ this.state.unread_mail_api }
columns={ columns }

search
>
{
    props => (
    <div>
        <h3>Input something at below input field:</h3>
        <SearchBar { ...props.searchProps } />
        <hr />
        <BootstrapTable
        { ...props.baseProps }
        pagination={ paginationFactory(options) }
        />
    </div>
    )
}
</ToolkitProvider>

Upvotes: 3

Views: 5269

Answers (2)

Dinith Minura
Dinith Minura

Reputation: 1496

I manage to solve this type of issue as follows by adding formatter field to column

{
    dataField: 'link',
    text: 'ACTION',
    formatter: (rowContent, row) => {
      return (    
        <a href="#">Check</a>
      )
    }
}

Upvotes: 2

pritam
pritam

Reputation: 2558

You could return anything (string/JSX) from a formatter attribute of the column. To show a button, just return a button component from the formatter function.

Have a look at the code sandbox created specially for showing a link button in a column here.

Upvotes: 3

Related Questions