JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="jqxgrid"></div>

JavaScript

var theme = "energyblue";

  // prepare the data
  var data = preparegriddata(200);

  var source = {
      localdata: data,
      datatype: "array",
      datafields: [{
          name: 'firstname',
          type: 'string'
      }, {
          name: 'lastname',
          type: 'string'
      }, {
          name: 'productname',
          type: 'string'
      }, {
          name: 'available',
          type: 'bool'
      }, {
          name: 'quantity',
          type: 'number'
      }],
      updaterow: function (rowid, rowdata, commit) {
          // synchronize with the server - send update command   
          commit(true);
      }
  };

  var dataAdapter = new $.jqx.dataAdapter(source);
  var columnCheckBox = null;
  var updatingCheckState = false;

  var disabled = [0, 3, 5];

  // initialize jqxGrid. Disable the built-in selection.
  $("#jqxgrid").jqxGrid({
      source: dataAdapter,
      editable: true,
      theme: theme,
      enablehover: false,
      selectionmode: 'none',
      pageable: true,
      sortable: true,
      autoheight: true,
      columns: [{
          text: '',
          menu: false,
          sortable: false,
          datafield: 'available',
          columntype: 'checkbox',
          width: 80,
          renderer: function () {
              return '<div><div style="margin-left: 10px; margin-top: 5px;"></div><div>Select</div></div>';
          },
          rendered: function (element) {
              var checkbox = $(element).last();
              $(checkbox).jqxCheckBox({
                  theme: theme,
                  width: 16,
                  height: 16,
                  animationShowDelay: 0,
                  animationHideDelay: 0
              });
              columnCheckBox = $(checkbox);
              $(checkbox).on('change', function (event) {
                  var checked = event.args.checked;
                  var pageinfo = $("#jqxgrid").jqxGrid('getpaginginformation');
                  var pagenum =...