Call react function from jQuery data table

user_1690835 0
Viewed 98

I am using the jQuery data table in a react application. I want to call a react function from the data table. In the data table, I am using the render function to create a custom column with edit and delete buttons. So when clicking on the button I want to show a bootstrap modal. Below is the code for the render

{
                    "targets": 4,
                    "data": "",
                    "render": function (data, type, row, meta) {
                        return `
                        <div><button type="" class=" mr-3"><img src="images/table-edit-icon.svg" alt=""></button></div>
                        <div><button type="" class="" onClick={e => { setDeleteShow(true); }}><img src="images/table-delete-icon.svg" alt=""></button></div>
                        `;
                    }
                }

Here setDeleteShow is a function in react for showing the modal. It is not working. It is displaying the function name on UI. How can I call this function?

reactjs datatables jquery javascript
1 Answers

I was able to call the react function using below code.

createdCell: (td, cellData, rowData, row, col) => {
                        ReactDOM.render(
                            <div class=" d-flex">
                            <div><button type="" class=" mr-3"><img src="images/table-edit-icon.svg" alt=""/></button></div>
                        <div><button type="" class="" onClick={() => setDeleteShow(true)}><img src="images/table-delete-icon.svg" alt=""/></button></div>
                        </div>, td)
                    }
user_16908350
Related