Is there a way to add button on each row in datatable? [react js]

Question

I want to add 2 buttons [edit and delete] on each row in datatable in react js.

But I couldn't figure out, how to do it; Please guide me and put some insight into, how to approach or solve this problem.

In order to solve this problem, I tried this code. But it is couldn't work out.

My code

    import Datatable from "../../../common/tables/components/Datatable";


<Datatable
    options={{
      ajax: "http://demo.weybee.in/react/results.json",
      columns: [
        { data: "companycode" },
        { data: "companyname" },
        { data: "firstname" },
        { data: "cityid" },
        { data: "contactno" },
        { data: "workno" },
        { data: <button>Click!</button>}
      ],
      buttons: ["colvis",]
    }}
    className="table table-striped table-bordered table-hover"
    width="100%"
  >
    <thead>
      <tr>
        <th data-hide="phone">Code</th>
        <th data-class="expand">CompanyName</th>
        <th>Firstname</th>
        <th data-hide="phone">City</th>
        <th data-hide="phone,tablet">Mobile Number</th>
        <th data-hide="phone,tablet">Work Number</th>
        <th>Actions</th>
        </tr>
    </thead>
  </Datatable>

Actual coding of datatable

import React from "react";

import $ from "jquery";

require("datatables.net-bs");
require("datatables.net-buttons-bs");
require("datatables.net-buttons/js/buttons.colVis.js");
require("datatables.net-buttons/js/buttons.flash.js");
require("datatables.net-buttons/js/buttons.html5.js");
require("datatables.net-buttons/js/buttons.print.js");
require("datatables.net-colreorder-bs");
require("datatables.net-responsive-bs");
require("datatables.net-select-bs");

export default class Datatable extends React.Component {
  componentDidMount() {
    this.datatable(this.props.data);
  }

  datatable() {
    const element = $(this.refs.table);
    let { options } = { ...this.props } || {};

    let toolbar = "";
    if (options.buttons) toolbar += "B";
    if (this.props.paginationLength) toolbar += "l";
    if (this.props.columnsHide) toolbar += "C";

    if (typeof options.ajax === "string") {
      let url = options.ajax;
      options.ajax = {
        url: url,
        complete: function(xhr) {
          // AjaxActions.contentLoaded(xhr)
        }
      };
    }

    options = {
      ...options,
      ...{
        dom:
          "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" +
          toolbar +
          ">r>" +
          "t" +
          "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
        oLanguage: {
          sSearch:
            "<span class='input-group-addon input-sm'><i class='glyphicon glyphicon-search'></i></span> ",
          sLengthMenu: "_MENU_"
        },

        autoWidth: true,
        retrieve: true,
        responsive: true
      }
    };

    const _dataTable = element.DataTable(options);

    if (this.props.filter) {
      // Apply the filter
      element.on("keyup change", "thead th input[type=text]", function() {
        _dataTable
          .column(
            $(this)
              .parent()
              .index() + ":visible"
          )
          .search(this.value)
          .draw();
      });
    }

    if (!toolbar) {
      element
        .parent()
        .find(".dt-toolbar")
        .append(
          '<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>'
        );
    }

    if (this.props.detailsFormat) {
      const format = this.props.detailsFormat;
      element.on("click", "td.details-control", function() {
        const tr = $(this).closest("tr");
        const row = _dataTable.row(tr);
        if (row.child.isShown()) {
          row.child.hide();
          tr.removeClass("shown");
        } else {
          row.child(format(row.data())).show();
          tr.addClass("shown");
        }
      });
    }
  }

  render() {
    let {
      children,
      options,
      detailsFormat,
      paginationLength,
      ...props
    } = this.props;
    return (
      <table {...props} ref="table">
        {children}
      </table>
    );
  }
}

Error

Instead of buttons, object object is displaying [in Action column] on datatable.

Answer 1

in my project I use for this purpose something like this:

let buttonDetails = "<a href='" + urlDetails + "' title='" + titleDetails +"' class='dtDetails' data-target='#remoteModal1' data-toggle='modal' data-backdrop='static'><span class='glyphicon glyphicon-search'></span></a>";

let buttonEdit = "<a href='"+urlEdit+"' title='"+titleEdit+"' class='dtEdit' data-target='#remoteModal' data-toggle='modal' data-backdrop='static'><span class='glyphicon glyphicon-pencil'></span></a>";

let buttonDelete = "<a href='" + urlDelete + "' title='" + titleDelete +"' class='dtDelete' data-target='#remoteModal1' data-toggle='modal' data-backdrop='static'><span class='glyphicon glyphicon-remove'></span></a>";

...

 "columnDefs": [
    ...
    {
        "targets": [2],
        "width": miCustomWidth,
        "className": "center",
        "data": function (d) {          
            return buttonDetails.replace("ID_X", d.rowIdField) + " " + buttonEdit.replace("ID_X", d.rowIdField) + " " + buttonDelete.replace("ID_X", d.rowIdField);
        }
    }
    ...
    ]