JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<div id="container" class="table-container" dir="ltr">
  <table id="MyGrid" class="table table-bordered table-condensed hover" >
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>
<div id="MyFotter" class="footer-class">
</div>

CSS

.table-container
{
  display: block; 
  max-height: 100px; 
  overflow: auto; 
  width: 100%;
}

table 
{
    width: 100%;
    table-layout: fixed;
    position: relative;
}

td 
{
    text-align: center; 
    vertical-align: middle;
    /*word-wrap:break-word;*/
}

.table > thead > tr > th 
{
    background-color: #f5f5f5;
    text-align: center; 
    vertical-align: middle;
    word-wrap:break-word;
    min-width: 100px;
}

.table-condensed > tbody > tr > td, 
.table-condensed > tbody > tr > th, 
.table-condensed > tfoot > tr > td, 
.table-condensed > tfoot > tr > th, 
.table-condensed > thead > tr > td, 
.table-condensed > thead > tr > th 
{
    padding:1px;
}

.footer-class {
    display: flex; 
    justify-content: space-between; 
    overflow-x: hidden; 
    width: 100%;
}

/*******************************/
/* DataTables built-in classes */
/*******************************/

table.dataTable.no-footer {
  border: none;
}
.dataTables_info {
    margin-top: 25px;
    margin-left: 10px;
}

.dataTables_paginate {
    margin-right: 10px;
}

JavaScript

$(document).ready(function()
{
  var theGrid = $("#MyGrid").DataTable(
    {
      "fixedHeader": true,
      "columns":
      [
      	{data: 'One', title: 'one'},
        {data: "Two", title: 'two'},
        {data: "Three", title: 'three'}
      ],
      "dom": "tipr",
      "autoWidth": false,
      "pagingType": "simple",
    });
    
    Functions.RepositionFooter();
    var data = Functions.GetRecords();
    theGrid.rows.add(data).draw();

});

var Functions =
{
  RepositionFooter: function ()
  {
    var footer = $("#MyFotter");
    $(".dataTables_info").prependTo(footer);
    $(".dataTables_paginate").appendTo(footer);
  },
  
  GetRecords: function ()
  {
  	var container = [];
    var data = {
      	"One": "one",
        "Two": "two",
        "Three": "three"
    };
    for (var i = 0; i < 10 ; ++i)
    	container.push(data);
    return container;
  }
}