JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<table id="sample">
  <thead>
    <tr>
      <th>First name</th>
      <th>Surname</th>
      <th>Age</th>
      <th>Eye color</th>
      <th>Gender</th>
      <th>Company</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
</table>

JavaScript

var sample;

$(document).ready(function() {
  sample = $('#sample').DataTable({
    'ajax': 'https://api.myjson.com/bins/36fgj',
    'pageLength': 25,
    'columns': [{
      data: 'firstName'
    }, {
      data: 'surname'
    }, {
      data: 'age'
    }, {
      data: 'eyeColor'
    }, {
      data: 'gender'
    }, {
      data: 'company'
    }, {
      data: 'email'
    }, {
      data: 'phone'
    }],
    'dom': '<"top"flp>rt<"bottom"i><"clear">'
  });
  
  	var editor = new $.fn.dataTable.Editor( {
		ajax: 'https://api.myjson.com/bins/36fgj',
		table: '#sample',
		fields: [
				{
					"label": "跟踪:",
					"name": "firstName",
					"type": "select",
					"def": 0,
					"options": [
	                    { label: "没有开始", value: "0" },
	                    { label: "跟踪一次", value: "1" },
	                    { label: "跟踪二次", value: "2" },
	                    { label: "跟踪三次", value: "3" },
	                    { label: "跟踪四次", value: "4" },
	                    { label: "跟踪五次", value: "5" }
	                ]
				},
			{
				"label": "email:",
				"name": "email",
				"type": "textarea"
			},
			{
				"label": "phone:",
				"name": "phone",
				"def": "跟踪",
				"type": "select"
			}
		]
	} );
  
		$('#sample').on( 'click', 'tbody td:not(:first-child)', function (e) {//td:not(:first-child)不包含第一列
        var index = $(this).index();
        if ( index != 8 ) {
			editor.inline( this, {
				onBlur: 'submit',
				drawType: 'full-hold'//'full-reset'重新绘表'full-hold'分页不重设
			} );
		}
		} );
  
  window.setInterval(function() {
    var currentPage = sample.page.info()['page'];
    sample.ajax.reload(function() {
      sample.page(currentPage).draw('page');
    });
  }, 5000);

});