how to set onClick event on a button inside a datatable in ReactJS

Question

I have seen several working examples in jQuery but none in the context of React. So wanted this specific query raised.

I have a react Component Class which renders a datatable (as in datatables.net). I have added a View Button for each row in the datatable using column:defaultContent of datatable-Options.

I have written a class Method which is supposed to execute when the view Button is pressed.

The embedded HTML in columnDefault Option is

                columns: [
                  { "defaultContent":`<button onClick=${this.onView}>View</button>`},
                  { data: "name" },
                  { data: "email" },
                  { data: "mobile", "defaultContent": "<i>Not set</i>" },
                  { data: "landline", "defaultContent": "<i>Not set</i>"}
                ]

I can see that the Buttons are rendered.

The challenge is to get the onView method to execute with the specific recordId.

where that id exists can you please explain your scenario

Tayyab Razzaq
– Tayyab Razzaq

2019-01-24 14:58:06 +00:00
Commented Jan 24, 2019 at 14:58 — Tayyab Razzaq
– Tayyab Razzaq, Commented Jan 24, 2019 at 14:58

Tayyab Razzaq · Accepted Answer · 2019-01-24 15:15:45Z

2

if you want to pass data to the callback function which is bind to onclick of button you can use below mentioned code

<button onClick=${() => this.onView(recordId)}>View</button>

answered Jan 24, 2019 at 15:15

Tayyab Razzaq

4613 silver badges11 bronze badges

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

4 Comments

Avinash Over a year ago

it give me Uncaught SyntaxError: Unexpected end of input I tried using function keyword as well { "defaultContent":<button onClick=${function(){this.onView(_id)}}>View</button>},

Avinash Over a year ago

it also says _id not found during compilation... meaning the _id is a column name of the table which datatable can see but not React.

Tayyab Razzaq Over a year ago

try wrapping button in parenthesis { "defaultContent":(<button onClick=${function(){this.onView(_id)}}>View</button>)}

Tayyab Razzaq Over a year ago

Use debugger statement to test weather the id exists or not before that line executed

Thanushka · Accepted Answer · 2021-05-31 07:08:26Z

My solution

   "columns": [
                   {
                       "data": "Column 1",
                   },
                   {
                       "data": "Column 2",
                   },
                   {
                       "data": "Column 3",
                   },
                   {
                       "data": null,
                       "searchable": false,
                       "orderable": false,
                       "render": function (data, type, full, meta) {
                           return ''
                       }
                   },
               ], 
 "columnDefs": [
                   {
                       targets: 3,
                       createdCell: (td, cellData, rowData, row, col) =>
                         ReactDOM.render(
                           <button className="btn btn-warning" style={{borderRadius: '30px'}}
                             onClick={changeName}>
                            data
                           </button>, td),
                     } 
               ]

    const changeName = async (e) => {
        alert('ok')
    }

Mihai Răducanu · Accepted Answer · 2021-12-10 13:54:02Z

0

  columns: [
    { data: 'Column 3' },
    {
      data: null,
      searchable: false,
      orderable: false,
      render: function(data, type, full, meta) {
        return '';
      },
    },
  ],
  columnDefs: [
    { targets: 3, createdCell: (td, cellData, rowData, row, col) => ReactDOM.render(
      <button className="btn btn-warning" style={{borderRadius: '30px'}} onClick={changeName}></button>,
      data,
      td)
    },
  ],

edited Dec 10, 2021 at 13:54

Mihai Răducanu

12.6k4 gold badges26 silver badges31 bronze badges

answered Dec 9, 2021 at 11:46

awaisjavaid390

12 bronze badges

Collectives™ on Stack Overflow

how to set onClick event on a button inside a datatable in ReactJS

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related