Add custom buttons in react datatable

vrundavakil

In react.js ,how can I add Edit Delete action buttons and perform any event?

colin

Hi @vrundavakil ,

This thread should help, it's asking the same thing.

Cheers,

Colin

Shoaib_Qasim

hi @allan i have a query how to add edit and delet button in eachy row and on click of them i want to get the data from that specific row
i am trying to implement datatables in react js kinldy give me any solution

colin

Is this using Editor as in this example?

To get the data, in the click handler, you should just be to use table.row(this).data() - see here,

Colin

Shoaib_Qasim

I have post a question here finally i get the answer so i decided to share that for others
in my columns to show edit button i used below code for React Js

 {
          title: "Action",
          render: function () {
            return `<button   class='btn btn-info btn-sm'>Edit</button>`;
          },
          searchable: false,
          orderable: false,
        }

And for clicking on edit button i simply changing the routes

 $(document).ready(function () {
      var table = $("#example").DataTable();
      $("#example tbody").on("click", "button", function () {
        var data = table.row($(this).parents("tr")).data();

        history.push(`/editUser/${data.id}`);// this is my route
      });
    });

here example is the id of table
I hope it will be helpfull for Others

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

fhuo

can someone help me to implement Shoaib-solution in React?
Thank you so much.