Create clickable buttons on react-bootstrap-table on cell

Question

I am trying to load a modal on click of 'Click here to view' Button in react-bootstrap-table

Can anybody help me? How can I load a modal onClick of cell

Answer 1

Create a component for your button that shows a dialog in its click handler. With react-bootstrap-table, you can pass a data-formatter function for the cell in your header-column definition, that renders this button.

The following example uses react-bootstrap-dialog (https://github.com/akiroom/react-bootstrap-dialog/) for the modal.

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import Dialog from 'react-bootstrap-dialog';

class YourTable extends Component {

    cellButton(cell, row, enumObject, rowIndex) {
        return (
            <YourButton cell={cell} row={row} rowIndex={rowIndex} />
        )
    }
    render() {
        return (
            <BootstrapTable data={yourdata}>
                <TableHeaderColumn dataField='id' isKey>Id</TableHeaderColumn>
                <TableHeaderColumn
                    dataField='sessionDetails'
                    dataFormat={this.cellButton.bind(this)}></TableHeaderColumn>
            </BootstrapTable>
        )
    }
}

class YourButton extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(cell, row, rowIndex) {
        this.dialog.show({
            body: `Confirm... "${cell}"?`,
            actions: [
                Dialog.CancelAction(),
                Dialog.OKAction(() => {
                // do whatever you want
                })
            ]
        })
   }

   render() {
        const { cell, row, rowIndex } = this.props;
        return (
            <React.Fragment>
                <Button
                    bsStyle="primary"
                    onClick={() => this.handleClick(cell, row, rowIndex)}
                >Show Info</Button>
                <Dialog ref={(el) => { this.dialog = el }} />
            </React.Fragment>
        )
    }
}

See: https://allenfang.github.io/react-bootstrap-table/docs.html#dataFormat for more info, but be aware that react-bootstrap-table is deprecated.