Add button to each row in react-bootstrap-table next

Question

I would like to add a button to each row of react-bootstrap-table 2 and want to bind button click also. But now it does not work.

Here is my code,

InOutHeader() {
    return (
        <Table className="border-0 m-0 p-0">
            <colgroup>
                <col width="50" />
                <col />
            </colgroup>
            <thead>
                <tr>
                    <th className="border-0 border-left p-1 text-center" colSpan="2">
                        In
                    </th>
                </tr>
                <tr>
                    <th className="border-bottom-0 border-left-0 p-1">Time</th>
                    <th className="border-bottom-0 p-1">Date</th>
                </tr>
            </thead>
        </Table>
    );
}

InOutDate(cell, row) {
    return (
        <Table className="border-0 m-0 p-0">
            <thead>
                <tr>
                    <td width="50" className="border-bottom-0 border-left-0 border-top-0 p-1">
                        {moment(row.ct1).format("hh:mm")}
                    </td>
                    <td className="border-bottom-0 border-right-0 border-top-0 p-1">{moment(row.ct1_dd).format("DD-MM-YYYY")}</td>
                </tr>
            </thead>
        </Table>
    );
}

GetDateFormat(cell, row) {
    return (
        moment(row.tdate).format("DD-MM-YYYY ") +
        moment(row.tdate)
            .format("dddd")
            .substring(0, 3)
    );
}

GetBooleanFormat(cell, row) {
    return row.isapproved ? "True" : "False";
}

GetActionFormat(cell, row) {
    return (
        <div>
            <button type="button" className="btn btn-outline-primary btn-sm ts-buttom" size="sm" onClick={this.handleModelEdit}>
                Edit
            </button>
            <button type="button" className="btn btn-outline-danger btn-sm ml-2 ts-buttom" size="sm">
                Delete
            </button>
        </div>
    );
}

getcolumnlist() {
    const columns = [
        {
            dataField: "tdate",
            text: "Date",
            classes: "p-1",
            formatter: this.GetDateFormat,
            headerStyle: {
                width: "120px"
            },
            sort: true
        },
        {
            dataField: "empid",
            text: "Employee ID",
            classes: "p-1",
            sort: true
        },
        {
            dataField: "cscid",
            text: "Cost Center",
            classes: "p-1",
            sort: true
        },
        {
            dataField: "shiftid",
            text: "Shift ID",
            classes: "p-1",
            sort: true
        },
        {
            text: "In",
            dataField: "ct1",
            headerFormatter: this.InOutHeader,
            headerStyle: {
                padding: "0px",
                width: "140px"
            },
            formatter: this.InOutDate,
            classes: "p-0"
        },
        {
            dataField: "isapproved",
            text: "Approve",
            formatter: this.GetBooleanFormat,
            classes: "p-1",
            sort: true
        },
        {
            text: "Action",
            dataField: "",
            formatter: this.GetActionFormat,
            classes: "p-1"
        }
    ];

    return columns;
}

handleModelEdit() {
    console.log("hello");
}

<BootstrapTable keyField={"id"} 
     data={this.state.timesheetstemp} 
     columns={this.getcolumnlist()}
>
</BootstrapTable>

When I click the button, it's not going to handlemodeledit function.

Each row shows the button but when there is no onclick function on button and click is not working.

Please let me know how to achieve this issue?

You need to make a loop to insert the button in each row. — mindmaster
– mindmaster, Commented Sep 4, 2019 at 10:17
@mindmaster, I think u misunderstand my question, each row has a button but {onclick} function is not work. — Arkar
– Arkar, Commented Sep 4, 2019 at 10:20
@Arkar, You need to use a fat-arrow function in yout GetActionFormat. Have an example working, open the console (F12) and click on Edit, you'll see it's working -> codesandbox.io/s/react-bootstrap-table-next-basic-example-md3m1 — mindmaster
– mindmaster, Commented Sep 4, 2019 at 10:44

parsley72 · Accepted Answer · 2020-09-23 19:23:57Z

3

The problem is probably that you do not pass this correctly.

You have to bind the function GetActionFormat within your constructor like this:

constructor(props) {
    super(props);
    this.GetActionFormat= this.GetActionFormat.bind(this);
}

Or you can transform the function to be an fat-arrow function. It will work exactly as before but correctly passes this into the function:

GetActionFormat = (cell, row) => {
     return (
         <div>
             <button type="button" className="btn btn-outline-primary btn-sm ts-buttom" size="sm" onClick={this.handleModelEdit}>
                 Edit
             </button>
             <button type="button" className="btn btn-outline-danger btn-sm ml-2 ts-buttom" size="sm">
                 Delete
             </button>
         </div>
     );
 }

edited Sep 23, 2020 at 19:23

parsley72

9,31710 gold badges76 silver badges115 bronze badges

answered Sep 4, 2019 at 10:41

Domino987

8,8642 gold badges17 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

Add button to each row in react-bootstrap-table next

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