How to add a button inside a react bootstrap table?

Question

I'm trying to add a button to a cell in a react bootstrap table with the following is my code:

    import React, { Component } from "react";
    import BootstrapTable from "react-bootstrap-table-next";
    import { Button } from 'reactstrap';

    class ActionsCard extends Component {

    constructor(props) {
        super(props);
        this.state = {
          actions: [{action: "Upgrade device", details: "Upgrade device to version 0.1.1", _id: "1"}],
          valid: true
        };
        this.columns = [
          {
            text: "Action",
            dataField: "action",
            sort: true,
            editable: false,
            headerStyle: (colum, colIndex) => {
              return { width: "5%", textAlign: "left" };
            }
          },
          {
            text: "Details",
            dataField: "details",
            sort: true,
            editable: false,
            headerStyle: (colum, colIndex) => {
              return { width: "12%", textAlign: "left" };
            }
          },
          {
            sort: true,
            headerStyle: (colum, colIndex) => {
              return { width: "16%", textAlign: "left" };
            },
            Header: 'Test',
            Cell: cell => (
               <Button onClick={() => console.log(cell.original)}>Upgrade</Button>
            ),
          }
        ];
      }

      render() {
        return (
          <React.Fragment>
            <BootstrapTable
              keyField="_id"
              data={this.state.actions}
              columns={this.columns}
              noDataIndication="No Interfaces available"
              defaultSorted={[{ dataField: "action", order: "asc" }]}
            />
          </React.Fragment>
        );
  }
}

export default ActionsCard;

However, when I run the code, the two first columns of the table appear as expected, but the third column is simply empty.

Tony · Accepted Answer · 2019-09-01 13:41:55Z

3

You can use formatter to add button as in this discussion mention

    {
        dataField: "databasePkey",
        text: "Remove",
        formatter: (cellContent: string, row: IMyColumnDefinition) => {
            if (row.canRemove)
                return <button className="btn btn-danger btn-xs" onClick={() => this.handleDelete(row.databasePkey)}>Delete</button>
            return null
        },
    },

answered Sep 1, 2019 at 13:41

Tony

20.3k7 gold badges42 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

How to add a button inside a react bootstrap table?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related