JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/preview/searchPane/dataTables.searchPane.min.css">
<script src="https://cdn.datatables.net/plug-ins/preview/searchPane/dataTables.searchPane.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h3>Please read steps in the "SearchPane - feedback" discussion</h3>

<input type="button" id="btn2" value="Problem 2"/>
<input type="button" id="btn3" value="Problem 3"/>

<table width="100%" class="display" id="example"></table>

JavaScript

var table;

var dataSet = [{
  name: "Garrett Winters",
  position: "Accountant",
  office: "Tokyo",
  male: true
}, {
  name: "Tiger Nixon",
  position: "System Architect",
  office: "Edinburgh",
  male: true
}, {
  name: "Ashton Cox",
  position: "Junior Technical Author",
  office: "San Francisco",
  male: true
}, {
  name: "Brenden Wagner",
  position: "Software Engineer",
  office: "San Francisco",
  male: true
}, {
  name: "Charde Marshall",
  position: "Regional Director",
  office: "San Francisco",
  male: false
}, {
  name: "Colleen Hurst",
  position: "Javascript Developer",
  office: "San Francisco",
  male: false
}];


$(document).ready(function() {
  $('#btn2').click(btn2_Click);
  $('#btn3').click(btn3_Click);
  
  table = $('#example').DataTable({
    deferRender: true,
    ajax: function (data, callback, settings) {
      // just for this demo, this is only a facade of an ajax operation
      callback({ data: dataSet });
    },
    searchPane: true,
    order: [],
    columns: [{
      data: "name",
      title: "Name"
    }, {
      data: "position",
      title: "Position"
    }, {
      data: "office",
      title: "Office"
    }, {
      data: "male",
      title: "Male (Problem 1)",
      render: function (data, type, row, meta) {
        if (type === 'display')  {
          var s = '<input type="checkbox" onclick="return false;"';
          if (data === true) { s = s + ' checked="checked"'; }
          return s + '/>';
        } else {
          return data;
        }
      }
    }
    ]
  });
});

function btn2_Click(event) {
  table.row(0).remove();
  table.row.add({
    name: "Cedric Kelly",
    position: "Javascript Developer",
    office: "Edinburgh",
    male: true
  });
  table.draw("full-hold");
  table.searchPanes.rebuild();
}

function btn3_Click(event) {
  dataSet = [{ // exchange the entire dataSet
    name: "Caesar Vance",
    position: "Pre-Sales Support",
    office: "New York",
    male: true
  }, {
    name: "Doris Wilder",
...