How to add row specific action buttons in react-bootstrap-table2 (React.js)

Question

I am trying to add a delete button to every row of my tables rendered with react-bootstrap-table2. I have sorted data by category and placed in my local state

state = {
  data: [
    {
      products: [
        {
          name: "Product 1",
          price: "200"
        },
        {
          name: "Product 2",
          price: "300"
        },
        ...
      ]
    },
    ...
}

and rendered a separate table for each object in this.state.data and filled with the data from the products array from the corresponding object using this.state.data.map((category, index) => ..). I have also set the id of each of the tables to match the index of the this.state.data's object from where they were rendered from.

But where I struggle is, I want to add a delete button to each row; upon searching, I discovered the formatter property for columns that provides us cell, row, rowIndex but how can I access the table's id? So I can potentially use the code in my columns:

columns = () => {
  ...
  {
    isDummyField: true,
    formatter: (cell, row, rowIndex) => {
      return <Button 
             color="primary"
             onClick={() => {
               console.log (`Product ${rowIndex} of Category ${tableId} deleted`);
             }>
             Delete Product
             </Button>
    }
  }
}

I'm lost on how to access tableId. Can anyone help me with this? I have always found react-bootstrap-tables very confusing.

Muneeb Naveed · Accepted Answer · 2020-06-06 18:15:07Z

2

I solved this problem from the back-end. Basically I added a unique id to each product and then in the button onClick=(), I simply accessed the product's unique id using row.id

answered Jun 6, 2020 at 18:15

Muneeb Naveed

1931 gold badge1 silver badge11 bronze badges

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

1 Comment

Enis Gur Over a year ago

Thank you for sharing the solution. That's what I needed :))

Collectives™ on Stack Overflow

How to add row specific action buttons in react-bootstrap-table2 (React.js)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related