2

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

enter image description here

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

2
  • can you share the code which you have tried? Commented Feb 5, 2018 at 11:32
  • Possible duplicate of Add button in a react-bootstrap-table Commented Jul 13, 2018 at 11:11

1 Answer 1

4

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.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.