JSFiddle - React, Tailwind, and code Playground

HTML

<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/linq.js"></script>
<table id="grid" class="table table-striped table-bordered cell-border">
  <thead>
    <th>Code</th>
    <th>Description</th>
  </thead>
</table>

JavaScript

var app = (function() {

	var module = {};
  
  /**
   * Dummy data container
   */
  module.data = [];
  
  /**
   * Prepare a fake json array containing 20.000 records. Then retrieve the specified ones by skip and take arguments.
   */
  module.getDummyData = function(skip, take) {
  	
    // prepare data
    if (this.data.length == 0) {
      for(var i=0; i<20000; i++) {
				this.data.push({
        	Code: i.toString(),
          Description: "Description " + i.toString()
        })
      }
    }
    
    // returns data
   	return {
        draw: take,
        recordsTotal: this.data.length,
        recordsFiltered: this.data.length,
        data: Enumerable.From(this.data).Skip(skip).Take(take).ToArray()
    }
  };
  
  /**
   * Draw method
   */
  module.draw = function() {
  
    $("#grid").DataTable({

      ajax: function (data, callback, settings) {
      
      	var options = (!data || !data.start)
                      ? settings.oInstance._fnAjaxParameters(data)
                      : data;
                      
        // generate dummy result
				var result = module.getDummyData(options.start, options.length);
        
        console.log(options);
        console.log(result);

        callback(result);

      },
      
      columns: [
      	{ title: "Code", name: "Code", data: "Code" },
        { title: "Description", name: "Description", data: "Description" }
      ]

  	});

  };
  
  return module;

}());

// draw grid
app.draw();