JSFiddle - React, Tailwind, and code Playground

by klaus triendl

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.84/jsviews.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<div id="trackingToolbarTemplateWrap" style="display:none">
    <span>
    <button data-link="{on ~edit} {:_name}">
      click me
    </button>
    </span>
</div>

<div class="table-box">
  <table id="schedulesTable" class="display nowrap dataTable dtr-inline" cellspacing="0" role="grid" width="100%">
    <thead>
      <tr role="row">
        <th>Name</th>
        <th>Toolbar</th>
      </tr>
    </thead>
  </table>
</div>

JavaScript

var json = '{"Scheduling":{"Schedules":{"Schedule":[{"_name":"New Schedule"},{"_name":"weekly"}]}}}';

var service = JSON.parse(json);

var table = $("#schedulesTable").DataTable({
  data: service.Scheduling.Schedules.Schedule,
  columnDefs: [{
    targets: 1,
    render: function (rowData, reason) {
      if (reason === 'display') {
        return '';
      }
      return rowData;
    },
    createdCell: function completeCellCreation(td, unused, rowData) {
      var trackingToolbar = $("#trackingToolbarTemplateWrap > span").clone();
      $(td).append(trackingToolbar);

      $.link(true, trackingToolbar, rowData, {
        edit: function editSchedule() {
          alert('clicked');
        },
      });
    },
  }],
  /*rowId: 'scheduleName',*/
  paging: false,
  info: false,
  deferRender: true,
  scrollCollapse: true,
  responsive: true,
  order: [[0, 'asc']],
  columns: [
    { data: '_name' },
    { data: null },
  ],
});