Add button in a react-bootstrap-table

Question

I'm using react-bootstrap-table (var ReactBsTable = require("react-bootstrap-table")).

I want to add a column that just contain a button in a bootstraptable .

Any idea thanks.

<BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}>
  <TableHeaderColumn isKey={true} dataField="id" hidden {true}>ID</TableHeaderColumn>
  <TableHeaderColumn dataField="title" dataSort={true}>Title</TableHeaderColumn>
  <TableHeaderColumn dataField="adress" dataSort{true}>Adress</TableHeaderColumn>
  ///I dont know if here or there is option to use
 </BootstrapTable>

I tried to add a button which display the id or the row data correspondent to this button. I used jquery but I give an id to the button but all these buttons would have the same id so just the first one work and the rest no.

<BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}>
  <TableHeaderColumn isKey={true} dataField="id" hidden {true}>ID</TableHeaderColumn>
  <TableHeaderColumn dataField="title" dataSort={true}>Title</TableHeaderColumn>
  <TableHeaderColumn dataField="adress" dataSort{true}>Adress</TableHeaderColumn>
  <TableHeaderColumn dataField="button" dataFormat={this.buttonFunction}></TableHeaderColumn>

 </BootstrapTable>

buttonFunction: function (cell, row) {
        var today = new Date().toISOString();
        if (row.status === "En cours") {
            if (row.dateEnd > today) {
                return <Alert_Validate></Alert_Validate>;
            } else {
                return <label>
                    <button type="button" id="validatebutton" onClick={this._validateFunction} className="bbtn btn-primary btn-sm"><i className="fa fa-check fa-1x" aria-hidden="true"></i>
                    </button>
                </label>

            }
        }
    },

_validateFunction: function () {
        var userid=this.props.params.id;
        $("#validatebutton").click(function() {
            var $row = $(this).closest("tr");
             var activityid = $row.find("td:nth-child(2)");
            console.log("activity id :"+activityid.text());
        });

iamsaksham · Accepted Answer · 2016-06-07 06:42:46Z

17

You can make a new function buttonFormatter to add button to every cell of the column

// products will be presented by react-bootstrap-table
var products = [{
  id: 1,
  name: "Item name 1",
  price: 100
},{
  id: 2,
  name: "Item name 2",
  price: 100
},........];

// It's a data format example.
function priceFormatter(cell, row){
  return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
},
function buttonFormatter(cell, row){
  return '<BootstrapButton type="submit"></BootstrapButton>';
}

React.render(
  <BootstrapTable data={products} striped={true} hover={true}>
      <TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true}>Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField="price" dataFormat={priceFormatter}>Product Price</TableHeaderColumn>
      <TableHeaderColumn dataField="button" dataFormat={buttonFormatter}>Buttons</TableHeaderColumn>
  </BootstrapTable>,
    document.getElementById("app")
);

edited Jun 7, 2016 at 6:42

answered Jun 6, 2016 at 12:46

iamsaksham

2,9494 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ShMswi Over a year ago

Maybe I didn't explain well my question. I need the button inside the column for each row and not in the header.

ShMswi Over a year ago

I need to get the cell or row when i click on the button .Is there any idea?

iamsaksham Over a year ago

Please explain the architecture that you want to build? Where do you want to access your cell and row? You can access them in the buttonFormatter method already. Try putting some logic in the same function. Anyway, i'd suggest you use react-bootstrap as it is quite simple and its documentation is really nice. You can import only table from react-bootstrap, so size of the app wont be the issue.

AziCode Over a year ago

@iamsaksham I have a similar issue, I would like to display the button conditionally. I'm trying to compare the ids of the objects in my database and compare them to the row.id. depending on the result I would like to display a different button. Can you please have a look at my SO question: stackoverflow.com/questions/43244914/…

Gutimore Over a year ago

any idea on how to archieve this on react-boostrap-table2 ?

|

Juan Felipe · Accepted Answer · 2016-12-01 15:58:11Z

17

I had a similar situation, I was implemented this code, I hope it helps you.

https://jsfiddle.net/69z2wepo/63821/

var dataFake = [
{
  name: 'Product 1',
  priceUnit: 23.50
},
{
  name: 'Product 2',
  priceUnit: 24.50
},
{
  name: 'Product 3',
  priceUnit: 33.20
}];


class Products extends React.Component {
  onClickProductSelected(cell, row, rowIndex){
   console.log('Product #', rowIndex);
  }

  cellButton(cell, row, enumObject, rowIndex) {
    return (
       <button 
          type="button" 
          onClick={() => 
          this.onClickProductSelected(cell, row, rowIndex)}
       >
       Click me { rowIndex }
       </button>
    )
 }

 render() {
   return (
    <BootstrapTable data={this.props.data}>
     <TableHeaderColumn dataField='name' isKey>
        Name
      </TableHeaderColumn>
      <TableHeaderColumn dataField='priceUnit'>
        Price
      </TableHeaderColumn>
      <TableHeaderColumn
        dataField='button'
        dataFormat={this.cellButton.bind(this)}
      />
   </BootstrapTable>
  )
 }
}



ReactDOM.render(
   <Products data={dataFake} />,
   document.getElementById('container')
);

answered Dec 1, 2016 at 15:58

Juan Felipe

1811 silver badge2 bronze badges

2 Comments

AziCode Over a year ago

I have a similar issue, I would like to display the button conditionally. I'm trying to compare the ids of the objects in my database and compare them to the row.id. depending on the result I would like to display a different button. Can you please have a look at my SO question: stackoverflow.com/questions/43244914/…

Kevin Hooke Over a year ago

This helped me work out the 'this' binding to be able to call another function from within the button renderer for the dataFormat. Thanks for the example!

Collectives™ on Stack Overflow

Add button in a react-bootstrap-table

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related